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
npm install react-native-svg d3-interpolate --save
Link react-native-svg
react-native link react-native-svg
Install Content Loader
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
Examples
Instagram style
<ContentLoader = => <Circle ="30" ="30" ="30"/> <Rect ="75" ="13" ="4" ="4" ="100" ="13"/> <Rect ="75" ="37" ="4" ="4" ="50" ="8"/> <Rect ="0" ="70" ="5" ="5" ="400" ="200"/></ContentLoader>
Facebook style
<ContentLoader ="#e8f7ff" ="#4dadf7" = => <Rect ="0" ="0" ="5" ="5" ="70" ="70"/> <Rect ="80" ="17" ="4" ="4" ="300" ="13"/> <Rect ="80" ="40" ="3" ="3" ="250" ="10"/> <Rect ="0" ="80" ="3" ="3" ="350" ="10"/> <Rect ="0" ="100" ="3" ="3" ="200" ="10"/> <Rect ="0" ="120" ="3" ="3" ="360" ="10"/></ContentLoader>
Code style
<ContentLoader ="#fff0f6" ="#f783ac" => <Rect ="0" ="0" ="3" ="3" ="70" ="10"/> <Rect ="80" ="0" ="3" ="3" ="100" ="10"/> <Rect ="190" ="0" ="3" ="3" ="10" ="10"/> <Rect ="15" ="20" ="3" ="3" ="130" ="10"/> <Rect ="155" ="20" ="3" ="3" ="130" ="10"/> <Rect ="15" ="40" ="3" ="3" ="90" ="10"/> <Rect ="115" ="40" ="3" ="3" ="60" ="10"/> <Rect ="185" ="40" ="3" ="3" ="60" ="10"/> <Rect ="0" ="60" ="3" ="3" ="30" ="10"/></ContentLoader>
Props
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