<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:

And then reference them via the gradient prop:

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.