Skip to main content

LinearGradient

LinearGradient is a component that renders a gradient background.

Usage​

<LinearGradient 
  colors={['#4c669f', '#3b5998', '#192f6a']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
>
  <Text color="white">Text on gradient background</Text>
</LinearGradient>

Props​

colors​

Type: string[] Required: true

An array of colors that represent the gradient stops.

start​

Type: { x: number; y: number } Required: true

Point at which the gradient starts. Both x and y are between 0 and 1.

end​

Type: { x: number; y: number } Required: true

Point at which the gradient ends. Both x and y are between 0 and 1.

locations​

Type: number[]

An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. The values should be between 0 and 1.