fix: fixed the mount animation with reduce motion enabled (gorhom#1560, gorhom#1674)

fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -740,26 +740,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         runOnJS(handleOnAnimate)(position, source, animatedSnapPoints.value);
 
         /**
-         * force animation configs from parameters, if provided
+         * start animation
          */
-        if (configs !== undefined) {
-          animatedPosition.value = animate({
-            point: position,
-            configs,
-            velocity,
-            onComplete: animateToPositionCompleted,
-          });
-        } else {
-          /**
-           * use animationConfigs callback, if provided
-           */
-          animatedPosition.value = animate({
-            point: position,
-            velocity,
-            configs: _providedAnimationConfigs,
-            onComplete: animateToPositionCompleted,
-          });
-        }
+        animatedPosition.value = animate({
+          point: position,
+          configs: configs || _providedAnimationConfigs,
+          velocity,
+          onComplete: animateToPositionCompleted,
+        });
       },
       [handleOnAnimate, _providedAnimationConfigs]
     );
@@ -1313,7 +1301,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           return;
         }
 
-        let nextPosition;
+        let nextPosition: number;
         if (_providedIndex === -1) {
           nextPosition = animatedClosedPosition.value;
           animatedNextPositionIndex.value = -1;
@@ -1346,7 +1334,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         if (animateOnMount) {
-          animateToPosition(nextPosition, ANIMATION_SOURCE.MOUNT);
+          requestAnimationFrame(() => {
+            animateToPosition(nextPosition, ANIMATION_SOURCE.MOUNT);
+          });
         } else {
           animatedPosition.value = nextPosition;
         }

src/hooks/useBottomSheetSpringConfigs.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import type { WithSpringConfig } from 'react-native-reanimated';
 
 /**
@@ -8,5 +7,5 @@ import type { WithSpringConfig } from 'react-native-reanimated';
 export const useBottomSheetSpringConfigs = (
   configs: Omit<WithSpringConfig, 'velocity'>
 ) => {
-  return useMemo(() => configs, [configs]);
+  return configs;
 };

src/hooks/useBottomSheetTimingConfigs.ts

@@ -1,27 +1,22 @@
 import { useMemo } from 'react';
-import type { EasingFunction } from 'react-native';
-import type { EasingFunctionFactory } from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
 
-interface TimingConfig {
-  duration?: number;
-  easing?: EasingFunction | EasingFunctionFactory;
-}
-
 /**
  * Generate timing animation configs.
  * @default
  * - easing: Easing.out(Easing.exp)
- * - duration 250
+ * - duration: 250
  * @param configs overridable configs.
  */
-export const useBottomSheetTimingConfigs = (configs: TimingConfig) => {
+export const useBottomSheetTimingConfigs = (configs: WithTimingConfig) => {
   return useMemo(() => {
-    const _configs: TimingConfig = {
+    const _configs: WithTimingConfig = {
       easing: configs.easing || ANIMATION_EASING,
       duration: configs.duration || ANIMATION_DURATION,
+      reduceMotion: configs.reduceMotion,
     };
 
     return _configs;
-  }, [configs.duration, configs.easing]);
+  }, [configs.duration, configs.easing, configs.reduceMotion]);
 };

src/utilities/animate.ts

@@ -4,6 +4,7 @@ import {
   withTiming,
   withSpring,
   AnimationCallback,
+  ReduceMotion,
 } from 'react-native-reanimated';
 import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
 
@@ -26,6 +27,11 @@ export const animate = ({
     configs = ANIMATION_CONFIGS;
   }
 
+  // Users might have an accessibililty setting to reduce motion turned on.
+  // This prevents the animation from running when presenting the sheet, which results in
+  // the bottom sheet not even appearing so we need to override it to ensure the animation runs.
+  configs.reduceMotion = ReduceMotion.Never;
+
   // detect animation type
   const type =
     'duration' in configs || 'easing' in configs