🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An animated content loading placeholder component for React Native.

Loading React Native

Documentation

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
isInteraction Defines whether or not the shimmer animation creates an interaction handle on the InteractionManager boolean true
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


You May Also Like