From d5febf2329a552a33295930312ed63f05a8a762b Mon Sep 17 00:00:00 2001
From: Charles Mangwa <charles@colorfy.me>
Date: Fri, 4 Aug 2023 13:50:56 +0200
Subject: [PATCH] fix: prevent animations callback from being run only
 episodically

This issue was caused by a misuse of the `finished` value provided to `Animated.some_method().start()`'s callback: it simply indicates if an animation was run without interruption. It's it not a value that indicates if the animation is done being run and a callback can now be called.
As explain in the docs, simply providing a callback is actually enough, there was no need to check for `finished` truthiness; and in our case, that was actually causing bugs.

See: https://reactnative.dev/docs/animated#working-with-animations.

Fixes #120
---
 example/src/App.tsx    |  7 +++++--
 src/lib/ModalStack.tsx | 10 ++++------
 src/lib/StackItem.tsx  | 16 ++++++----------
 src/types.ts           |  8 ++------
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 5168660..d521be6 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -6,9 +6,12 @@ import DemoModal from './components/DemoModal'
 import IntroModal from './components/IntroModal'
 import IntroButton from './components/IntroButton'
 
-interface Modal<N, C extends 'lightsalmon' | 'deepskyblue' | 'deeppink'> {
+interface Modal<N, C> {
   origin: 'Hooks' | 'Class' | 'Plain JS'
-  color: C
+  color: C | 'darkgreen'
+  // 👆 Comment this one and uncomment that one 👇 to remove all the TypeScript errors
+  // color: 'lightsalmon' | 'deepskyblue' | 'deeppink' | 'darkgreen'
+  // Note: the TS errors were left voluntarily to showcase the type inference & autocomplete possibilities
   name: N
 }
 
diff --git a/src/lib/ModalStack.tsx b/src/lib/ModalStack.tsx
index 35bee73..6eb20bb 100644
--- a/src/lib/ModalStack.tsx
+++ b/src/lib/ModalStack.tsx
@@ -44,12 +44,10 @@ const ModalStack = <P extends ModalfyParams>(props: Props<P>) => {
         easing: Easing.inOut(Easing.ease),
         duration: backdropAnimationDuration,
         useNativeDriver: true,
-      }).start(({ finished }) => {
-        if (finished) {
-          setStackStatus('hidden')
-          setBackdropClosedItems([])
-          translateY.setValue(sh(100))
-        }
+      }).start(() => {
+        setStackStatus('hidden')
+        setBackdropClosedItems([])
+        translateY.setValue(sh(100))
       })
     }
   }, [backdropAnimationDuration, opacity, translateY, stackStatus])
diff --git a/src/lib/StackItem.tsx b/src/lib/StackItem.tsx
index 8106464..b690470 100644
--- a/src/lib/StackItem.tsx
+++ b/src/lib/StackItem.tsx
@@ -129,11 +129,9 @@ const StackItem = <P extends ModalfyParams>({
           toValue,
           useNativeDriver: true,
           ...(closeModalCallback ? animateOutConfig : animateInConfig),
-        }).start(({ finished }) => {
-          if (finished) {
-            closeModalCallback?.(stackItem)
-            modalStackItemCallback?.()
-          }
+        }).start(() => {
+          closeModalCallback?.(stackItem)
+          modalStackItemCallback?.()
         })
       }
     },
@@ -203,11 +201,9 @@ const StackItem = <P extends ModalfyParams>({
           toValue,
           useNativeDriver: true,
           ...animateOutConfig,
-        }).start(({ finished }) => {
-          if (finished) {
-            onCloseListener.current({ type: 'closeModal', origin: 'fling' })
-            closeModal(stackItem)
-          }
+        }).start(() => {
+          onCloseListener.current({ type: 'closeModal', origin: 'fling' })
+          closeModal(stackItem)
         })
       }
     },
diff --git a/src/types.ts b/src/types.ts
index fc14d7d..5c35f5c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -269,9 +269,7 @@ export interface ModalOptions {
    *       easing: Easing.inOut(Easing.exp),
    *       useNativeDriver: true,
    *     }),
-   *   ]).start(({ finished }) => {
-   *     if (finished) callback?.()
-   *   })
+   *   ]).start() => callback?.())
    * }
    * @see [API reference](https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modaloptions#animationin).
    */
@@ -314,9 +312,7 @@ export interface ModalOptions {
    *       easing: Easing.inOut(Easing.exp),
    *       useNativeDriver: true,
    *     }),
-   *   ]).start(({ finished }) => {
-   *     if (finished) callback()
-   *   })
+   *   ]).start(() => callback())
    * }
    * @see [API reference](https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modaloptions#animationout).
    */