From d1cd46bf7dc93b58e9f715ee63c6568cecde0799 Mon Sep 17 00:00:00 2001
From: Pierre Gee <pierre@cakedefi.com>
Date: Thu, 18 Apr 2024 16:58:31 +0800
Subject: [PATCH] fix(ui): bottom sheet reduced motion (#4183)

---
 mobile-app/app/components/BottomSheetInfo.tsx             | 4 ++++
 mobile-app/app/components/BottomSheetWithNav.tsx          | 4 ++++
 mobile-app/app/components/BottomSheetWithNavV2.tsx        | 4 ++++
 .../screens/TransactionAuthorization/PasscodePrompt.tsx   | 8 ++++++--
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/mobile-app/app/components/BottomSheetInfo.tsx b/mobile-app/app/components/BottomSheetInfo.tsx
index 83a4dd58a1..347ac80aa6 100644
--- a/mobile-app/app/components/BottomSheetInfo.tsx
+++ b/mobile-app/app/components/BottomSheetInfo.tsx
@@ -1,6 +1,7 @@
 import { tailwind } from "@tailwind";
 import { translate } from "@translations";
 import { StyleProp, TextStyle, View } from "react-native";
+import { useReducedMotion } from "react-native-reanimated";
 import { ThemedIcon, ThemedText } from "./themed";
 import { BottomSheetModal } from "./BottomSheetModal";
 
@@ -19,12 +20,15 @@ export function BottomSheetInfo({
   alertInfo,
   infoIconStyle,
 }: BottomSheetInfoProps): JSX.Element {
+  const reducedMotion = useReducedMotion();
+
   return (
     <BottomSheetModal
       name={name}
       index={0}
       snapPoints={["30%"]}
       alertInfo={alertInfo}
+      animateOnMount={!reducedMotion}
       triggerComponent={
         <ThemedIcon
           size={16}
diff --git a/mobile-app/app/components/BottomSheetWithNav.tsx b/mobile-app/app/components/BottomSheetWithNav.tsx
index 16a5e5d91f..08fbb527ec 100644
--- a/mobile-app/app/components/BottomSheetWithNav.tsx
+++ b/mobile-app/app/components/BottomSheetWithNav.tsx
@@ -10,6 +10,7 @@ import {
   BottomSheetBackgroundProps,
   BottomSheetModal,
 } from "@gorhom/bottom-sheet";
+import { useReducedMotion } from "react-native-reanimated";
 import { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import { NavigationContainer, Theme } from "@react-navigation/native";
 import { AddOrRemoveCollateralFormProps } from "@screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm";
@@ -49,6 +50,8 @@ export interface BottomSheetWithNavRouteParam {
 
 export const BottomSheetWithNav = React.memo(
   (props: BottomSheetWithNavProps): JSX.Element => {
+    const reducedMotion = useReducedMotion();
+
     const getSnapPoints = (): string[] => {
       if (Platform.OS === "ios") {
         return props.snapPoints?.ios ?? ["50%"];
@@ -66,6 +69,7 @@ export const BottomSheetWithNav = React.memo(
         enablePanDownToClose={false}
         handleComponent={EmptyHandleComponent}
         keyboardBlurBehavior="restore"
+        animateOnMount={!reducedMotion}
         backdropComponent={(backdropProps: BottomSheetBackdropProps) => (
           <View
             {...backdropProps}
diff --git a/mobile-app/app/components/BottomSheetWithNavV2.tsx b/mobile-app/app/components/BottomSheetWithNavV2.tsx
index 5070190d83..399a1df389 100644
--- a/mobile-app/app/components/BottomSheetWithNavV2.tsx
+++ b/mobile-app/app/components/BottomSheetWithNavV2.tsx
@@ -8,6 +8,7 @@ import {
   BottomSheetBackdropProps,
   BottomSheetModal,
 } from "@gorhom/bottom-sheet";
+import { useReducedMotion } from "react-native-reanimated";
 import { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import { NavigationContainer } from "@react-navigation/native";
 import { AddOrRemoveCollateralFormProps } from "@screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm";
@@ -49,6 +50,8 @@ export const BottomSheetWithNavV2 = React.memo(
   (props: BottomSheetWithNavProps): JSX.Element => {
     const { modalRef, snapPoints } = props;
 
+    const reducedMotion = useReducedMotion();
+
     const getSnapPoints = (): string[] => {
       if (Platform.OS === "ios") {
         return snapPoints?.ios ?? ["50%"];
@@ -66,6 +69,7 @@ export const BottomSheetWithNavV2 = React.memo(
         handleComponent={EmptyHandleComponent}
         enablePanDownToClose={false}
         keyboardBlurBehavior="restore"
+        animateOnMount={!reducedMotion}
         backdropComponent={(backdropProps: BottomSheetBackdropProps) => (
           <View
             {...backdropProps}
diff --git a/mobile-app/app/screens/TransactionAuthorization/PasscodePrompt.tsx b/mobile-app/app/screens/TransactionAuthorization/PasscodePrompt.tsx
index b2ab16996e..49e74bd1b4 100644
--- a/mobile-app/app/screens/TransactionAuthorization/PasscodePrompt.tsx
+++ b/mobile-app/app/screens/TransactionAuthorization/PasscodePrompt.tsx
@@ -18,6 +18,7 @@ import {
   BottomSheetBackgroundProps,
   BottomSheetModal,
 } from "@gorhom/bottom-sheet";
+import { useReducedMotion } from "react-native-reanimated";
 import { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import * as React from "react";
 import Modal from "react-overlays/Modal";
@@ -155,8 +156,8 @@ const PromptContent = React.memo((props: PasscodePromptProps): JSX.Element => {
                       props.attemptsRemaining === 1
                         ? "Last attempt or your wallet will be unlinked for your security"
                         : props.isRetry
-                        ? "Incorrect passcode.\n{{attemptsRemaining}} attempts remaining"
-                        : "{{attemptsRemaining}} attempts remaining"
+                          ? "Incorrect passcode.\n{{attemptsRemaining}} attempts remaining"
+                          : "{{attemptsRemaining}} attempts remaining"
                     }`,
                     { attemptsRemaining: props.attemptsRemaining },
                   )}
@@ -172,6 +173,8 @@ const PromptContent = React.memo((props: PasscodePromptProps): JSX.Element => {
 export const PasscodePrompt = React.memo(
   (props: PasscodePromptProps): JSX.Element => {
     const containerRef = React.useRef(null);
+    const reducedMotion = useReducedMotion();
+
     const getSnapPoints = (): string[] => {
       if (Platform.OS === "ios") {
         return ["70%"]; // ios measures space without keyboard
@@ -225,6 +228,7 @@ export const PasscodePrompt = React.memo(
         ref={props.modalRef}
         snapPoints={getSnapPoints()}
         handleComponent={EmptyHandleComponent}
+        animateOnMount={!reducedMotion}
         backdropComponent={(backdropProps: BottomSheetBackdropProps) => (
           <View
             {...backdropProps}