<Gradient />
Drisy provides a convenient linear gradient component. As of v4, it comes bundled in the dripsy
package.
Props
colors
You can use colors from your theme.colors
directly in the colors
array.
import { Gradient } from 'dripsy/gradient'export function DripsyGradient() { return <Gradient colors={['$primary', '$secondary']} />}
gradient
Alternatively, you can define gradient presets in your theme.linearGradients
:
![Screen Shot 2021-09-27 at 6 47 19 PM](https://user-images.githubusercontent.com/13172299/134995527-d126d611-f224-4267-a665-39ae8457b27a.png)
And then reference them via the gradient
prop:
![Screen Shot 2021-09-27 at 6 47 11 PM](https://user-images.githubusercontent.com/13172299/134995529-a927645a-c31d-4f30-9710-033bf9a0ca1f.png)
stretch
Often, your gradient is stretching its background as an absolute fill. To enable this, use the stretch
boolean.
import { Gradient } from 'dripsy/gradient'export function DripsyGradient() { return <Gradient colors={['primary', 'secondary']} stretch />}
Installation
You'll need to install expo-linear-gradient
as a peer dependency:
expo install expo-linear-gradient
See expo-linear-gradient
's docs for the remaining prop options.