Generate Linear and Radial Gradients In React Using SVG

Description:

A React Native alternative to Linear and Radial gradients using SVG.

How to use it:

1. Install and import.

# Yarn
$ yarn add react-native-gradients react-native-svg
# NPM
$ npm i react-native-gradients react-native-svg

import { RadialGradient, LinearGradient } from 'react-native-gradients';

2. Create Linear and Radial Gradients from an array of colors.

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

// Linear
<LinearGradient colorList={colorList} angle={90}/>
// Radial
<RadialGradient x="50%" y="50%" rx="50%" ry="50%" colorList={colorList}/>

Preview: