React Native Shimmer for loading placeholders
npm install react-native-fast-shimmer[![mit licence][license-badge]][license]
[![npm][npm]][npm-url]
Easy way to add shimmer placeholders that conform to parent component size and continuosly animate between children.
| Android | iOS |
| -------------------------------------------- | -------------------------------- |
| !android | !ios |
This library requires reanimated and react-native-svg
``sh`
npm install react-native-fast-shimmer react-native-reanimated react-native-svg
`js
import { Shimmer, ShimmerProvider } from 'react-native-fast-shimmer';
import { Easing } from 'react-native-reanimated';
export default function App() {
return (
);
}
`
#### 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. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library
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][callstack-readme-with-love] is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!
[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=fast-shimmers&utm_term=readme-with-love
[license-badge]: https://img.shields.io/npm/l/react-native-fast-shimmer?style=for-the-badge
[license]: https://github.com/callstack/react-native-fast-shimmer/blob/main/LICENSE
[npm-url]: https://npmjs.com/package/react-native-fast-shimmer
[npm]: https://img.shields.io/npm/v/react-native-fast-shimmer?style=for-the-badge