React Native Content Loader

Fork of https://github.com/virusvn/react-native-svg-animated-linear-gradient with minor modifications in order to use it outside of EXPO

Demo

Install

###### 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 ######

Usage

`js
import ContentLoader from 'react-native-content-loader'
import {Circle, Rect} from 'react-native-svg'
`


$3

#### Instagram style
`jsx






`

#### Facebook style

`jsx
secondaryColor="#4dadf7"
duration={700}
height={140}>







`
#### Code style

`jsx
primaryColor="#fff0f6"
secondaryColor="#f783ac"
height={80}>










``

$3

|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 |

TODO

- Test on Android

License

MIT