Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-gradient-shimmer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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