Merge branch 'master' of https://github.com/nandorojo/moti

nandorojo · Jan 29, 2025 · 5790b4f · 5790b4f
2 parents 5639437 + df1293e
commit 5790b4f
Show file tree

Hide file tree

Showing 5 changed files with 14,502 additions and 19,171 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,4 @@
 {
-  "description": "The universal React Native animation library, powered by Reanimated 3. 🦉",
   "private": true,
   "workspaces": {
     "packages": [

diff --git a/packages/moti/package.json b/packages/moti/package.json
@@ -1,5 +1,6 @@
 {
   "name": "moti",
+  "description": "The universal React Native animation library, powered by Reanimated 3. 🦉",
   "version": "0.29.0",
   "keywords": [
     "react-native",

diff --git a/packages/moti/src/core/use-motify.ts b/packages/moti/src/core/use-motify.ts
@@ -14,6 +14,7 @@ import {
   withRepeat,
   withSequence,
   runOnJS,
+  ReduceMotion,
 } from 'react-native-reanimated'
 import type {
   WithDecayConfig,
@@ -165,6 +166,7 @@ function animationConfig<Animate>(
   // debug({ loop, key, repeatCount, animationType })
 
   let config = {}
+  let reduceMotion = ReduceMotion.System
   // so sad, but fix it later :(
   let animation = (...props: any): any => props
 
@@ -177,20 +179,30 @@ function animationConfig<Animate>(
       (transition?.[key] as WithTimingConfig | undefined)?.easing ??
       (transition as WithTimingConfig | undefined)?.easing
 
+    const timingReduceMotion =
+      (transition?.[key] as WithTimingConfig | undefined)?.reduceMotion ??
+      (transition as WithTimingConfig | undefined)?.reduceMotion
+
     if (easing) {
       config['easing'] = easing
     }
     if (duration != null) {
       config['duration'] = duration
     }
+    if (reduceMotion) {
+      reduceMotion = timingReduceMotion ?? reduceMotion
+      config['reduceMotion'] = reduceMotion
+    }
     animation = withTiming
   } else if (animationType === 'spring') {
     animation = withSpring
     config = {} as WithSpringConfig
     for (const configKey of withSpringConfigKeys) {
       const styleSpecificConfig = transition?.[key]?.[configKey]
       const transitionConfigForKey = transition?.[configKey]
-
+      if (configKey === 'reduceMotion') {
+        reduceMotion = transitionConfigForKey || styleSpecificConfig
+      }
       if (styleSpecificConfig != null) {
         config[configKey] = styleSpecificConfig
       } else if (transitionConfigForKey != null) {
@@ -211,7 +223,9 @@ function animationConfig<Animate>(
     for (const configKey of configKeys) {
       const styleSpecificConfig = transition?.[key]?.[configKey]
       const transitionConfigForKey = transition?.[configKey]
-
+      if (configKey === 'reduceMotion') {
+        reduceMotion = transitionConfigForKey || styleSpecificConfig
+      }
       if (styleSpecificConfig != null) {
         config[configKey] = styleSpecificConfig
       } else if (transitionConfigForKey != null) {
@@ -227,6 +241,7 @@ function animationConfig<Animate>(
   return {
     animation,
     config,
+    reduceMotion,
     repeatReverse,
     repeatCount,
     shouldRepeat: !!repeatCount,
@@ -260,6 +275,7 @@ const getSequenceArray = (
     if (shouldPush) {
       let stepDelay = delayMs
       let stepValue = step
+      let stepReduceMotion = ReduceMotion.System
       let stepConfig = Object.assign({}, config)
       let stepAnimation = animation as
         | typeof withTiming
@@ -272,13 +288,15 @@ const getSequenceArray = (
         delete stepTransition.delay
         delete stepTransition.value
 
-        const { config: inlineStepConfig, animation } = animationConfig(
-          sequenceKey,
-          stepTransition
-        )
+        const {
+          config: inlineStepConfig,
+          animation,
+          reduceMotion,
+        } = animationConfig(sequenceKey, stepTransition)
 
         stepConfig = Object.assign({}, stepConfig, inlineStepConfig)
         stepAnimation = animation
+        stepReduceMotion = reduceMotion
 
         if (step.delay != null) {
           stepDelay = step.delay
@@ -304,7 +322,7 @@ const getSequenceArray = (
         }
       )
       if (stepDelay != null) {
-        sequence.push(withDelay(stepDelay, sequenceValue))
+        sequence.push(withDelay(stepDelay, sequenceValue, stepReduceMotion))
       } else {
         sequence.push(sequenceValue)
       }
@@ -467,8 +485,14 @@ export function useMotify<Animate>({
         value = value.value
       }
 
-      const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
-        animationConfig(key, transition)
+      const {
+        animation,
+        config,
+        reduceMotion,
+        shouldRepeat,
+        repeatCount,
+        repeatReverse,
+      } = animationConfig(key, transition)
 
       const callback: (
         completed: boolean | undefined,
@@ -543,7 +567,9 @@ export function useMotify<Animate>({
                   finalValue = withRepeat(
                     finalValue,
                     repeatCount,
-                    repeatReverse
+                    repeatReverse,
+                    callback,
+                    reduceMotion
                   )
                 }
                 transform[transformKey] = finalValue
@@ -572,10 +598,20 @@ export function useMotify<Animate>({
 
               let finalValue = animation(transformValue, config, callback)
               if (shouldRepeat) {
-                finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
+                finalValue = withRepeat(
+                  finalValue,
+                  repeatCount,
+                  repeatReverse,
+                  undefined,
+                  reduceMotion
+                )
               }
               if (delayMs != null) {
-                transform[transformKey] = withDelay(delayMs, finalValue)
+                transform[transformKey] = withDelay(
+                  delayMs,
+                  finalValue,
+                  reduceMotion
+                )
               } else {
                 transform[transformKey] = finalValue
               }
@@ -602,7 +638,13 @@ export function useMotify<Animate>({
         )
         let finalValue = withSequence(...sequence)
         if (shouldRepeat) {
-          finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
+          finalValue = withRepeat(
+            finalValue,
+            repeatCount,
+            repeatReverse,
+            undefined,
+            reduceMotion
+          )
         }
 
         if (isTransform(key)) {
@@ -634,10 +676,16 @@ export function useMotify<Animate>({
         const transform = {}
         let finalValue = animation(value, config, callback)
         if (shouldRepeat) {
-          finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
+          finalValue = withRepeat(
+            finalValue,
+            repeatCount,
+            repeatReverse,
+            undefined,
+            reduceMotion
+          )
         }
         if (delayMs != null) {
-          transform[key] = withDelay(delayMs, finalValue)
+          transform[key] = withDelay(delayMs, finalValue, reduceMotion)
         } else {
           transform[key] = finalValue
         }
@@ -651,23 +699,39 @@ export function useMotify<Animate>({
           let finalValue = animation(value, config, callback)
 
           if (shouldRepeat) {
-            finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
+            finalValue = withRepeat(
+              finalValue,
+              repeatCount,
+              repeatReverse,
+              undefined,
+              reduceMotion
+            )
           }
 
           if (delayMs != null) {
-            final[key][innerStyleKey] = withDelay(delayMs, finalValue)
+            final[key][innerStyleKey] = withDelay(
+              delayMs,
+              finalValue,
+              reduceMotion
+            )
           } else {
             final[key][innerStyleKey] = finalValue
           }
         }
       } else {
         let finalValue = animation(value, config, callback)
         if (shouldRepeat) {
-          finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
+          finalValue = withRepeat(
+            finalValue,
+            repeatCount,
+            repeatReverse,
+            undefined,
+            reduceMotion
+          )
         }
 
         if (delayMs != null && typeof delayMs === 'number') {
-          final[key] = withDelay(delayMs, finalValue)
+          final[key] = withDelay(delayMs, finalValue, reduceMotion)
         } else {
           final[key] = finalValue
         }

diff --git a/packages/moti/src/skeleton/types.ts b/packages/moti/src/skeleton/types.ts
@@ -12,10 +12,10 @@ export type MotiSkeletonProps = {
    */
   boxHeight?: Size
   /**
-   * Optional height of the skeleton. Defauls to a `minHeight` of `32`
+   * Optional height of the skeleton. Defaults to a `minHeight` of `32`
    */
   height?: Size
-  children?: React.ReactChild | null
+  children?: React.ReactElement | null
   /**
    * `boolean` specifying whether the skeleton should be visible. By default, it shows if there are no children. This way, you can conditionally display children, and automatically hide the skeleton when they exist.
    *