<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

And then reference them via the gradient prop:


Screen Shot 2021-09-27 at 6 47 11 PM

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.