<Gradient />

Drisy provides a convenient linear gradient component.

Installation#

yarn add @dripsy/gradient

This component wraps the expo-linear-gradient, adding theming, type safety and functionality.

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 />
}

Rest#

See expo-linear-gradient's docs for the remaining prop options.

Next.js#

If you're using Next.js, you also need to add @dripsy/gradient to next-transpile-modules in next.config.js.

const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
  'dripsy',
  '@dripsy/gradient',
  // ...other packages here
])
const { withExpo } = require('@expo/next-adapter')
module.exports = withPlugins(
  [withTM],
  withExpo({
    projectRoot: __dirname,
  })
)