feat: transition & exitTransition can be shared/derived value

nandorojo · Aug 31, 2021 · 0c945b7 · 0c945b7
1 parent 9721cff
commit 0c945b7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/examples/with-expo/src/Moti.PressableTooltip.tsx b/examples/with-expo/src/Moti.PressableTooltip.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { MotiImage } from 'moti'
 import { MotiPressable, useMotiPressable } from '@motify/interactions'
+import { useDerivedValue } from 'react-native-reanimated'
 
 function Logo() {
   const state = useMotiPressable(
@@ -24,7 +25,7 @@ function Logo() {
       state={state}
       style={styles.logo}
       resizeMode="contain"
-      transition={{ type: 'timing' }}
+      transition={useDerivedValue(() => ({ type: 'timing' }), [])}
     />
   )
 }

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -149,9 +149,18 @@ export type MotiAnimationProp<Animate> = MotiProps<Animate>['animate']
 export type MotiFromProp<Animate> = MotiProps<Animate>['from']
 export type MotiExitProp<Animate> = MotiProps<Animate>['exit']
 
-export type MotiTransitionProp<
-  Animate = StyleValueWithReplacedTransforms<ImageStyle & TextStyle & ViewStyle>
-> = TransitionConfig & Partial<Record<keyof Animate, TransitionConfig>>
+type OrSharedValue<T> = T | Animated.SharedValue<T>
+
+type FallbackAnimateProp = StyleValueWithReplacedTransforms<
+  ImageStyle & TextStyle & ViewStyle
+>
+
+export type MotiTransition<Animate = FallbackAnimateProp> = TransitionConfig &
+  Partial<Record<keyof Animate, TransitionConfig>>
+
+export type MotiTransitionProp<Animate = FallbackAnimateProp> = OrSharedValue<
+  MotiTransition<Animate>
+>
 
 export interface MotiProps<
   // Style props of the component

diff --git a/packages/core/src/use-map-animate-to-style.ts b/packages/core/src/use-map-animate-to-style.ts
@@ -13,7 +13,12 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { PackageName } from './constants/package-name'
-import type { MotiProps, Transforms, TransitionConfig } from './types'
+import type {
+  MotiProps,
+  MotiTransition,
+  Transforms,
+  TransitionConfig,
+} from './types'
 
 const debug = (...args: any[]) => {
   'worklet'
@@ -59,7 +64,7 @@ const isTransform = (styleKey: string) => {
 
 function animationDelay<Animate>(
   key: string,
-  transition: MotiProps<Animate>['transition'],
+  transition: MotiTransition<Animate> | undefined,
   defaultDelay?: number
 ) {
   'worklet'
@@ -78,7 +83,7 @@ function animationDelay<Animate>(
 
 function animationConfig<Animate>(
   styleProp: string,
-  transition: MotiProps<Animate>['transition']
+  transition: MotiTransition<Animate> | undefined
 ) {
   'worklet'
 
@@ -207,13 +212,13 @@ export default function useMapAnimateToStyle<Animate>({
   animate,
   from = false,
   transition: transitionProp,
+  exitTransition: exitTransitionProp,
   delay: defaultDelay,
   state,
   stylePriority = 'animate',
   onDidAnimate,
   exit,
   animateInitialState = false,
-  exitTransition,
 }: MotiProps<Animate>) {
   const isMounted = useSharedValue(false)
   const [isPresent, safeToUnmount] = usePresence()
@@ -269,8 +274,21 @@ export default function useMapAnimateToStyle<Animate>({
       exitingStyleProps[key] = true
     })
 
-    let transition = transitionProp
-    if (isExiting && exitTransition) {
+    // allow shared values as transitions
+    let transition: MotiTransition<Animate> | undefined
+    if (transitionProp && 'value' in transitionProp) {
+      transition = transitionProp.value
+    } else {
+      transition = transitionProp
+    }
+    if (isExiting && exitTransitionProp) {
+      let exitTransition: MotiTransition<Animate> | undefined
+      if (exitTransitionProp && 'value' in exitTransitionProp) {
+        exitTransition = exitTransitionProp.value
+      } else {
+        exitTransition = exitTransitionProp
+      }
+
       transition = Object.assign({}, transition, exitTransition)
     }