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',},},})functionApp(){return(<Viewstyle={styles.container}><LinearGradientcolors={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 12extraColorStopsPerTransition: 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