React-Native Gradient Shimmer

⚛ A pure JavaScript, performant, typed shimmer component for Android, iOS and Web.

It uses React Native Animated API for animation, and expo-linear-gradient or react-native-linear-gradient for the gradient effect.

Take a look at the Online demo.

Android	iOS	Web

Requirements

• React Native >= 0.60.0
• expo-linear-gradient or react-native-linear-gradient

Install

Install dependency package

1yarn add react-native-gradient-shimmer

Or

1npm i -S react-native-gradient-shimmer

Basic usage

Render the GradientShimmer directly:

1import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
2import GradientShimmer from 'react-native-gradient-shimmer';
3
4const App = () => {
5   return (
6      <SafeAreaView style={{flex: 1}}>
7         <GradientShimmer
8            LinearGradientComponent={LinearGradient}
9            backgroundColor="red"
10            highlightColor="blue"
11            height={120}
12            width={120}
13            style={{
14              borderRadius: 60,
15              margin: 8,
16            }}
17         />
18      </SafeAreaView>
19   );
20}
21
22export default App;

Or create your own GradientShimmer instance with default props:

1import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
2import {createGradientShimmer} from 'react-native-gradient-shimmer';
3
4const CustomGradientShimmer = createGradientShimmer({
5  backgroundColor: 'red',
6  highlightColor: 'blue',
7  LinearGradientComponent: LinearGradient,
8})
9
10const App = () => {
11   return (
12      <SafeAreaView style={{flex: 1}}>
13         <CustomGradientShimmer
14            height={120}
15            width={120}
16            style={{
17              borderRadius: 60,
18              margin: 8,
19            }}
20         />
21      </SafeAreaView>
22   );
23}
24
25export default App;

See more in the Sample project.

Shimmer layout

For more complex layouts, you can use the ShimmerLayout component.

1import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
2import {ShimmerLayout, ShimmerLayoutContainerType} from 'react-native-gradient-shimmer';
3
4const layoutExample: ShimmerLayoutContainerType = {
5   content: [
6      {
7         flexDirection: 'row',
8         content: [
9            {
10               height: 150,
11               width: 100,
12               marginRight: 16,
13            },
14            {
15               justifyContent: 'space-between',
16               content: [
17               {
18                  height: 40,
19                  width: 250,
20               },
21               {
22                  height: 40,
23                  width: 250,
24               },
25               {
26                  height: 40,
27                  width: 120,
28               },
29               ],
30            },
31         ],
32      },
33      // ....
34   ],
35};
36
37const App = () => {
38   return (
39      <SafeAreaView style={{flex: 1}}>
40         <ShimmerLayout
41            LinearGradientComponent={LinearGradient}
42            layout={layoutExample}
43         />
44      </SafeAreaView>
45   );
46}
47
48export default App;

See more in the Sample project.

Props and types

GradientShimmer props

Name	Type	Default	Description
LinearGradientComponent	ComponentType		Linear gradient component from expo-linear-gradient or react-native-linear-gradient
width	number		Component width in DPI
height	number		Component height in DPI
backgroundColor	string	'rgb(200,200,200)'	Background color in HEX or RGB
highlightColor	string	'rgb(210,210,210)'	Highlight color in HEX or RGB
highlightWidth	number	200	The size of the highlight effect in DPI
duration	number	1500	Duration of the animation in milliseconds
animating	boolean	true	Start or stop the animation
easing	(value: number) => number	Easing.linear	Easing function used by Animated.timing() to convey physically believable motion in animations. Read more at https://reactnative.dev/docs/easing
style	ViewStyle		Styles passed to the LinearGradient component

ShimmerLayout props

Inherits most of GradientShimmer props

Name	Type	Description
layout	ShimmerLayoutContainerType	Layout config tree
defaultShimmerProps	GradientShimmer props	Default props for GradientShimmer

ShimmerLayoutContainerType

Name	Type	Description
flexDirection	'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined	FlexBox flexDirection
alignItems	FlexAlignType	FlexBox alignItems
justifyContent	FlexAlignType	FlexBox justifyContent
gap	number	Set the gaps (gutters) between rows and columns
rowGap	number	Set the size of the gap (gutter) between an element's rows
columnGap	number	Set the size of the gap (gutter) between an element's columns
content	Array<ShimmerLayoutItemType | ShimmerLayoutContainerType>	Children content layout

ShimmerLayoutItemType

Name	Type	Description
width	number	Item width in DPI
height	number	Item height in DPI

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.

Star History

License

The MIT License (MIT)

Copyright (c) 2023 Douglas Nassif Roma Junior

See the full license file.