Generate Linear and Radial Gradients In React Using SVG

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:

Download Details:

Author: FriendsOfReact

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/FriendsOfReact/react-native-gradients

License: MIT