From 93c9eca7cad722433daaeb05c5b376a2cda16807 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Mon, 27 Mar 2023 12:26:11 -0400
Subject: [PATCH] callback type fixes

---
 examples/with-expo/src/Moti.Callbacks.tsx | 42 +++++++++++++++++++++++
 examples/with-expo/tsconfig.json          |  1 +
 packages/moti/src/core/types.ts           | 16 +++++----
 3 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 examples/with-expo/src/Moti.Callbacks.tsx

diff --git a/examples/with-expo/src/Moti.Callbacks.tsx b/examples/with-expo/src/Moti.Callbacks.tsx
new file mode 100644
index 0000000..b5b873a
--- /dev/null
+++ b/examples/with-expo/src/Moti.Callbacks.tsx
@@ -0,0 +1,42 @@
+import React, { useReducer } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { MotiView } from 'moti'
+
+export default function HelloWorld() {
+  const [visible, toggle] = useReducer((s) => !s, true)
+
+  return (
+    <Pressable onPress={toggle} style={styles.container}>
+      <MotiView
+        animate={{
+          opacity: {
+            value: visible ? 1 : 0,
+            onDidAnimate(finished, maybeValue, { attemptedValue }) {
+              console.log('[onDidAnimate] finished:', finished)
+              console.log('[onDidAnimate] maybeValue:', maybeValue)
+              console.log('[onDidAnimate] attemptedValue:', attemptedValue)
+            },
+          },
+        }}
+      />
+    </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/examples/with-expo/tsconfig.json b/examples/with-expo/tsconfig.json
index 88a2f18..ff76d26 100644
--- a/examples/with-expo/tsconfig.json
+++ b/examples/with-expo/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "moti": ["../../packages/moti/src"],
       "moti$": ["../../packages/moti/src"],
       "moti/svg": ["../../packages/moti/src/svg"]
     },
diff --git a/packages/moti/src/core/types.ts b/packages/moti/src/core/types.ts
index 06aa75c..fd0a9fb 100644
--- a/packages/moti/src/core/types.ts
+++ b/packages/moti/src/core/types.ts
@@ -109,7 +109,7 @@ export type StyleValueWithSequenceArraysWithoutTransform<
   [key in KeyWithoutTransform]:
     | T[KeyWithoutTransform] // either the value
     // or an array of values for a sequence
-    | SequenceItem<T[KeyWithoutTransform]>[]
+    | SequenceItem<T[ExcludeArrayType<ExcludeObject<KeyWithoutTransform>>]>[]
 }
 
 export type StyleValueWithSequenceArraysWithTransform = {
@@ -252,11 +252,14 @@ export type InlineOnDidAnimate<Value> = (
   }
 ) => void
 
-type StyleValueWithCallbacks<Animate = FallbackAnimateProp> = {
+type ExcludeArrayType<T> = T extends (infer U)[] ? never : T
+type ExcludeObject<T> = T extends object ? never : T
+
+type StyleValueWithCallbacks<Animate> = {
   [Key in keyof Animate]?:
     | Animate[Key]
     | {
-        value: Animate[Key]
+        value: ExcludeObject<ExcludeArrayType<Animate[Key]>>
         onDidAnimate: InlineOnDidAnimate<Animate[Key]>
       }
 }
@@ -267,12 +270,11 @@ export interface MotiProps<
   // in component usage, it will extract these from the style prop ideally
   AnimateType = ImageStyle & TextStyle & ViewStyle,
   // edit the style props to remove transform array, flattening it
-  // AnimateWithTransitions = Omit<AnimateType, 'transform'> & Partial<Transforms>,
   AnimateWithTransforms = StyleValueWithReplacedTransforms<AnimateType>,
   // allow the style values to be callbacks with configs
-  AnimateWithCallbacks = StyleValueWithCallbacks<AnimateWithTransforms>,
   // allow the style values to be arrays for sequences, where values are primitives or objects with configs
-  Animate = StyleValueWithSequenceArrays<AnimateWithCallbacks>
+  AnimateWithSequences = StyleValueWithSequenceArrays<AnimateWithTransforms>,
+  Animate = StyleValueWithCallbacks<AnimateWithSequences>
 > {
   // we want the "value" returned to not include the style arrays here, so we use AnimateWithTransitions
   /**
@@ -293,7 +295,7 @@ export interface MotiProps<
    *
    * @worklet
    */
-  animate?: OrDerivedValue<Animate> | (() => Animate)
+  animate?: OrDerivedValue<Animate>
   /**
    * (Optional) specify styles which the component should animate from.
    *