fix: partially fix #185

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.Factory'
 // export { default } from './src/Moti.KeyPresence'
 // export { default } from './src/Moti.Transform'
 // export { default } from './src/Moti.Pressable'

examples/with-expo/src/Moti.Factory.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { MotiPressable } from 'moti/interactions'
+import { useSharedValue } from 'react-native-reanimated'
+import { MotiView } from 'moti'
+
+// @ts-expect-error internal
+global.shouldDebugMoti = false
+
+export default function Factory() {
+  const on = useSharedValue(true)
+  return (
+    <MotiPressable
+      containerStyle={{ flex: 1, backgroundColor: 'blue' }}
+      style={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}
+      animate={(interaction) => {
+        'worklet'
+
+        // console.log('[animate] pressable', interaction)
+
+        return {
+          // opacity: on.value ? 1 : 0,
+        }
+      }}
+    >
+      {(interaction) => (
+        <MotiView
+          animate={() => {
+            'worklet'
+            const { pressed } = interaction.value
+
+            console.log('[moti-pressable]', interaction.value)
+
+            return {
+              scale: pressed ? 0.7 : 1,
+            }
+          }}
+          style={{
+            height: 300,
+            width: 300,
+            borderRadius: 16,
+            backgroundColor: 'white',
+          }}
+        />
+      )}
+    </MotiPressable>
+  )
+}

examples/with-expo/tsconfig.json

@@ -2,18 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@motify/*": [
-        "../../packages/*/src"
-      ],
-      "moti": [
-        "../../packages/moti/src"
-      ]
+      "moti": ["../../packages/moti/src"]
     },
     "jsx": "react-native",
     "target": "esnext",
-    "lib": [
-      "esnext"
-    ],
+    "lib": ["esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "noEmit": true,

examples/with-next/tsconfig.json

@@ -4,7 +4,6 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
     "paths": {
-      "@motify/*": ["../../packages/*/src"],
       "moti": ["../../packages/moti/src"]
     },
     "allowJs": true,

packages/core/src/use-map-animate-to-style.ts

@@ -28,10 +28,16 @@ import type {
 
 const debug = (...args: any[]) => {
   'worklet'
+
+  // @ts-expect-error moti
+  if (!global.shouldDebugMoti) {
+    return
+  }
+
   if (args) {
     // hi
   }
-  // console.log('[moti]', ...args)
+  console.log('[moti]', ...args)
 }
 
 const isColor = (styleKey: string) => {
@@ -136,7 +142,7 @@ function animationConfig<Animate>(
     repeatReverse = transition.repeatReverse
   }
 
-  debug({ loop, key, repeatCount, animationType })
+  // debug({ loop, key, repeatCount, animationType })
 
   let config = {}
   // so sad, but fix it later :(
@@ -264,15 +270,16 @@ export function useMotify<Animate>({
 
     let animateStyle: Animate
 
-    if (animateProp && 'value' in animateProp) {
+    if (typeof animateProp == 'function') {
+      animateStyle = (animateProp() || {}) as Animate
+    } else if (animateProp && 'value' in animateProp) {
       animateStyle = (animateProp.value || {}) as Animate
     } else {
-      if (typeof animateProp == 'function') {
-        animateStyle = animateProp() as Animate
-      }
       animateStyle = (animateProp || {}) as Animate
     }
 
+    debug('style', animateStyle)
+
     const initialStyle = fromProp || {}
     let exitStyle = exitProp || {}
     if (typeof exitStyle === 'function') {