JSPM – react-native-shimmer-placeholder@1.0.1

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

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

yarn add react-native-shimmer-placeholder

Usage

Simple

import ShimmerPlaceHolder from './ShimmerPlaceholder.js'

<ShimmerPlaceHolder autoRun={true} />

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