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

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -753,26 +753,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         runOnJS(handleOnAnimate)(position);
 
         /**
-         * 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]
     );
@@ -1332,7 +1320,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           return;
         }
 
-        let nextPosition;
+        let nextPosition: number;
         if (_providedIndex === -1) {
           nextPosition = animatedClosedPosition.value;
           animatedNextPositionIndex.value = -1;
@@ -1365,7 +1353,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]);
 };