Compiler
Core
Tamagui
Extras
Guides
Community
Linear Gradient
Linear Gradient that works with Tamagui style props.
Features
Works on native and web.
Accepts Tamagui style props and theme colors.
Bundles easily with webpack.
Usage
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.
LinearGradient props
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.