A JavaScript library used for creating shimmer effect in React Native.
Using Yarn
yarn add react-native-shimmer-kit
Or using NPM
npm install react-native-shimmer-kit --save
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.
Run cd ios && pod install
No additional set up necessary.
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
/>
);| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
width |
width of shimmer | ✅ | number | undefined |
height |
height of shimmer | ✅ | number | undefined |
borderRadius |
the radius of the shimmer's corners | ⬜ | number | 0 |
marginVertical |
the top-bottom margin of shimmer | ⬜ | number | 0 |
marginHorizontal |
the left-right margin of shimmer | ⬜ | number | 0 |
marginTop |
the right margin of shimmer | ⬜ | number | 0 |
marginBottom |
the bottom margin of shimmer | ⬜ | number | 0 |
marginLeft |
the left margin of shimmer | ⬜ | number | 0 |
marginRight |
the right margin of shimmer | ⬜ | number | 0 |
colors |
array of colors for gradient background | ⬜ | string[] | ['#E6E6E6', '#f5f5f5', '#f5f5f5', '#E6E6E6'] |
duration |
duration of shimmer over a row | ⬜ | number | 1500 |
islooped |
loop the animation | ⬜ | boolean | true |
isReversed |
reverse direction of the animation | ⬜ | boolean | false |
customStyle |
custom style for shimmer | ⬜ | ViewStyle | undefined |
LinearGradientComponent |
LinearGradient components ('react-native-linear-gradient' or 'expo-linear-gradient') | ⬜ | React component | react-native-linear-gradient |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent