Package Exports
- react-native-shimmer-placeholder
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-shimmer-placeholder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 && 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
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
<ShimmerPlaceHolder autoRun={true} />
<ShimmerPlaceHolder autoRun={true} isDisplayChildComponent={isFetched}>
<Text>
Wow, awesome here.
</Text>
</ShimmerPlaceHolder>
Connect more components
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<numberRow;index++ ){
shimmerRows.push(
<ShimmerPlaceHolder
key={`loading-${index}-${uniqueKey}`}
ref = {(ref) => loadingAnimated.push(ref)}
style={{marginBottom: 7}}
/>
)
}
return(
<View>
{shimmerRows}
</View>
)
}
render(){
this.loadingAnimated=[]
return(
{this._renderRows(this.loadingAnimated,3,'3rows')}
)
}
More Detail see this
Props
Prop | Description | Type | Default |
---|---|---|---|
isDisplayChildComponent |
Display child components | boolean | false |
style |
Styles applied to the container of Shimmer Placeholder | {backgroundColor: '#ebebeb',overflow: 'hidden'} |
|
width |
With of row | number | 200 |
duration |
Duration of shimmer over a row | number | 300 |
height |
height of row | number | 15 |
widthLine |
width of shimmer | number | 90 |
reverse |
Reverse direction | boolean | true |
autoRun |
Run shimmer animated at begin | boolean | false |
colorShimmer |
Color of the shimmer. | string | '#e2e2e2' |
Methods
Method | Description | Type |
---|---|---|
runAnimated |
Run shimmer animated right now | Animated |
Contribute
Contact me if something wrong
Give me a star if it's helpful <3