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 (
+
+
+
+
+ Fade
+
+
+
+ );
+};
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) => {getStory()})
.add('Fade', () => )
+ .add('Loop', () => )
.add('ScaleFade', () => )
.add('Slide', () => )
.add('Slide wrapped inside parent', () => )
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;