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