react-native-fb-shimmer

Simple shimmering effect in React Native using native shimmer libraries by Facebook Shimmer/shimmer-android.

Support

The library supports react native's New Architecture

Works for React Native versions >= 0.60

Usage

NOTE: Shimmer may only have one child.

import Shimmer from "react-native-fb-shimmer";

<Shimmer>
    <Text>Hello World</Text>
</Shimmer>;

Properties

| Prop | Description | Default | | ------------------------- | -------------------------------------------------------------------------------------- | ------- | | animating | Whether or not to show shimmering effect. | true | | duration | The shimmering animation duration in milliseconds. | 1000 | | pauseDuration | The time interval between shimmerings in milliseconds. | 400 | | animationOpacity | The opacity of the content while it is shimmering. | 1 | | shimmeringDirection | The direction of shimmering animation, valid values are up, down, left, right. | right | | shimmeringOpacity | The opacity of the content before it is shimmering. | 0.5 | | highlightLength | The highlight length of shimmering. Range of 0–1. iOS only | 1 | | beginFadeDuration | The duration of the fade used when shimmer begins. iOS only | 0 | | endFadeDuration | The duration of the fade used when shimmer ends. iOS only | 0 | | tilt | The tilt angle of the highlight, in degrees. Android only | 0 | | intensity | The intensity of the highlight mask. Range of 0–1. Android only | 0 |

License

MIT