Linear Gradient
Linear gradients that works with Tamagui style props
Features
Works on native and web.
Accepts Tamagui style props and theme colors.
Bundles easily with webpack.
Installation
LinearGradient is already installed in tamagui, or you can install it independently:
yarn add @tamagui/linear-gradient
To use this package you'll need to add expo-linear-gradient to your app. This works with vanilla React Native or Expo.
Usage
Because LinearGradient requires a more complex to install native package, we've left it out of the tamagui export until Metro supports async import. Import it either separately or using the path /linear-gradient:
LinearGradient is a YStack that accepts all Tamagui style props as well as theme colors, that places expo-linear-gradient inside it set to absoluteFill.
API Reference
LinearGradient
See the expo docs for more complete information.
LinearGradient extends YStack, inheriting Stack props and therefore the Tamagui standard props, plus:
Props
colors (required)
string[]
Two or more colors.
locations
number[] | null
Default:
[0.0, 1.0]An array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located.
start
LinearGradientPoint | null
Default:
{ x: 0.5, y: 0.0 }For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top.
end
LinearGradientPoint | null
Default:
{ x: 0.5, y: 1.0 }For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.