From e48f5952b1a1e62ece7a4f28a8fd797e82e7917f Mon Sep 17 00:00:00 2001
From: grnsmn <simoneguarnuccio@gmail.com>
Date: Wed, 5 Apr 2023 09:00:14 +0200
Subject: [PATCH 1/2] feat: added RN animated loop on Transitions component

---
 src/components/composites/Transitions/Transition.tsx | 12 +++++++++---
 src/components/composites/Transitions/types.tsx      |  4 ++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/composites/Transitions/Transition.tsx b/src/components/composites/Transitions/Transition.tsx
index 1543ddcd06..509ebace11 100644
--- a/src/components/composites/Transitions/Transition.tsx
+++ b/src/components/composites/Transitions/Transition.tsx
@@ -74,6 +74,7 @@ export const Transition = forwardRef(
       exit,
       style,
       as,
+      loop,
       ...rest
     }: ITransitionProps,
     ref: any
@@ -105,8 +106,7 @@ export const Transition = forwardRef(
         const startAnimation = animationState === 'entering' ? 1 : 0;
 
         const transition = startAnimation ? entryTransition : exitTransition;
-
-        Animated.sequence([
+        let animation = Animated.sequence([
           // @ts-ignore - delay is present in defaultTransitionConfig
           Animated.delay(transition.delay),
           Animated[transition.type ?? 'timing'](animateValue, {
@@ -114,7 +114,13 @@ export const Transition = forwardRef(
             useNativeDriver: true,
             ...transition,
           }),
-        ]).start(() => {
+        ]);
+
+        if (loop) {
+          animation = Animated.loop(animation);
+        }
+
+        animation.start(() => {
           if (animationState === 'entering') {
             setAnimationState('entered');
           } else if (animationState === 'exiting') {
diff --git a/src/components/composites/Transitions/types.tsx b/src/components/composites/Transitions/types.tsx
index e700912c94..88cf4909a3 100644
--- a/src/components/composites/Transitions/types.tsx
+++ b/src/components/composites/Transitions/types.tsx
@@ -93,6 +93,10 @@ export interface ITransitionProps extends ViewProps {
    * Determines whether to start the animation
    */
   visible?: boolean;
+  /**
+   * Loops a given animation continuously
+   */
+  loop?: boolean;
 
   animationExited?: boolean;
   children?: any;

From 29716cdda4ba1022a22b6d96b6f70f4d773c489d Mon Sep 17 00:00:00 2001
From: grnsmn <simoneguarnuccio@gmail.com>
Date: Wed, 5 Apr 2023 09:22:16 +0200
Subject: [PATCH 2/2] feat: added story opn example folder to show loop
 animation

---
 .../composites/Transitions/Loop.tsx           | 31 +++++++++++++++++++
 .../composites/Transitions/index.tsx          |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 example/storybook/stories/components/composites/Transitions/Loop.tsx

diff --git a/example/storybook/stories/components/composites/Transitions/Loop.tsx b/example/storybook/stories/components/composites/Transitions/Loop.tsx
new file mode 100644
index 0000000000..d06fa36582
--- /dev/null
+++ b/example/storybook/stories/components/composites/Transitions/Loop.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, Center, PresenceTransition } from 'native-base';
+
+export const Example = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Center>
+      <Button onPress={() => setIsOpen(!isOpen)} mb={20}>
+        {isOpen ? 'Hide' : 'Show'}
+      </Button>
+      <PresenceTransition
+        visible={isOpen}
+        initial={{ rotate: '0deg' }}
+        animate={{ rotate: '180deg', transition: { duration: 250 } }}
+        loop
+      >
+        <Center
+          mt="7"
+          bg="teal.500"
+          rounded="md"
+          w="200"
+          h="100"
+          _text={{ color: 'white' }}
+        >
+          Fade
+        </Center>
+      </PresenceTransition>
+    </Center>
+  );
+};
diff --git a/example/storybook/stories/components/composites/Transitions/index.tsx b/example/storybook/stories/components/composites/Transitions/index.tsx
index 5a55156cf3..d390def7f5 100644
--- a/example/storybook/stories/components/composites/Transitions/index.tsx
+++ b/example/storybook/stories/components/composites/Transitions/index.tsx
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react-native';
 import { withKnobs } from '@storybook/addon-knobs';
 import Wrapper from './../../Wrapper';
 import { Example as Fade } from './Fade';
+import { Example as Loop } from './Loop';
 import { Example as ScaleFade } from './ScaleFade';
 import { Example as Slide } from './Slide';
 import { Example as SlideWrapped } from './SlideWrapped';
@@ -14,6 +15,7 @@ storiesOf('Transitions', module)
   .addDecorator(withKnobs)
   .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
   .add('Fade', () => <Fade />)
+  .add('Loop', () => <Loop />)
   .add('ScaleFade', () => <ScaleFade />)
   .add('Slide', () => <Slide />)
   .add('Slide wrapped inside parent', () => <SlideWrapped />)