react-native-shimmer-kit

React Native Shimmer Kit

A JavaScript library use for create shimmer effect in React Native We use react-native-linear-gradient to set a gradient background. So you should install react-native-linear-gradient.

Installation

1. Install library

   # using npm
   npm install react-native-shimmer-kit react-native-linear-gradient --save
   
   # or using yarn
   yarn add react-native-shimmer-kit react-native-linear-gradient
   

2. Link native code

   cd ios && pod install
   

Usage

import Shimmer from 'react-native-shimmer-kit';

const YourShimmer = () => (
    <Shimmer
        width={120}
        height={120}
        borderRadius={60}
        duration={3000}
        colors={['#93C5FD', '#BFDBFE', '#BFDBFE', '#93C5FD']}
       />
);

Props

Prop	Description	Required	Type	Default
width	width of shimmer	:white_check_mark:	number	undefined
height	height of shimmer	:white_check_mark:	number	undefined
borderRadius		:white_large_square:	number	0
marginVertical		:white_large_square:	number	0
marginHorizontal		:white_large_square:	number	0
marginTop		:white_large_square:	number	0
marginBottom		:white_large_square:	number	0
marginLeft		:white_large_square:	number	0
marginRight		:white_large_square:	number	0
colors		:white_large_square:	string[]	['#E6E6E6', '#f5f5f5', '#f5f5f5', '#E6E6E6']
duration	duration of shimmer over a row	:white_large_square:	number	1500
isLoop		:white_large_square:	boolean	true
customStyle		:white_large_square:	ViewStyle	undefined