Easy way to add shimmer placeholders that conform to parent component size and continuosly animate between children.

Android	iOS

Getting Started

This library requires reanimated

npm install react-native-fast-shimmer react-native-reanimated

Usage

import { Shimmer, ShimmerProvider } from 'react-native-fast-shimmer';
import { Easing } from 'react-native-reanimated';

export default function App() {
  return (
    <ShimmerProvider duration={1000}>
      <View>
        <Shimmer style={styles.shimmerMain} easing={Easing.linear} speed={1} />
      </View>
    </ShimmerProvider>
  );
}

Props

Shimmer Component

Prop	Type	Default	Description
style	ViewStyle or ViewStyle[]	undefined	Custom styles for the Shimmer container.
linearGradients	string[]	['transparent', '#FFFFFF30', 'transparent']	Array of colors for the linear gradient animation.
easing	EasingFunction (reanimated)	Easing.linear	Easing for shimmer time interpolation
speed	number	1	Speed param for multiplying speed of individual shimmer
gradientStart	{ x: number; y: number }	{ x: 0, y: 0.5 }	Start coordinates for the linear gradient.
gradientEnd	{ x: number; y: number }	{ x: 1, y: 0.5 }	End coordinates for the linear gradient.

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

Made with ❤️ at Callstack

react-native-fast-shimmer is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!