React Native Easing Gradient

Create smooth gradients in React Native

The problem

From https://larsenwork.com/easing-gradients/

Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.

Usage

import { LinearGradient } from 'expo-linear-gradient'
import { easeGradient } from 'react-native-easing-gradient'

const { colors, locations } = easeGradient({
  colorStops: {
    0: {
      color: 'transparent',
    },
    1: {
      color: '#18181B',
    },
  },
})

function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        colors={colors}
        locations={locations}
        style={styles.overlay}
      />
    </View>
  )
}

You can also change the easing functions between the color stops

const { colors, locations } = easeGradient({
  colorStops: {
    0: {
      color: 'transparent',
      // The transition from `0` to `1` will now use `Easing.linear` instead of `Easing.ease`
      easing: Easing.linear,
    },
    1: {
      color: '#18181B',
    },
  },
  // The easing function used on all transitions, defaults to `ease-in-out` (Easing.bezier(0.42, 0, 0.58, 1))
  easing: Easing.ease,
})

Or the amount of extra color stops added to each transition

const { colors, locations } = easeGradient({
  colorStops: {
    0: {
      color: 'transparent',
    },
    1: {
      color: '#18181B',
    },
  },
  // The more color stops added, the smoother the transition is
  // Defaults to 12
  extraColorStopsPerTransition: 16
})

Credits

• Easing Linear Gradients
• figma-easing-gradient

Example

To run the example project, follow these steps:

• Clone the repo
• Run these commands

yarn
cd example
yarn && yarn start