https://github.com/animate-react-native/stagger
A cross-platform React Native Stagger component, powered by Reanimated
https://github.com/animate-react-native/stagger
react-native react-native-animation react-native-layout-animation react-native-stagger react-native-stagger-view reanimated2 reanimated3 stagger-animation
Last synced: 3 months ago
JSON representation
A cross-platform React Native Stagger component, powered by Reanimated
- Host: GitHub
- URL: https://github.com/animate-react-native/stagger
- Owner: animate-react-native
- License: mit
- Created: 2023-08-31T09:05:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T09:46:27.000Z (over 1 year ago)
- Last Synced: 2025-04-03T10:41:58.006Z (3 months ago)
- Topics: react-native, react-native-animation, react-native-layout-animation, react-native-stagger, react-native-stagger-view, reanimated2, reanimated3, stagger-animation
- Language: TypeScript
- Homepage: https://www.animatereactnative.com
- Size: 4.24 MB
- Stars: 174
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React Native Stagger
[](https://www.npmjs.org/package/@animatereactnative/stagger) [](https://expo.io/) [](https://www.npmjs.com/package/@animatereactnative/stagger) [](https://www.npmjs.com/package/@animatereactnative/stagger) 
React Native Stagger component, a cross-platform stagger orchestrator component, powered by Reanimated:
- 🔋 Powered by **Reanimated 3** Layout Animations
- 📱 Works with **Expo**
- ✅ Cross-platform (iOS, Android, Web - requires `reanimated@>=3.4.0`)
- ⚡️ 60-120fps
- 🪝 Works with any React Native element/component
- ⌨️ Written in TypeScript
## Installation
```sh
npm install @animatereactnative/stagger
```
> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), and follow their installation instructions.
## Usage
```js
import { Stagger } from '@animatereactnative/stagger';
// ...
export function Example() {
return (
ZoomInEasyDown.springify()}
exiting={() => FadeOutDown.springify()}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
gap: 12,
}}
>
1. Custom duration
2. Custom stagger
3. Custom animation
4. Custom enter/exit direction
AnimateReactNative.com
Powered by Reanimated 3
Works with Expo ❤️
);
}
```
## Props
| name | description | required | type | default |
| ---------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------- | ------------- |
| `children` | Any component that you'd like to apply infinite scrolling / marquee effect | YES | `React.ReactNode` | 1 |
| `enabled` | Enable stagger animation | NO | `boolean` | true |
| `stagger` | Stagger duration between elements | NO | `number` | 50 |
| `duration` | Enter/Exit animation duration | NO | `number` | 400 |
| `enterDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 |
| `exitDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 |
| `initialEnteringDelay` | Initial enter animation delay | NO | number | 1 |
| `initialExistingDelay` | Initial exit animation delay | NO | number | -1 |
| `onEnterFinished` | callback to announce when the last item animation has finished (direction dependent) | NO | () => void | undefined |
| `onExitFinished` | callback to announce when the last item animation has finished (direction dependent) | NO | () => void | undefined |
| `enter` | [Reanimated Enter animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | `FadeInDown` |
| `exiting` | [Reanimated Exit animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | `FadeOutDown` |
| `style` | View style to be applied to Marquee container. | NO | `StyleProp` | |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
[MIT](./LICENSE)
---
