Avoid animations when reduceMotion is enabled

.eslintignore

@@ -759,6 +759,7 @@ packages/app-mobile/utils/fs-driver/testUtil/createFilesFromPathRecord.js
 packages/app-mobile/utils/fs-driver/testUtil/verifyDirectoryMatches.js
 packages/app-mobile/utils/getPackageInfo.js
 packages/app-mobile/utils/getVersionInfoText.js
+packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
 packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js

.gitignore

@@ -736,6 +736,7 @@ packages/app-mobile/utils/fs-driver/testUtil/createFilesFromPathRecord.js
 packages/app-mobile/utils/fs-driver/testUtil/verifyDirectoryMatches.js
 packages/app-mobile/utils/getPackageInfo.js
 packages/app-mobile/utils/getVersionInfoText.js
+packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
 packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js

packages/app-mobile/components/SideMenu.tsx

@@ -5,6 +5,7 @@ import { State } from '@joplin/lib/reducer';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import AccessibleView from './accessibility/AccessibleView';
 import { _ } from '@joplin/lib/locale';
+import useReduceMotionEnabled from '../utils/hooks/useReduceMotionEnabled';
 
 export enum SideMenuPosition {
 	Left = 'left',
@@ -128,11 +129,15 @@ const useAnimations = ({ onSliding, openMenuOffset, isLeftMenu, open }: UseAnima
 		return result;
 	}, [menuDragOffset, basePositioningFraction, openMenuOffset, isLeftMenu]);
 
+	const reduceMotionEnabled = useReduceMotionEnabled();
+	const reduceMotionEnabledRef = useRef(false);
+	reduceMotionEnabledRef.current = reduceMotionEnabled;
+
 	const menuUpdateAnimationRef = useRef<Animated.CompositeAnimation>(null);
 	const updateMenuPosition = useCallback(() => {
 		const baseAnimationProps = {
 			easing: Easing.ease,
-			duration: 200,
+			duration: reduceMotionEnabledRef.current ? 0 : 300,
 			useNativeDriver: true,
 		};
 		setIsAnimating(true);

packages/app-mobile/utils/hooks/useReduceMotionEnabled.ts

@@ -0,0 +1,19 @@
+import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+const useReduceMotionEnabled = () => {
+	const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+	useEffect(() => {
+		AccessibilityInfo.addEventListener('reduceMotionChanged', (enabled) => {
+			setReduceMotionEnabled(enabled);
+		});
+	}, []);
+	useAsyncEffect(async () => {
+		setReduceMotionEnabled(await AccessibilityInfo.isReduceMotionEnabled());
+	}, []);
+
+	return reduceMotionEnabled;
+};
+
+export default useReduceMotionEnabled;