|
1 | | -<div align="center"> |
| 1 | +<div> |
2 | 2 | <h1>React Native Stagger</h1> |
3 | 3 |
|
4 | | - |
| 4 | +<img alt="AnimateReactNative.com - Premium and Custom React Native animations." src="./animatereactnative-stagger-preview.gif" align="right"/> |
5 | 5 |
|
6 | 6 | [](https://www.npmjs.org/package/@animatereactnative/stagger) [](https://expo.io/) [](https://www.npmjs.com/package/@animatereactnative/stagger) [](https://www.npmjs.com/package/@animatereactnative/stagger) <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> |
7 | 7 |
|
8 | | -</div> |
| 8 | +React Native Stagger component, a cross-platform stagger orchestrator component, powered by Reanimated: |
9 | 9 |
|
10 | | -React Native Stagger component, a cross-platform marquee component, powered by Reanimated: |
| 10 | +</div> |
11 | 11 |
|
12 | 12 | - 🔋 Powered by **Reanimated 3** Layout Animations |
13 | 13 | - 📱 Works with **Expo** |
@@ -48,18 +48,18 @@ export function Example() { |
48 | 48 |
|
49 | 49 | ## Props |
50 | 50 |
|
51 | | -| name | description | required | type | default | |
52 | | -| ---------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------- | ------- | ------------- | |
53 | | -| `children` | Any component that you'd like to apply infinite scrolling / marquee effect | YES | `React.ReactNode` | 1 | |
54 | | -| `stagger` | Stagger duration between elements | NO | `number` | 50 | |
55 | | -| `duration` | Enter/Exit animation duration | NO | `number` | 400 | |
56 | | -| `enterDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 | |
57 | | -| `exitDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 | |
58 | | -| `initialEnteringDelay` | Initial enter animation delay | NO | number | | 1 | |
59 | | -| `initialExistingDelay` | Initial exit animation delay | NO | number | | -1 | |
60 | | -| `enter` | [Reanimated Enter animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | | `FadeInDown` | |
61 | | -| `exiting` | [Reanimated Exit animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | | `FadeOutDown` | |
62 | | -| `style` | View style to be applied to Marquee container. | NO | `StyleProp<ViewStyle>` | | |
| 51 | +| name | description | required | type | default | |
| 52 | +| ---------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------- | ------------- | |
| 53 | +| `children` | Any component that you'd like to apply infinite scrolling / marquee effect | YES | `React.ReactNode` | 1 | |
| 54 | +| `stagger` | Stagger duration between elements | NO | `number` | 50 | |
| 55 | +| `duration` | Enter/Exit animation duration | NO | `number` | 400 | |
| 56 | +| `enterDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 | |
| 57 | +| `exitDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 | |
| 58 | +| `initialEnteringDelay` | Initial enter animation delay | NO | number | 1 | |
| 59 | +| `initialExistingDelay` | Initial exit animation delay | NO | number | -1 | |
| 60 | +| `enter` | [Reanimated Enter animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | `FadeInDown` | |
| 61 | +| `exiting` | [Reanimated Exit animation](https://www.reanimated3.com/docs/layout-animations/entering-exiting-animations) | NO | `() => ComplexAnimationBuilder` | `FadeOutDown` | |
| 62 | +| `style` | View style to be applied to Marquee container. | NO | `StyleProp<ViewStyle>` | | |
63 | 63 |
|
64 | 64 | ## Contributing |
65 | 65 |
|
|
0 commit comments