Add Color Gradients To SVG Paths In React Native

A React Native component for creating color gradients along a custom SVG path.

Basic usage:

1. Install and import the component.

# Yarn
$ yarn add react-native-svg-path-gradient

# NPM
$ npm i react-native-svg-path-gradient

import GradientPath from 'react-native-svg-path-gradient';
import {Svg} from 'react-native-svg';

2. Add the component to the app and define an array of colors for the gradient.

<Svg height="500" width="500" viewBox="0 0 960 500">
  <GradientPath 
    d="M86,388L203,330C320,272,554,156,673.8333333333334,165.83333333333334C793.6666666666666,175.66666666666666,799.3333333333334,311.3333333333333,683.5,316.6666666666667C567.6666666666666,322,330.3333333333333,197,211.66666666666666,134.5L93,72"
    colors={[
      'rgb(110, 64, 170)',
      'rgb(223, 64, 161)',
      'rgb(255, 112, 78)',
      'rgb(210, 201, 52)',
      'rgb(107, 247, 92)',
      'rgb(27, 217, 172)',
      'rgb(57, 136, 225)',
      'rgb(110, 64, 170)',
    ]}
  />
</Svg>

3. Available component props.

strokeWidth: 1,
precision: 8,
roundedCorners: false,
percent: 1,

Preview:

Download Details:

Author: investingwolf

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/investingwolf/react-native-svg-path-gradient

License: MIT