fix: spread -> assign

examples/with-expo/App.tsx

@@ -1,6 +1,7 @@
 // export { default } from './src/Drip.Presence'
 // export { default } from './src/Moti.ExitBeforeEnter'
 // export { default } from './src/Moti.Loop'
-export { default } from './src/Moti.Skeleton'
+// export { default } from './src/Moti.Skeleton'
+export { default } from './src/Moti.Sequence'
 // export { default } from './src/Moti.HelloWorld'
 // export { default } from './src/Moti.Variants'

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

@@ -0,0 +1,51 @@
+import React, { useReducer } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { View } from 'moti'
+
+function Shape() {
+  return (
+    <View
+      from={{
+        opacity: 0,
+        scale: 0.5,
+      }}
+      animate={{
+        opacity: [1, 0, 1],
+        scale: [1, 2, 1],
+      }}
+      transition={{
+        type: 'timing',
+      }}
+      delay={300}
+      style={styles.shape}
+    />
+  )
+}
+
+export default function HelloWorld() {
+  const [visible, toggle] = useReducer((s) => !s, true)
+
+  return (
+    <Pressable onPress={toggle} style={styles.container}>
+      {visible && <Shape />}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  shape: {
+    justifyContent: 'center',
+    height: 250,
+    width: 250,
+    borderRadius: 25,
+    marginRight: 10,
+    backgroundColor: 'black',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#9c1aff',
+  },
+})

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

@@ -211,7 +211,7 @@ export default function useMapAnimateToStyle<Animate>({
   transition,
   delay: defaultDelay,
   state,
-  stylePriority = 'state',
+  stylePriority = 'animate',
   onDidAnimate,
   exit,
 }: MotiProps<Animate>) {
@@ -254,9 +254,9 @@ export default function useMapAnimateToStyle<Animate>({
 
     let mergedStyles: Animate = {} as Animate
     if (stylePriority === 'state') {
-      mergedStyles = { ...animateStyle, ...variantStyle }
+      mergedStyles = Object.assign({}, animateStyle, variantStyle)
     } else {
-      mergedStyles = { ...variantStyle, ...animateStyle }
+      mergedStyles = Object.assign(variantStyle, animateStyle)
     }
 
     if (isExiting && exitStyle) {
@@ -360,7 +360,8 @@ export default function useMapAnimateToStyle<Animate>({
           .map((step) => {
             let stepDelay = delayMs
             let stepValue = step
-            let stepConfig = { ...config }
+            // let stepConfig = { ...config }
+            let stepConfig = Object.assign({}, config)
             let stepAnimation = animation
             if (typeof step === 'object') {
               // TODO this should spread from step, but reanimated won't allow this on JS thread?
@@ -375,10 +376,9 @@ export default function useMapAnimateToStyle<Animate>({
                 animation,
               } = animationConfig(key, transition)
 
-              stepConfig = {
-                ...stepConfig,
-                //  ...customConfig
-              }
+              stepConfig = Object.assign({}, stepConfig)
+              // TODO test, does this work?
+              // stepConfig = Object.assign({}, stepConfig, customConfig)
               stepAnimation = animation
               if (delay != null) {
                 stepDelay = delay