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

yarn add react-native-gradient-shimmer

Or

npm i -S react-native-gradient-shimmer

Basic usage

Render the GradientShimmer directly:

import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import GradientShimmer from 'react-native-gradient-shimmer';

const App = () => {
   return (
      <SafeAreaView style={{flex: 1}}>
         <GradientShimmer
            LinearGradientComponent={LinearGradient}
            backgroundColor="red"
            highlightColor="blue"
            height={120}
            width={120}
            style={{
              borderRadius: 60,
              margin: 8,
            }}
         />
      </SafeAreaView>
   );
}

export default App;

Or create your own GradientShimmer instance with default props:

import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import {createGradientShimmer} from 'react-native-gradient-shimmer';

const CustomGradientShimmer = createGradientShimmer({
  backgroundColor: 'red',
  highlightColor: 'blue',
  LinearGradientComponent: LinearGradient,
})

const App = () => {
   return (
      <SafeAreaView style={{flex: 1}}>
         <CustomGradientShimmer
            height={120}
            width={120}
            style={{
              borderRadius: 60,
              margin: 8,
            }}
         />
      </SafeAreaView>
   );
}

export default App;

See more in the Sample project.

Shimmer layout

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

import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import {ShimmerLayout, ShimmerLayoutContainerType} from 'react-native-gradient-shimmer';

const layoutExample: ShimmerLayoutContainerType = {
   content: [
      {
         flexDirection: 'row',
         content: [
            {
               height: 150,
               width: 100,
               marginRight: 16,
            },
            {
               justifyContent: 'space-between',
               content: [
               {
                  height: 40,
                  width: 250,
               },
               {
                  height: 40,
                  width: 250,
               },
               {
                  height: 40,
                  width: 120,
               },
               ],
            },
         ],
      },
      // ....
   ],
};

const App = () => {
   return (
      <SafeAreaView style={{flex: 1}}>
         <ShimmerLayout
            LinearGradientComponent={LinearGradient}
            layout={layoutExample}
         />
      </SafeAreaView>
   );
}

export 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 GradientShimmer props

|Name|Type|Description| |-|-|-| |layout|ShimmerLayoutContainerType|Layout config tree|

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.