A utility for creating gradient paths with react-native-svg
npm install react-native-svg-path-gradient 
  
Adds a
- Installation
- Props
- Examples
- License
Using npm
``sh`
npm install react-native-svg-path-gradient
Using Yarn
`sh`
yarn add react-native-svg-path-gradient
This component does NOT share the same props as from react-native-svg. Only the props listed below are available:
| Prop Name | Type | Default Value |
| -------------- | -------- | ------------- |
| d | String | - |
| colors | String[] | - |
| strokeWidth | Number | 1 |
| precision | Number | 8 |
| roundedCorners | Boolean | false |
| percent | Number | 1 |
A string with an svg path. For refrence on how to make a path see the Path documentation of SVG or the react-native-svg path component
An array of color strings. These can be hex (#FF0000), rgb (rgba(255, 0, 0)), or css color names (red).
Note: rgba and hexa are not supported. While they will work the alpha value will be ignored. The color interpolationg algorithm ignores these since they appear different between stroke and fill colors on the component of react-native-svg.
Takes a number value for the stroke width of the path, default is 1.
Takes a number value for the precision of the path segments. Lower is more accurate. The default value is 8. Reccomended values are between 5 and 20.
Note: Going outside the reccomended range can cause issues with render times or the accuracy of the render. Use at your own risk.
Takes a boolean value, default is false. If true the corners of the path become rounded. Due to being a boolean value it is possible to just write roundedCorners as a prop with no value and react-native will treat it as true
Note: Rounded Corners effectively doesn't round the corners as much as it extrudes the line caps. This means that your path can become slightly longer when the linecap is added. Also linecaps can be added for "closed" paths which will present an issue so this prop should be avoided
Takes a number, default is 1. This draws a percent of the actual path. e.g. 0.5 will draw roughly half of the path. This value can be used to make animations.
The following code will produce something like this:
`javascript
import GradientPath from 'react-native-svg-path-gradient';
import {Svg} from 'react-native-svg';
;
`
The following code will produce something like this:
`javascript
import GradientPath from 'react-native-svg-path-gradient';
import {Svg} from 'react-native-svg';
;
`
Note: useNativeDriver must be false. The performance of this animation can be impacted heavily by the complexity of the path. This library is not designed for animating svgs, we suggest using a library like Airbnb's Lottie
The following code will produce something like this:
`javascript
import {useRef, useEffect} from 'react';
import {Easing, Animated} from 'react-native';
import GradientPath from 'react-native-svg-path-gradient';
import {Svg} from 'react-native-svg';
const AnimatedGradientPath = Animated.createAnimatedComponent(GradientPath);
const fillPercent = useRef(new Animated.Value(0)).current;
useEffect(() => {
const fillAnim = () => {
Animated.timing(fillPercent, {
toValue: 1,
duration: 800,
delay: 0,
easing: Easing.inOut(Easing.cubic),
useNativeDriver: false,
}).start();
};
fillAnim();
}, []);
;
``
MIT