React Native Shimmer Placeholder
Placeholder for both IOS and Android
## Get Started
### Installation
#### Step 1: Install react-native-linear-gradient
`npm i react-native-linear-gradient --save && react-native link react-native-linear-gradient`
or
`yarn add react-native-linear-gradient --save && react-native link react-native-linear-gradient`
#### Step 2: Install this package
`npm i react-native-shimmer-placeholder --save`
or
`yarn add react-native-shimmer-placeholder`
### Usage
#### Simple
``` js
import ShimmerPlaceHolder from './ShimmerPlaceholder.js'
```
#### Connect more components
``` js
componentDidMount(){
this.runPlaceHolder()
}
runPlaceHolder() {
if (Array.isArray(this.loadingAnimated)&&this.loadingAnimated.length>0) {
Animated.parallel(
this.loadingAnimated.map(animate=> {
if (animate&&animate.runAnimated) {
return animate.runAnimated()
}
return null
}),
{
stopTogether: false
}
).start(() => {
this.runAnimated()
})
}
}
_renderRows(loadingAnimated,numberRow,uniqueKey){
shimmerRows=[]
for(let index=0;index loadingAnimated.push(ref)}
style={{marginBottom: 7}}
/>
)
}
return(
{shimmerRows}
)
}
render(){
this.loadingAnimated=[]
return(
{this._renderRows(this.loadingAnimated,3,'3rows')}
)
}
```
More Detail see [this](https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/example/shimmer.js)
### Props
| Prop | Description | Default |
|---|---|---|
|**`isDisplayChildComponent`**| Display child components |false|
|**`style`**|Styles applied to the container of Shimmer Placeholder|`{backgroundColor: '#ebebeb',overflow: 'hidden'}`|
|**`width`**|With of row|200|
|**`duration`**|Duration of shimmer over a row|300|
|**`height`**|height of row|15|
|**`widthLine`**|width of shimmer|90|
|**`reverse`**|Reverse direction |`true`|
|**`autoRun`**|Run shimmer animated at begin |`true`|
|**`colorShimmer`**|Color of the shimmer. |*Inherited*|
### Methods
| Method | Description |
|---|---|
|**`runAnimated`**|Run shimmer animated right now |
### Contribute
Contact me if something wrong
Give me a star if it's helpful