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 |

Getting Started

This library requires reanimated and react-native-svg

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

Usage

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

export default function App() {
return (





);
}
`

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][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