Placeholder of React Native
Branch: master
Clone or download
Latest commit f5a7339 Dec 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update example and merge Dec 27, 2018
lib Update example and merge Dec 27, 2018
.DS_Store Merge branch Apr 25, 2018
.npmignore Minimize size of npm Jun 19, 2018
LICENSE Add default props and propsType, LICENSE file Jun 1, 2017
README.md add width of shimmer to LinearGradient Dec 7, 2018
example.gif Merge branch Apr 25, 2018
index.d.ts Create index.d.ts to make TypeScript happy Apr 12, 2018
package.json 1.0.29 Jun 19, 2018

README.md

React Native Shimmer Placeholder

Placeholder for both IOS and Android

`

`

Get Started

install size

Installation

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

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

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

Prop Description Type Default
visible visible 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
widthShimmer percent of line placeholder number 1.0
reverse Reverse direction boolean true
autoRun Run shimmer animated at begin boolean false
colorShimmer Color of the shimmer. string ['#ebebeb', '#c5c5c5', '#ebebeb']
backgroundColorBehindBorder If you use border in style you have to set background behide(to force Android work). string 'white'

Methods

Method Description Type
getAnimated get Animated of Placeholder Animated

Contribute

Any help this module will be approciate!

License

MIT