Create smooth gradients in React Native
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.
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 })
To run the example project, follow these steps:
- Clone the repo
- Run these commands
yarn cd example yarn && yarn start