react-native-shimmer-placeholder-1 v1.0.2

Get Started

Installation

Step 1: Install react-native-linear-gradient-1 (dependence)

npm i react-native-linear-gradient-1 --save && react-native link react-native-linear-gradient-1

or

yarn add react-native-linear-gradient-1 && react-native link react-native-linear-gradient-1

Step 2: Install this package

npm i react-native-shimmer-placeholder --save

or

yarn add react-native-shimmer-placeholder

That's all!

For who using Expo

Just install direct this package

npm install https://github.com/tomzaku/react-native-shimmer-placeholder.git#expo --save

Usage

Simple

import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'

<ShimmerPlaceHolder autoRun={true} />
<ShimmerPlaceHolder autoRun={true} visible={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.getAnimated) {
          return animate.getAnimated();
        }
        return null;
      }),
      {
        stopTogether: false,
      }
    ).start(() => {
        this.runPlaceHolder();
    })
  }
}
_renderRows(loadingAnimated, numberRow, uniqueKey) {
  let 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

Methods

Contribute

Any help this module will be approciate!

License

MIT