fix: closes #104, where exit completion never fired

nandorojo · Sep 1, 2021 · da4eafa · da4eafa
1 parent aa8c953
commit da4eafa
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 4 deletions.
diff --git a/examples/with-expo/App.tsx b/examples/with-expo/App.tsx
@@ -3,7 +3,8 @@
 // export { default } from './src/Moti.Loop'
 // export { default } from './src/Moti.Skeleton'
 // export { default } from './src/Moti.Gallery'
-export { default } from './src/Moti.Sequence'
+// export { default } from './src/Moti.Sequence'
+export { default } from './src/Moti.KeyPresence'
 // export { default } from './src/Moti.Presence'
 // export { default } from './src/Headless-Exit'
 // export { default } from './src/Moti.Progress'

diff --git a/examples/with-expo/src/Moti.KeyPresence.tsx b/examples/with-expo/src/Moti.KeyPresence.tsx
@@ -0,0 +1,76 @@
+import React, { useReducer } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { View, AnimatePresence } from 'moti'
+
+function Shape() {
+  return (
+    <View
+      from={{
+        opacity: 0,
+        scale: 0.9,
+      }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+      }}
+      exit={{
+        opacity: 0,
+        scale: 0.9,
+      }}
+      exitTransition={{
+        type: 'timing',
+        duration: 2500,
+      }}
+      style={styles.shape}
+    />
+  )
+}
+
+export default function Presence() {
+  const [key, increment] = useReducer((state) => state + 1, 0)
+
+  return (
+    <Pressable onPress={increment} style={styles.container}>
+      <AnimatePresence exitBeforeEnter>
+        <View
+          from={{
+            opacity: 0,
+            scale: 0.9,
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0.9,
+          }}
+          exitTransition={{
+            type: 'timing',
+            duration: 100,
+          }}
+          key={key}
+          style={styles.shape}
+        />
+      </AnimatePresence>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  shape: {
+    justifyContent: 'center',
+    height: 250,
+    width: 250,
+    borderRadius: 25,
+    marginRight: 10,
+    backgroundColor: 'white',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#9c1aff',
+  },
+})
diff --git a/packages/core/src/use-map-animate-to-style.ts b/packages/core/src/use-map-animate-to-style.ts
@@ -229,7 +229,10 @@ export default function useMapAnimateToStyle<Animate>({
 
   const reanimatedSafeToUnmount = useRef(() => {
     safeToUnmount?.()
-  }).current
+  })
+  useEffect(function updateSafeToUnmount() {
+    reanimatedSafeToUnmount.current = () => safeToUnmount?.()
+  })
 
   const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
     (...args) => {
@@ -339,7 +342,7 @@ export default function useMapAnimateToStyle<Animate>({
           )
           // if this is true, then we've finished our exit animations
           if (!areStylesExiting) {
-            runOnJS(reanimatedSafeToUnmount)()
+            runOnJS(reanimatedSafeToUnmount.current)()
           }
         }
       }
@@ -507,7 +510,7 @@ export default function useMapAnimateToStyle<Animate>({
   useEffect(
     function allowUnMountIfMissingExit() {
       if (!isPresent && !hasExitStyle) {
-        reanimatedSafeToUnmount()
+        reanimatedSafeToUnmount.current()
       }
     },
     [hasExitStyle, isPresent, reanimatedSafeToUnmount]