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 and react-native-svg

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

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!