Merge pull request #2 from OsamaAburabie/enabled-prop

feat: add enabled prop in StaggerProps
animate-react-native · Feb 12, 2024 · 83ae6ba · 83ae6ba
2 parents 2edd978 + 104771c
commit 83ae6ba
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -63,6 +63,7 @@ export function Example() {
 | 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             |

diff --git a/src/index.tsx b/src/index.tsx
@@ -15,6 +15,10 @@ import Animated, {
 } from 'react-native-reanimated';
 
 export type StaggerProps = React.PropsWithChildren<{
+  enabled?: boolean;
+  /**
+   * to enable or disable the stagger animation
+   */
   stagger?: number;
   /**
    * The direction of the enter animation.
@@ -72,6 +76,7 @@ export type StaggerProps = React.PropsWithChildren<{
 }>;
 export function Stagger({
   children,
+  enabled = true,
   stagger = 50,
   enterDirection = 1,
   exitDirection = -1,
@@ -88,6 +93,10 @@ export function Stagger({
     return null;
   }
 
+  if (!enabled) {
+    return <Animated.View style={style}>{children}</Animated.View>;
+  }
+
   return (
     <Animated.View style={style} layout={Layout}>
       {React.Children.map(children, (child, index) => {
@@ -142,4 +151,4 @@ export function Stagger({
       })}
     </Animated.View>
   );
-}
+}