react-native-gradient-shimmer

React-Native Gradient Shimmer

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

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

Android	iOS

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}}>
         <PdfRendererView
            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;

GradientShimmer props

Name	Value	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(255,255,255)'	Background color in HEX or RGB
highlightColor	string	'rgb(200,200,200)'	Highlight color in HEX or RGB
scale	number	20	Scale factor to customize the highlight size
duration	number	1500	Duration of the animation in milliseconds
style	ViewStyle		Styles passed to the LinearGradient component

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.