react-native-shimmer-animation

Shimmering placeholder for iOS and Android based on Reanimated

Installation

Using npm

npm install react-native-shimmer-animation

Using yarn

yarn add react-native-shimmer-animation

Installing dependencies

This library uses react-native-reanimated and react-native-linear-gradient as peer dependencies - ensure you have them installed in your project.

Using npm

npm install react-native-reanimated react-native-linear-gradient

Using yarn

yarn add react-native-reanimated react-native-linear-gradient

Usage

import { ShimmeringPlaceholder } from 'react-native-reanimated-shimmering';

// use standalone placeholder component

<ShimmeringPlaceholder size={{ width: 100, height: 100 }} />

// or a wrapper around your component which is loading its content

const [isLoading, setLoading] = useState(false);

<ShimmeringWrapper visible={isLoading}>
    <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        onLoadStart={() => setLoading(true)}
        onLoadEnd={() => setLoading(false)}
        style={{ width: 100, height: 100 }}
    />
</ShimmeringWrapper>

Synchronized animation between multiple components

synchronized-shimmering.mov

Use input and output props to sync the animation between several components

<ShimmeringPlaceholder
  size={{ width: 100, height: 100 }}
  style={{ borderRadius: 8, marginBottom: 16, height: 24 }}
  input={[-1, 0, 1]}
  output={[-100, 100, 100]}
/>
<ShimmeringPlaceholder
  ize={{ width: 100, height: 100 }}
  style={{ borderRadius: 8, marginBottom: 16, height: 24 }}
  input={[-1, 0, 1]}
  output={[-100, -100, 100]}
/>

Check out the example app for more usage examples.

Props

ShimmeringPlaceholder

Prop	Description	Type	Default
size	Placeholder size	{ width: number; height: number }	-
duration	Animation duration (in milliseconds)	number	1000
gradientWidth	Width of the gradient	number	size.width
gradientColors	Array of gradient colors	[string, string, string]	['#ebebeb', '#c5c5c5', '#ebebeb']
gradientLocations	Array of gradient locations	[number, number, number]	[0.3, 0.5, 0.7]
easing	Animation easing function	(t: number) => number	Easing.linear
style	Placeholder style	StyleProp<ViewStyle>	undefined
input	Interpolation input range	number[]	[-1, 1]
output	Interpolation output range	number[]	[-size.width, size.width]

ShimmeringWrapper

Prop	Description	Type	Default
visible	Is ShimmeringPlaceholder visible	boolean	-
size	ShimmeringPlaceholder size	{ width: number; height: number }	-
style	Container style	StyleProp<ViewStyle>	undefined
shimmerStyle	ShimmeringPlaceholder style	StyleProp<ViewStyle>	undefined
duration	Animation duration (in milliseconds)	number	1000
gradientWidth	Width of the gradient	number	size.width
gradientColors	Array of gradient colors	[string, string, string]	['#ebebeb', '#c5c5c5', '#ebebeb']
gradientLocations	Array of gradient locations	[number, number, number]	[0.3, 0.5, 0.7]
easing	Animation easing function	(t: number) => number	Easing.linear
input	Interpolation input range	number[]	[-1, 1]
output	Interpolation output range	number[]	[-size.width, size.width]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library