fix: transform errors from #85, #83, #76, #65

nandorojo · Sep 1, 2021 · fef3ad0 · fef3ad0
1 parent 7fafc30
commit fef3ad0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 41 deletions.
diff --git a/examples/with-expo/App.tsx b/examples/with-expo/App.tsx
@@ -3,8 +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.Presence'
+export { default } from './src/Moti.Sequence'
+// export { default } from './src/Moti.Presence'
 // export { default } from './src/Headless-Exit'
 // export { default } from './src/Moti.Progress'
 // export { default } from './src/Moti.HelloWorld'

diff --git a/examples/with-expo/src/Moti.Sequence.tsx b/examples/with-expo/src/Moti.Sequence.tsx
@@ -5,7 +5,13 @@ import { View } from 'moti'
 function Shape() {
   return (
     <View
+      from={{
+        opacity: 0,
+        translateX: -100,
+        translateY: -100,
+      }}
       animate={{
+        opacity: 1,
         translateY: [
           0,
           {
@@ -17,6 +23,17 @@ function Shape() {
           -100,
           0,
         ],
+        translateX: [
+          0,
+          {
+            value: 100,
+            type: 'timing',
+            delay: 600,
+            duration: 2500,
+          },
+          -100,
+          0,
+        ],
       }}
       style={styles.shape}
     />

diff --git a/packages/core/src/use-map-animate-to-style.ts b/packages/core/src/use-map-animate-to-style.ts
@@ -205,14 +205,14 @@ function animationConfig<Animate>(
 }
 
 export default function useMapAnimateToStyle<Animate>({
-  animate,
-  from = false,
+  animate: animateProp,
+  from: fromProp = false,
   transition: transitionProp,
   delay: defaultDelay,
   state,
   stylePriority = 'animate',
   onDidAnimate,
-  exit,
+  exit: exitProp,
   animateInitialState = false,
   exitTransition,
 }: MotiProps<Animate>) {
@@ -235,23 +235,31 @@ export default function useMapAnimateToStyle<Animate>({
     [onDidAnimate]
   )
 
+  const animate = useDerivedValue(() => animateProp || {}, [animateProp])
+  const exit = useDerivedValue(() => exitProp || {}, [exitProp])
+  const from = useDerivedValue(() => fromProp || {}, [fromProp])
+
+  const hasExitStyle = !!(
+    typeof exitProp === 'function' ||
+    (typeof exitProp === 'object' &&
+      exitProp &&
+      Object.keys(exitProp).length > 0)
+  )
+
   const style = useAnimatedStyle(() => {
     const final = {
       // initializing here fixes reanimated object.__defineProperty bug(?)
       transform: [] as TransformsStyle['transform'],
     }
     const variantStyle: Animate = state?.__state?.value || {}
 
-    const animateStyle = animate || {}
-    const initialStyle = from || {}
-    let exitStyle = exit || {}
+    const animateStyle = animate.value
+    const initialStyle = from.value
+    let exitStyle = exit.value
     if (typeof exitStyle === 'function') {
       exitStyle = exitStyle(custom.value)
     }
 
-    const hasExitStyle =
-      typeof exitStyle === 'object' && !!Object.keys(exitStyle ?? {}).length
-
     const isExiting = !isPresent && hasExitStyle
 
     let mergedStyles: Animate = {} as Animate
@@ -324,30 +332,6 @@ export default function useMapAnimateToStyle<Animate>({
         }
       }
 
-      // if (initialValue != null) {
-      //   // if we haven't mounted, or if there's no other value to use besides the initial one, use it.
-      //   if (isMounted.value === false || value == null) {
-      //     if (isTransform(key) && final.transform) {
-      //       const transform = {} as Transforms
-      //       if (isMounted.value || animateInitialState) {
-      //         transform[key] = animation(initialValue, config)
-      //       } else {
-      //         transform[key] = initialValue
-      //       }
-
-      //       // final.transform.push({ [key]: initialValue }) does not work!
-      //       final.transform.push(transform)
-      //     } else {
-      //       if (isMounted.value || animateInitialState) {
-      //         final[key] = animation(initialValue, config)
-      //       } else {
-      //         final[key] = initialValue
-      //       }
-      //     }
-      //     return
-      //   }
-      // }
-
       let { delayMs } = animationDelay(key, transition, defaultDelay)
 
       if (isColor(key)) {
@@ -508,17 +492,13 @@ export default function useMapAnimateToStyle<Animate>({
     isMounted.value = true
   }, [isMounted])
 
-  const missingExit =
-    typeof exit === 'function' ||
-    (typeof exit === 'object' && exit && Object.keys(exit).length > 0)
-
   useEffect(
     function allowUnMountIfMissingExit() {
-      if (!isPresent && !missingExit) {
+      if (!isPresent && !hasExitStyle) {
         safeToUnmount?.()
       }
     },
-    [exit, missingExit, isPresent, safeToUnmount]
+    [exit, hasExitStyle, isPresent, safeToUnmount]
   )
 
   return {