Merge pull request #10240 from kashaf-ansari-dev/fix-9014-respect-reduce-animations-setting

mobile: respect device reduce animations system setting for sheets

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 = ({
     <ScopedThemeProvider value="sheet">
       <ActionSheet
         ref={fwdRef || localRef}
+        animated={isAnimated}
         testIDs={{
           backdrop: "sheet-backdrop"
         }}

apps/mobile/app/hooks/use-reduce-motion.ts

@@ -0,0 +1,50 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+
+export function useReduceMotion(): boolean {
+  const [isReduceMotionEnabled, setIsReduceMotionEnabled] =
+    useState<boolean>(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;
+}