fix(ui): bottom sheet reduced motion (#4183)

Author: Pierre Gee

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}

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}

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}

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}