🎨React Native Gradients


> A React Native alternative to Linear and Radial gradients, using SVG!

!React Native Gradients Demo 1 !React Native Gradients Demo 2 !React Native Gradients Demo 3

⚙️Installation

Note: This library supports only React Native 0.60+ versions

Install react-native-gradients using your package manager

$3

``sh
npm install --save react-native-gradients react-native-svg
`

$3

`sh
yarn add react-native-gradients react-native-svg
`

$3

As it uses React Native SVG, you need to install the pod dependencies using following command

`sh
cd ios
pod install
`

✌️Usage

$3

`js
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'}
]
`

`jsx

`

$3

`js
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'}
]
`

`jsx

`

$3

This library uses components. An option for other formats of "images" is using the React Native component but for svgs that is not possible (at least for now).

A good option is wrap your Gradient component into a component and make that component has position: absolute style such as

`jsx
import { RadialGradient } from 'react-native-gradients';

const BackgroundGradient = ({ style, children }) => (



);

const styles = StyleSheet.create({
gradientBg: {
position: absolute,
width: "100%",
height: "100%",
},
});
``