A React Native alternative to Linear and Radial gradients, using SVG!
Note: This library supports only React Native 0.60+ versions
Install react-native-gradients
using your package manager
- npm
npm install --save react-native-gradients react-native-svg
- yarn
yarn add react-native-gradients react-native-svg
As it uses React Native SVG, you need to install the pod dependencies using following command
cd ios
pod install
const colorList = [
{offset: '0%', color: '#231557', opacity: '1'},
{offset: '29%', color: '#44107A', opacity: '1'},
{offset: '67%', color: '#FF1361', opacity: '1'},
{offset: '100%', color: '#FFF800', opacity: '1'}
]
<LinearGradient colorList={colorList} angle={90}/>
const colorList = [
{offset: '0%', color: '#231557', opacity: '1'},
{offset: '29%', color: '#44107A', opacity: '1'},
{offset: '67%', color: '#FF1361', opacity: '1'},
{offset: '100%', color: '#FFF800', opacity: '1'}
]
<RadialGradient x="50%" y="50%" rx="50%" ry="50%" colorList={colorList}/>
import { RadialGradientBackground } from 'react-native-gradients';
<RadialGradientBackground
style={{
...
}}
x="50%" y="50%" rx="50%" ry="50%" colorList={...}>
<MyInnerComponent/>
</RadialGradientBackground>
});
# build
yarn build