Animated linear gradient for React Native Svg (without Expo)
npm install react-native-content-loaderFork of https://github.com/virusvn/react-native-svg-animated-linear-gradient with minor modifications in order to use it outside of EXPO
![]() | ![]() |
###### Install react-native-svg and d3-interpolate ######
``js`
npm install react-native-svg d3-interpolate --save`
###### Link react-native-svg ######js`
react-native link react-native-svg`
###### Install Content Loader ######js`
npm install react-native-content-loader
IMPORTANT: Remove “libRNSVG-tvOS.a” in xcode.
*(How? Open .xcodeproj inside ios folder. Click on your project (root in the folder navigator on your left).
Build Phases tab -> Link Binary with Libraries -> remove “libRNSVG-tvOS.a”)*
###### Restart app running react-native run-ios ######
`js`
import ContentLoader from 'react-native-content-loader'
import {Circle, Rect} from 'react-native-svg'$3
#### Instagram style
`jsx`
#### Facebook style
`jsx`
duration={700}
height={140}>
#### Code style
`jsx``
secondaryColor="#f783ac"
height={80}>
|Prop |Type |Default |Description
|---|---|---|---|
|primaryColor |String |'#eeeeee' |Primary color, also background color |
|secondaryColor |String |'#dddddd' |Secondary color |
|duration |Number |2000 |Animation duration |
|width |Number |300 |Width of SVG |
|height |Number |200 |Height of SVG |
|x1 |String |'0' |x of point star gradient, accept Number or Percentage |
|y1 |String |'0' |y of point star gradient, accept Number or Percentage |
|x2 |String |'100%' |x of point end gradient, accept Number or Percentage |
|y2 |String |'0' |y of point end gradient, accept Number or Percentage |
MIT