fix: Add loop animation support to PresenceTransition

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>
+  );
+};

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 />)

src/components/composites/Transitions/Transition.tsx

@@ -74,6 +74,7 @@ export const Transition = forwardRef(
       exit,
       style,
       as,
+      loop,
       ...rest
     }: ITransitionProps,
     ref: any
@@ -105,16 +106,21 @@ 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, {
             toValue: startAnimation,
             useNativeDriver: true,
             ...transition,
           }),
-        ]).start(() => {
+        ]);
+
+        if (loop) {
+          animation = Animated.loop(animation);
+        }
+
+        animation.start(() => {
           if (animationState === 'entering') {
             setAnimationState('entered');
           } else if (animationState === 'exiting') {

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;