diff --git a/apps/mobile/app/components/ui/sheet/index.jsx b/apps/mobile/app/components/ui/sheet/index.jsx index 49cbd2fb0..09ca6bdf0 100644 --- a/apps/mobile/app/components/ui/sheet/index.jsx +++ b/apps/mobile/app/components/ui/sheet/index.jsx @@ -27,7 +27,7 @@ import { useUserStore } from "../../../stores/use-user-store"; import { getContainerBorder } from "../../../utils/colors"; import { NotesnookModule } from "../../../utils/notesnook-module"; import { Toast } from "../../toast"; - +import { useReduceMotion } from "../../../hooks/use-reduce-motion"; /** * * @param {any} param0 @@ -53,6 +53,9 @@ const SheetWrapper = ({ const sheetKeyboardHandler = useSettingStore( (state) => state.sheetKeyboardHandler ); + const isReduceMotionEnabled = useReduceMotion(); + const isAnimated = !isReduceMotionEnabled; + const largeTablet = deviceMode === "tablet"; const smallTablet = deviceMode === "smallTablet"; const dimensions = useSettingStore((state) => state.dimensions); @@ -125,6 +128,7 @@ const SheetWrapper = ({ . +*/ + +import { useEffect, useState } from "react"; +import { AccessibilityInfo } from "react-native"; + +export function useReduceMotion(): boolean { + const [isReduceMotionEnabled, setIsReduceMotionEnabled] = + useState(false); + + useEffect(() => { + AccessibilityInfo.isReduceMotionEnabled() + .then(setIsReduceMotionEnabled) + .catch(() => {}); + + const subscription = AccessibilityInfo.addEventListener( + "reduceMotionChanged", + setIsReduceMotionEnabled + ); + + return () => { + if (subscription?.remove) { + subscription.remove(); + } else if ((AccessibilityInfo as any).removeEventListener) { + (AccessibilityInfo as any).removeEventListener( + "reduceMotionChanged", + setIsReduceMotionEnabled + ); + } + }; + }, []); + + return isReduceMotionEnabled; +}