chore: upgrade to expo 44, reanimated 2.3, RNGH v2

docs/package.json

@@ -16,8 +16,8 @@
     "@docusaurus/preset-classic": "2.0.0-alpha.70",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "browserslist": {
     "production": [

examples/with-expo/App.tsx

@@ -7,10 +7,10 @@
 // export { default } from './src/Moti.KeyPresence'
 // export { default } from './src/Moti.Transform'
 // export { default } from './src/Moti.Pressable'
-export { default } from './src/Moti.PressableMenu'
+// export { default } from './src/Moti.PressableMenu'
 // export { default } from './src/Moti.SequenceLoop'
 // export { default } from './src/Moti.Presence'
 // export { default } from './src/Headless-Exit'
 // export { default } from './src/Moti.Progress'
-// export { default } from './src/Moti.HelloWorld'
+export { default } from './src/Moti.HelloWorld'
 // export { default } from './src/Moti.Variants'

examples/with-expo/package.json

@@ -16,27 +16,25 @@
     "@motify/interactions": "^0.16.1",
     "@motify/skeleton": "^0.16.1",
     "core-js": "^3",
-    "expo": "^41.0.0",
-    "expo-splash-screen": "~0.8.1",
-    "expo-status-bar": "~1.0.3",
+    "expo": "^44.0.0-beta.2",
+    "expo-splash-screen": "~0.14.0",
+    "expo-status-bar": "~1.2.0",
     "lodash.set": "^4.3.2",
     "moti": "^0.16.1",
-    "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.2.0",
-    "react-native-unimodules": "~0.13.3",
-    "react-native-web": "0.15.3",
-    "react-navigation-stack": "^2.8.4",
-    "react-spring": "^8.0.27"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-unimodules": "~0.15.0",
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
     "@babel/core": "~7.12.10",
     "@babel/runtime": "^7.9.6",
     "@types/lodash.set": "^4.3.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0"
+    "babel-preset-expo": "9.0.1"
   }
 }

examples/with-next/package.json

@@ -10,7 +10,7 @@
     "raf": "^3.4.1",
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
-    "react-native": "~0.63.4",
+    "react-native": "0.63.4",
     "react-native-reanimated": "~2.2.0",
     "react-native-unimodules": "~0.9.0",
     "react-native-web": "0.15.3"

package.json

@@ -28,9 +28,9 @@
     "prepare": "lerna run prepare"
   },
   "resolutions": {
-    "react": "~16.13.1",
-    "react-native": "~0.63.2",
-    "@types/react": "17.0.0"
+    "react": "17.0.1",
+    "react-native": "0.63.4",
+    "@types/react": "17.0.1"
   },
   "husky": {
     "hooks": {

packages/core/package.json

@@ -58,12 +58,12 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-native": "^0.63.30",
     "expo": "^40.0.0-beta.5",
-    "react": "~16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.17.0",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~2.2.0",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.0",
     "react-native-web": "0.15.3",
     "typescript": "^4.0.3"
   }

packages/core/src/types.ts

@@ -1,5 +1,10 @@
-// import type { UseAnimationState } from './use-animator/types'
-import type Animated from 'react-native-reanimated'
+import type {
+  SharedValue,
+  WithDecayConfig,
+  WithSpringConfig,
+  WithTimingConfig,
+  DerivedValue,
+} from 'react-native-reanimated'
 
 import type {
   PerpectiveTransform,
@@ -36,9 +41,9 @@ export type MotiTranformProps = Partial<Transforms> &
   Pick<ViewStyle, 'transform'>
 
 export type TransitionConfigWithoutRepeats = (
-  | ({ type?: 'spring' } & Animated.WithSpringConfig)
-  | ({ type: 'timing' } & Animated.WithTimingConfig)
-  | ({ type: 'decay' } & Animated.DecayConfig)
+  | ({ type?: 'spring' } & WithSpringConfig)
+  | ({ type: 'timing' } & WithTimingConfig)
+  | ({ type: 'decay' } & WithDecayConfig)
 ) & {
   delay?: number
 }
@@ -170,7 +175,7 @@ export type MotiAnimationProp<Animate> = MotiProps<Animate>['animate']
 export type MotiFromProp<Animate> = MotiProps<Animate>['from']
 export type MotiExitProp<Animate> = MotiProps<Animate>['exit']
 
-type OrSharedValue<T> = T | Animated.SharedValue<T>
+type OrSharedValue<T> = T | SharedValue<T>
 
 type FallbackAnimateProp = StyleValueWithReplacedTransforms<
   ImageStyle & TextStyle & ViewStyle
@@ -354,7 +359,7 @@ export type UseAnimationState<V> = {
    * @private
    * Internal state used to drive animations. You shouldn't use this. Use `.current` instead to read the current state. Use `transitionTo` to edit it.
    */
-  __state: Animated.SharedValue<any> | Animated.DerivedValue<any>
+  __state: SharedValue<any> | DerivedValue<any>
   /**
    * Transition to another state, as defined by this hook.
    *
@@ -420,7 +425,7 @@ export type UseDynamicAnimationState = {
    * @private
    * Internal state used to drive animations. You shouldn't use this. Use `.current` instead to read the current state. Use `animateTo` to edit it.
    */
-  __state: Animated.SharedValue<any>
+  __state: SharedValue<any>
   /**
    * Read the current "state" (i.e. style object)
    */

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

@@ -1,7 +1,7 @@
 import { PresenceContext, usePresence } from 'framer-motion'
 import { useCallback, useContext, useEffect } from 'react'
 import type { TransformsStyle } from 'react-native'
-import Animated, {
+import {
   useAnimatedStyle,
   useSharedValue,
   withDecay,
@@ -12,6 +12,11 @@ import Animated, {
   withSequence,
   runOnJS,
 } from 'react-native-reanimated'
+import type {
+  WithDecayConfig,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated'
 import { PackageName } from './constants/package-name'
 import type {
   MotiProps,
@@ -131,12 +136,12 @@ function animationConfig<Animate>(
 
   if (animationType === 'timing') {
     const duration =
-      ((transition as any)?.[key as keyof Animate] as Animated.WithTimingConfig)
-        ?.duration ?? (transition as Animated.WithTimingConfig)?.duration
+      ((transition as any)?.[key as keyof Animate] as WithTimingConfig)
+        ?.duration ?? (transition as WithTimingConfig)?.duration
 
     const easing =
-      ((transition as any)?.[key as keyof Animate] as Animated.WithTimingConfig)
-        ?.easing ?? (transition as Animated.WithTimingConfig)?.easing
+      ((transition as any)?.[key as keyof Animate] as WithTimingConfig)
+        ?.easing ?? (transition as WithTimingConfig)?.easing
 
     if (easing) {
       config['easing'] = easing
@@ -150,8 +155,8 @@ function animationConfig<Animate>(
     config = {
       // solve the missing velocity bug in 2.0.0-rc.0
       // velocity: 2,
-    } as Animated.WithSpringConfig
-    const configKeys: (keyof Animated.WithSpringConfig)[] = [
+    } as WithSpringConfig
+    const configKeys: (keyof WithSpringConfig)[] = [
       'damping',
       'mass',
       'overshootClamping',
@@ -177,7 +182,7 @@ function animationConfig<Animate>(
       velocity: 2,
       deceleration: 2,
     }
-    const configKeys: (keyof Animated.WithDecayConfig)[] = [
+    const configKeys: (keyof WithDecayConfig)[] = [
       'clamp',
       'velocity',
       'deceleration',

packages/interactions/src/pressable/pressable.tsx

@@ -179,11 +179,9 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
           hitSlop={hitSlop}
           disabled={disabled}
           onPress={onPress}
+          // @ts-expect-error incorrect ref types, lol
           ref={ref}
           onLayout={onContainerLayout}
-          // @ts-expect-error missing containerStyle type
-          // TODO there is an added View child here, which Pressable doesn't  have.
-          // should we wrap the pressable children too?
           containerStyle={containerStyle}
           // Accessibility props
           accessibilityActions={accessibilityActions}

packages/moti/src/interactions/pressable/pressable.tsx

@@ -179,11 +179,9 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
           hitSlop={hitSlop}
           disabled={disabled}
           onPress={onPress}
+          // @ts-expect-error incorrect ref type
           ref={ref}
           onLayout={onContainerLayout}
-          // @ts-expect-error missing containerStyle type
-          // TODO there is an added View child here, which Pressable doesn't  have.
-          // should we wrap the pressable children too?
           containerStyle={containerStyle}
           // Accessibility props
           accessibilityActions={accessibilityActions}