From 8515fdbc3eed6d69e143b373639112a51655bf4b Mon Sep 17 00:00:00 2001
From: gorhom <gorhom.dev@gmail.com>
Date: Sun, 25 Feb 2024 18:12:30 +0100
Subject: [PATCH] fix: fixed the mount animation with reduce motion enabled
 (#1560, #1674)

fix: bottom sheet not appearing for users that have reduced motion turned on (#1743)(by @fobos531)
---
 src/components/bottomSheet/BottomSheet.tsx | 32 ++++++++--------------
 src/hooks/useBottomSheetSpringConfigs.ts   |  3 +-
 src/hooks/useBottomSheetTimingConfigs.ts   | 17 ++++--------
 src/utilities/animate.ts                   |  6 ++++
 4 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 6a304a9a..d02266c3 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/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;
         }
diff --git a/src/hooks/useBottomSheetSpringConfigs.ts b/src/hooks/useBottomSheetSpringConfigs.ts
index aef93b86..f379aa66 100644
--- a/src/hooks/useBottomSheetSpringConfigs.ts
+++ b/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;
 };
diff --git a/src/hooks/useBottomSheetTimingConfigs.ts b/src/hooks/useBottomSheetTimingConfigs.ts
index 1c9ad7e3..6d839d85 100644
--- a/src/hooks/useBottomSheetTimingConfigs.ts
+++ b/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]);
 };
diff --git a/src/utilities/animate.ts b/src/utilities/animate.ts
index 0ce4c9a5..77d762e3 100644
--- a/src/utilities/animate.ts
+++ b/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