feat: upgrade reanimated, add custom sequence transitions!

nandorojo · Apr 21, 2021 · 8e64014 · 8e64014
1 parent b690558
commit 8e64014
Show file tree

Hide file tree

Showing 11 changed files with 920 additions and 159 deletions.
diff --git a/examples/with-expo/package.json b/examples/with-expo/package.json
@@ -14,19 +14,20 @@
   },
   "dependencies": {
     "@motify/skeleton": "^0.8.2",
-    "expo": "^40.0.0-beta.5",
+    "core-js": "^3",
+    "expo": "^41.0.0",
     "expo-splash-screen": "~0.8.1",
     "expo-status-bar": "~1.0.3",
     "framer-motion": "^3.2.1",
     "lodash.set": "^4.3.2",
-    "moti": "^0.4.1",
-    "react": "~16.13.1",
-    "react-dom": "^16.13.1",
+    "moti": "^0.8.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "2.0.0-rc.0",
-    "react-native-unimodules": "~0.12.0",
-    "react-native-web": "~0.14.9",
+    "react-native-reanimated": "~2.1.0",
+    "react-native-unimodules": "~0.13.3",
+    "react-native-web": "0.15.3",
     "react-navigation-stack": "^2.8.4",
     "react-spring": "^8.0.27"
   },

diff --git a/examples/with-expo/src/Moti.Sequence.tsx b/examples/with-expo/src/Moti.Sequence.tsx
@@ -1,49 +1,23 @@
 import React, { useReducer } from 'react'
 import { StyleSheet, Pressable } from 'react-native'
 import { View } from 'moti'
-import Animated, {
-  useAnimatedStyle,
-  withSequence,
-  withSpring,
-} from 'react-native-reanimated'
-
-function ShapeBug() {
-  const style = useAnimatedStyle(() => {
-    const makeSequence = (...values: number[]) => {
-      const sequence = values.map((value) => withSpring(value))
-      return withSequence(sequence[0], ...sequence.slice(1))
-    }
-
-    return {
-      transform: [
-        {
-          translateX: makeSequence(-100, 0, 100, 0),
-        },
-        {
-          translateY: makeSequence(0, -100, -100, 0),
-        },
-      ],
-    }
-  }, [])
-
-  return <Animated.View style={[styles.shape, style]} />
-}
 
 function Shape() {
   return (
     <View
-      // from={{
-      //   opacity: 0,
-      //   scale: 0.5,
-      // }}
       animate={{
-        translateY: [0, -100, -100, 0],
-        translateX: [-100, 0, 100, 0],
+        translateY: [
+          0,
+          {
+            value: 100,
+            type: 'timing',
+            delay: 600,
+            duration: 2500,
+          },
+          -100,
+          0,
+        ],
       }}
-      // transition={{
-      //   type: 'timing',
-      // }}
-      delay={300}
       style={styles.shape}
     />
   )
@@ -54,7 +28,7 @@ export default function HelloWorld() {
 
   return (
     <Pressable onPress={toggle} style={styles.container}>
-      {visible && <ShapeBug />}
+      {visible && <Shape />}
     </Pressable>
   )
 }

diff --git a/examples/with-expo/tsconfig.json b/examples/with-expo/tsconfig.json
@@ -2,18 +2,25 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@motify/*": ["../../packages/*/src"],
-      "moti": ["../../packages/moti/src"]
+      "@motify/*": [
+        "../../packages/*/src"
+      ],
+      "moti": [
+        "../../packages/moti/src"
+      ]
     },
     "jsx": "react-native",
     "target": "esnext",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "moduleResolution": "node"
-  }
+  },
+  "extends": "expo/tsconfig.base"
 }
diff --git a/examples/with-next/package.json b/examples/with-next/package.json
@@ -11,7 +11,7 @@
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
     "react-native": "~0.63.4",
-    "react-native-reanimated": "2.0.0-rc.0",
+    "react-native-reanimated": "~2.1.0",
     "react-native-unimodules": "~0.9.0",
     "react-native-web": "~0.14.9"
   },

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -63,7 +63,7 @@
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "2.0.0-rc.0",
+    "react-native-reanimated": "~2.1.0",
     "react-native-web": "~0.14.9",
     "typescript": "^4.0.3"
   }

diff --git a/packages/core/src/motify.tsx b/packages/core/src/motify.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, forwardRef } from 'react'
+import React, { forwardRef, ComponentType, FunctionComponent } from 'react'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { MotiProps } from './types'
 import useMapAnimateToStyle from './use-map-animate-to-style'
@@ -10,24 +10,24 @@ export default function motify<
   Props extends { style?: Style },
   Ref,
   ExtraProps,
-  // Variants,
-  // Animate = ViewStyle & TextStyle
   Animate = ViewStyle | ImageStyle | TextStyle
 >(ComponentWithoutAnimation: ComponentType<Props>) {
-  const Component = Animated.createAnimatedComponent(ComponentWithoutAnimation)
+  const Component = Animated.createAnimatedComponent(
+    ComponentWithoutAnimation as FunctionComponent<Props>
+  )
 
   const withAnimations = () =>
     //  we might use these later
     // outerProps?: ExtraProps
     {
-      const withStyles = forwardRef<
+      const Motified = forwardRef<
         Ref,
         Props &
           MotiProps<Animate> &
           ExtraProps & {
             children?: React.ReactNode
           }
-      >(function Wrapped(
+      >(function Moti(
         {
           animate,
           style,
@@ -57,14 +57,14 @@ export default function motify<
 
         return (
           <Component
-            {...(props as Props)}
+            {...(props as any)} // TODO
             style={[style, animated.style]}
-            ref={ref}
+            ref={ref as any} // TODO
           />
         )
       })
 
-      return withStyles
+      return Motified
     }
 
   return withAnimations

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -32,12 +32,15 @@ export type Transforms = PerpectiveTransform &
   SkewXTransform &
   SkewYTransform
 
-export type TransitionConfig = (
+export type TransitionConfigWithoutRepeats = (
   | ({ type?: 'spring' } & Animated.WithSpringConfig)
   | ({ type: 'timing' } & Animated.WithTimingConfig)
   | ({ type: 'decay' } & Animated.DecayConfig)
 ) & {
   delay?: number
+}
+
+export type TransitionConfig = TransitionConfigWithoutRepeats & {
   /**
    * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.
    *
@@ -70,8 +73,6 @@ export type TransitionConfig = (
   repeatReverse?: boolean
 }
 
-type SmartOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
-
 /**
  * Allow { scale: 1 }
  *
@@ -93,7 +94,7 @@ export type StyleValueWithSequenceArrays<T> = {
             value: T[keyof T]
             // withSequence does not support withRepeat!
             // let people pass any config, minus repetitions
-          } & SmartOmit<TransitionConfig, 'repeat' | 'repeatReverse' | 'loop'>)
+          } & TransitionConfigWithoutRepeats)
       )[]
 }
 

diff --git a/packages/core/src/use-animator/index.ts b/packages/core/src/use-animator/index.ts
@@ -136,8 +136,7 @@ export default function useAnimationState<V extends Variants<V>>(
 ) {
   const controller = useRef<UseAnimationState<V>>()
   const __state = useSharedValue<InternalControllerState<V>>(
-    from ? _variants[from] : 0,
-    false // don't rebuild it
+    from ? _variants[from] : 0
   )
 
   const selectedVariant = useRef(from)

diff --git a/packages/core/src/use-dynamic-animation/index.ts b/packages/core/src/use-dynamic-animation/index.ts
@@ -46,10 +46,7 @@ export default function useDynamicAnimation(
     activeStyle.current.value = initialState()
   }
 
-  const __state = useSharedValue(
-    activeStyle.current.value,
-    false // don't rebuild it (for older versions)
-  )
+  const __state = useSharedValue(activeStyle.current.value)
 
   const controller = useRef<UseDynamicAnimationState>()
 

diff --git a/packages/core/src/use-map-animate-to-style.ts b/packages/core/src/use-map-animate-to-style.ts
@@ -221,7 +221,7 @@ export default function useMapAnimateToStyle<Animate>({
   exit,
   animateInitialState = false,
 }: MotiProps<Animate>) {
-  const isMounted = useSharedValue(false, false)
+  const isMounted = useSharedValue(false)
   const [isPresent, safeToUnmount] = usePresence()
 
   const reanimatedSafeToUnmount = useCallback(() => {
@@ -391,20 +391,23 @@ export default function useMapAnimateToStyle<Animate>({
             if (typeof step === 'object') {
               // TODO this should spread from step, but reanimated won't allow this on JS thread?
               // const { delay, value, ...transition } = step
-              const transition = step
-              const { delay, value } = step
+              const transition = Object.assign({}, step)
+
+              delete transition.delay
+              delete transition.value
 
               const {
                 // TODO merge stepConfig = {...stepConfig, customConfig} when reanimated lets us...
                 // as of now, it says multiple threads are interacting, IDK
-                // config: customConfig,
+                config: customConfig,
                 animation,
               } = animationConfig(key, transition)
 
-              stepConfig = Object.assign({}, stepConfig)
               // TODO test, does this work?
-              // stepConfig = Object.assign({}, stepConfig, customConfig)
+              stepConfig = Object.assign({}, stepConfig, customConfig)
               stepAnimation = animation
+
+              const { delay, value } = step
               if (delay != null) {
                 stepDelay = delay
               }