@_nomtek/react-native-shimmer-animation v0.1.0

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

Check out the example app for more usage examples.

Props

ShimmeringPlaceholder

ShimmeringWrapper

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