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:

Prop

Type

Default

colors*
string[]

Two or more colors.

locations
number[] | null[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{ 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{ 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.