Merge pull request #233 from nandorojo/transition

Configure `transition` per-variant

examples/with-expo/src/Easing.tsx

@@ -0,0 +1,2 @@
+import { Easing } from 'react-native'
+import * as Reanimated from 'react-native-reanimated'

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

@@ -0,0 +1,33 @@
+import { useAnimationState, useDynamicAnimation } from 'moti'
+import React from 'react'
+
+export function App() {
+  const state = useAnimationState({
+    from: {
+      transition: {
+        type: 'timing',
+      },
+    },
+  })
+  const state2 = useDynamicAnimation(() => ({
+    scale: 0.5,
+    transition: {
+      type: 'timing',
+    },
+  }))
+
+  const toggleTransition = () => {
+    state.transitionTo('from')
+  }
+
+  const animateTo = () => {
+    state2.animateTo({
+      opacity: 1,
+      transition: {
+        type: 'timing',
+      },
+    })
+  }
+
+  return <></>
+}

packages/moti/package.json

@@ -1,7 +1,7 @@
 {
   "name": "moti",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.20.0",
   "keywords": [
     "react-native",
     "ios",

packages/moti/src/core/types.ts

@@ -326,14 +326,15 @@ export type Variants<
   // 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 = StyleValueWithReplacedTransforms<AnimateType>,
+  AnimateWithTransformsAndTransition = StyleValueWithReplacedTransforms<AnimateType> &
+    WithTransition,
   // allow the style values to be arrays for sequences, where values are primitives or objects with configs
-  Animate = StyleValueWithSequenceArrays<AnimateWithTransitions>
+  Animate = StyleValueWithSequenceArrays<AnimateWithTransformsAndTransition>
 > = {
   [key in keyof V]?: Animate
 } & {
   to?: Animate
-  from?: AnimateWithTransitions
+  from?: AnimateWithTransformsAndTransition
 }
 
 export type UseAnimationState<V> = {
@@ -409,6 +410,10 @@ export type UseAnimationStateConfig<
   to?: ToKey
 }
 
+export type WithTransition = {
+  transition?: MotiTransition
+}
+
 /**
  * Used for `useDynamicAnimation`
  */
@@ -419,9 +424,10 @@ export type DynamicStyleProp<
   AnimateType = ImageStyle & ViewStyle & TextStyle,
   // edit the style props to remove transform array, flattening it
   // AnimateWithTransitions = Omit<AnimateType, 'transform'> & Partial<Transforms>,
-  AnimateWithTransitions = StyleValueWithReplacedTransforms<AnimateType>
+  AnimateWithTransforms = StyleValueWithReplacedTransforms<AnimateType>
   // allow the style values to be arrays for sequences, where values are primitives or objects with configs
-> = NonNullable<StyleValueWithSequenceArrays<AnimateWithTransitions>>
+> = NonNullable<StyleValueWithSequenceArrays<AnimateWithTransforms>> &
+  WithTransition
 
 export type UseDynamicAnimationState = {
   /**

packages/moti/src/core/use-motify.ts

@@ -17,13 +17,15 @@ import type {
   WithSpringConfig,
   WithTimingConfig,
 } from 'react-native-reanimated'
+
 import { PackageName } from './constants/package-name'
 import type {
   MotiProps,
   MotiTransition,
   SequenceItem,
   Transforms,
   TransitionConfig,
+  WithTransition,
 } from './types'
 
 const debug = (...args: any[]) => {
@@ -199,7 +201,6 @@ function animationConfig<Animate>(
       'velocityFactor',
     ]
     for (const configKey of configKeys) {
-      // is this necessary ^ don't think so...?
       const styleSpecificConfig = transition?.[key]?.[configKey]
       const transitionConfigForKey = transition?.[configKey]
 
@@ -224,7 +225,7 @@ const getSequenceArray = (
   sequenceKey: string,
   sequenceArray: SequenceItem<any>[],
   delayMs: number | undefined,
-  config: {},
+  config: object,
   animation: (...props: any) => any,
   callback: (completed: boolean, value?: any) => void
 ) => {
@@ -321,7 +322,7 @@ export function useMotify<Animate>({
       // initializing here fixes reanimated object.__defineProperty bug(?)
       transform: [] as TransformsStyle['transform'],
     }
-    const variantStyle: Animate = state?.__state?.value || {}
+    const variantStyle: Animate & WithTransition = state?.__state?.value || {}
 
     let animateStyle: Animate
 
@@ -368,7 +369,7 @@ export function useMotify<Animate>({
     for (const key in exitStyle || {}) {
       const disabledExitStyles = {
         position: true,
-        zIndex: true
+        zIndex: true,
       }
       if (!disabledExitStyles[key]) {
         exitingStyleProps[key] = true
@@ -382,6 +383,12 @@ export function useMotify<Animate>({
     } else {
       transition = transitionProp
     }
+
+    // let the state prop drive transitions too
+    if (variantStyle.transition) {
+      transition = Object.assign({}, transition, variantStyle.transition)
+    }
+
     if (isExiting && exitTransitionProp) {
       let exitTransition: MotiTransition<Animate> | undefined
       if (exitTransitionProp && 'value' in exitTransitionProp) {
@@ -457,7 +464,14 @@ export function useMotify<Animate>({
 
             if (Array.isArray(transformValue)) {
               // we have a sequence in this transform...
-              const sequence = getSequenceArray(transformKey, transformValue, delayMs, config, animation, callback)
+              const sequence = getSequenceArray(
+                transformKey,
+                transformValue,
+                delayMs,
+                config,
+                animation,
+                callback
+              )
 
               if (sequence.length) {
                 let finalValue = withSequence(sequence[0], ...sequence.slice(1))
@@ -494,7 +508,14 @@ export function useMotify<Animate>({
       } else if (Array.isArray(value)) {
         // we have a sequence
 
-        const sequence = getSequenceArray(key, value, delayMs, config, animation, callback)
+        const sequence = getSequenceArray(
+          key,
+          value,
+          delayMs,
+          config,
+          animation,
+          callback
+        )
         let finalValue = withSequence(sequence[0], ...sequence.slice(1))
         if (shouldRepeat) {
           finalValue = withRepeat(finalValue, repeatCount, repeatReverse)