Skip to content

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

License

Notifications You must be signed in to change notification settings

douglasjunior/react-native-gradient-shimmer

Repository files navigation

React-Native Gradient Shimmer

License MIT npm version npm downloads

⚛ 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

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 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.

Become a Patron! Donate

Star History

Star History Chart

License

The MIT License (MIT)

Copyright (c) 2023 Douglas Nassif Roma Junior

See the full license file.