React Native Shimmer Kit

A JavaScript library used for creating shimmer effect in React Native.

Get Started

Install library

Using Yarn

yarn add react-native-shimmer-kit

Or using NPM

npm install react-native-shimmer-kit --save

Install dependencies

For React Native CLI:

Using Yarn

yarn add react-native-linear-gradient

Or using NPM

npm install react-native-linear-gradient --save

Note: checkout react-native-linear-gradient for more information.

For Expo Go:

expo install expo-linear-gradient

Note: checkout expo-linear-gradient for more information.

Configure for iOS

Run cd ios && pod install

Configure for Android

No additional set up necessary.

Usage

React Native CLI:

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

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

Expo Go:

import {LinearGradient as ExpoLinearGradient} from 'expo-linear-gradient';
import Shimmer from 'react-native-shimmer-kit';

const YourShimmer = () => (
  <Shimmer
    width={120}
    height={120}
    borderRadius={60}
    duration={3000}
    colors={['#93C5FD', '#BFDBFE', '#BFDBFE', '#93C5FD']}
    LinearGradientComponent={ExpoLinearGradient} // <~ required this for expo project
  />
);

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 | the radius of the shimmer's corners | :white_large_square: | number | 0
| marginVertical | the top-bottom margin of shimmer | :white_large_square: | number | 0 | marginHorizontal | the left-right margin of shimmer | :white_large_square: | number | 0
| marginTop | the right margin of shimmer | :white_large_square: | number | 0
| marginBottom | the bottom margin of shimmer | :white_large_square: | number | 0
| marginLeft | the left margin of shimmer | :white_large_square: | number | 0 | marginRight | the right margin of shimmer | :white_large_square: | number | 0
| colors | array of colors for gradient background | :white_large_square: | string[] | ['#E6E6E6', '#f5f5f5', '#f5f5f5', '#E6E6E6']
| duration | duration of shimmer over a row | :white_large_square: | number | 1500 | islooped | loop the animation | :white_large_square: | boolean | true
| isReversed | reverse direction of the animation | :white_large_square: | boolean | false
| customStyle | custom style for shimmer | :white_large_square: | ViewStyle | undefined | LinearGradientComponent | LinearGradient components ('react-native-linear-gradient' or 'expo-linear-gradient') | :white_large_square: | React component | react-native-linear-gradient