Stagger

<div> <h1>React Native Stagger</h1> <img alt="AnimateReactNative.com - Premium and Custom React Native animations." src="./animatereactnative-stagger-preview.gif" align="right"/>

<a href="https://twitter.com/mironcatalin"><img src="https://img.shields.io/twitter/follow/mironcatalin?label=Follow @mironcatalin&color=black" alt="Follow Miron Catalin"></a>

React Native Stagger component, a cross-platform stagger orchestrator component, powered by Reanimated:

</div>

• 🔋 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

npm install @animatereactnative/stagger

Also, you need to install react-native-reanimated, and follow their installation instructions.

Usage

import { Stagger } from '@animatereactnative/stagger';

// ...

export function Example() {
  return (
    <Stagger
      stagger={50}
      duration={300}
      exitDirection={-1}
      entering={() => ZoomInEasyDown.springify()}
      exiting={() => FadeOutDown.springify()}
      style={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: 12,
      }}
    >
      <Paragraph>1. Custom duration</Paragraph>
      <Paragraph>2. Custom stagger</Paragraph>
      <Paragraph>3. Custom animation</Paragraph>
      <Paragraph>4. Custom enter/exit direction</Paragraph>
      <Heading>AnimateReactNative.com</Heading>
      <Heading>Powered by Reanimated 3</Heading>
      <Heading>Works with Expo ❤️</Heading>
    </Stagger>
  );
}

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 | NO | () => ComplexAnimationBuilder | FadeInDown | | exiting | Reanimated Exit animation | NO | () => ComplexAnimationBuilder | FadeOutDown | | style | View style to be applied to Marquee container. | NO | StyleProp<ViewStyle> | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

<p align="center"> <a href="https://www.animatereactnative.com"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://www.animatereactnative.com/animatereactnative_dark.svg"> <img alt="AnimateReactNative.com - Premium and Custom React Native animations." src="https://www.animatereactnative.com/animatereactnative_logo.svg" width="50%"> </picture> </a> </p>