refactor: address coding standards - useSyncExternalStore, shared illustration hook, reduce duplication

Author: TaduJR

src/hooks/useSectionIllustrationWithMotion.ts

@@ -0,0 +1,31 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {IllustrationName} from '@components/Icon/IllustrationLoader';
+import type DotLottieAnimation from '@components/LottieAnimations/types';
+import type {SectionProps} from '@components/Section';
+import Accessibility from '@libs/Accessibility';
+import {useMemoizedLazyIllustrations} from './useLazyAsset';
+
+/** Returns a static SVG when reduced motion is enabled, or a Lottie animation otherwise. */
+function useSectionIllustrationWithMotion(
+    animationSource: DotLottieAnimation,
+    illustrationKey: IllustrationName,
+    staticIllustrationStyle?: StyleProp<ViewStyle>,
+    animationIllustrationStyle?: StyleProp<ViewStyle>,
+): Pick<SectionProps, 'illustration' | 'illustrationStyle'> {
+    const isReduceMotionEnabled = Accessibility.useReducedMotion();
+    const illustrations = useMemoizedLazyIllustrations([illustrationKey] as const);
+
+    if (isReduceMotionEnabled) {
+        return {
+            illustration: illustrations[illustrationKey],
+            illustrationStyle: staticIllustrationStyle,
+        };
+    }
+
+    return {
+        illustration: animationSource,
+        illustrationStyle: animationIllustrationStyle,
+    };
+}
+
+export default useSectionIllustrationWithMotion;

src/libs/Accessibility/index.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useState, useSyncExternalStore} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {AccessibilityInfo} from 'react-native';
 import moveAccessibilityFocus from './moveAccessibilityFocus';
@@ -18,50 +18,29 @@ const useScreenReaderStatus = (): boolean => {
     return isScreenReaderEnabled;
 };
 
-/**
- * Hook that returns whether the user has enabled the "reduce motion" accessibility setting.
- * This is used to disable animations for users who are sensitive to motion.
- * Works on iOS, Android, and Web (via react-native-web which uses prefers-reduced-motion media query).
- */
-// Module-level cache so new hook instances start with the last known value
-// instead of defaulting to false (which causes a race condition on remount)
 let cachedReduceMotionValue = false;
 
-const useReducedMotion = (): boolean => {
-    const [isReduceMotionEnabled, setIsReduceMotionEnabled] = useState(cachedReduceMotionValue);
+function subscribeReduceMotion(callback: () => void) {
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', (enabled) => {
+        cachedReduceMotionValue = enabled;
+        callback();
+    });
 
-    useEffect(() => {
-        let isMounted = true;
-
-        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', (enabled) => {
+    AccessibilityInfo.isReduceMotionEnabled()
+        .then((enabled) => {
             cachedReduceMotionValue = enabled;
-            setIsReduceMotionEnabled(enabled);
-        });
+            callback();
+        })
+        .catch(() => {});
 
-        AccessibilityInfo.isReduceMotionEnabled()
-            .then((enabled) => {
-                cachedReduceMotionValue = enabled;
-                if (!isMounted) {
-                    return;
-                }
-                setIsReduceMotionEnabled(enabled);
-            })
-            .catch(() => {
-                // If the check fails, default to false (animations enabled)
-                if (!isMounted) {
-                    return;
-                }
-                setIsReduceMotionEnabled(false);
-            });
+    return () => subscription?.remove();
+}
 
-        return () => {
-            isMounted = false;
-            subscription?.remove();
-        };
-    }, []);
+function getReduceMotionSnapshot() {
+    return cachedReduceMotionValue;
+}
 
-    return isReduceMotionEnabled;
-};
+const useReducedMotion = (): boolean => useSyncExternalStore(subscribeReduceMotion, getReduceMotionSnapshot, () => false);
 
 const getHitSlopForSize = ({x, y}: HitSlop) => {
     /* according to https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

src/pages/TeachersUnite/useSaveTheWorldSectionIllustration/index.native.ts

@@ -1,24 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UseSaveTheWorldSectionIllustration from './types';
 
 const useSaveTheWorldSectionIllustration: UseSaveTheWorldSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['SaveTheWorldScale']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.SaveTheWorldScale,
-            illustrationStyle: styles.saveTheWorldStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.SaveTheWorld,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.SaveTheWorld, 'SaveTheWorldScale', styles.saveTheWorldStaticIllustration);
 };
 
 export default useSaveTheWorldSectionIllustration;

src/pages/settings/AboutPage/useAboutSectionIllustration/index.native.ts

@@ -1,24 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UseAboutSectionIllustration from './types';
 
 const useAboutSectionIllustration: UseAboutSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['TiltedCoinExpensify']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.TiltedCoinExpensify,
-            illustrationStyle: styles.aboutStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.Coin,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.Coin, 'TiltedCoinExpensify', styles.aboutStaticIllustration);
 };
 
 export default useAboutSectionIllustration;

src/pages/settings/Preferences/usePreferencesSectionIllustration/index.native.ts

@@ -1,24 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UsePreferencesSectionIllustration from './types';
 
 const usePreferencesSectionIllustration: UsePreferencesSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['DjBoothReferenceHands']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.DjBoothReferenceHands,
-            illustrationStyle: styles.preferencesStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.PreferencesDJ,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.PreferencesDJ, 'DjBoothReferenceHands', styles.preferencesStaticIllustration);
 };
 
 export default usePreferencesSectionIllustration;

src/pages/settings/Security/useSecuritySettingsSectionIllustration/index.native.ts

@@ -1,24 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UseSecuritySettingsSectionIllustration from './types';
 
 const useSecuritySettingsSectionIllustration: UseSecuritySettingsSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['Safe']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.Safe,
-            illustrationStyle: styles.securitySettingsStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.Safe,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.Safe, 'Safe', styles.securitySettingsStaticIllustration);
 };
 
 export default useSecuritySettingsSectionIllustration;

src/pages/settings/Troubleshoot/useTroubleshootSectionIllustration/index.native.ts

@@ -1,24 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UseTroubleshootSectionIllustration from './types';
 
 const useTroubleshootSectionIllustration: UseTroubleshootSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['WorkspaceScene']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.WorkspaceScene,
-            illustrationStyle: styles.troubleshootStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.Desk,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.Desk, 'WorkspaceScene', styles.troubleshootStaticIllustration);
 };
 
 export default useTroubleshootSectionIllustration;

src/pages/settings/Wallet/WalletPage/useWalletSectionIllustration/index.native.ts

@@ -1,25 +1,11 @@
 import LottieAnimations from '@components/LottieAnimations';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useSectionIllustrationWithMotion from '@hooks/useSectionIllustrationWithMotion';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Accessibility from '@libs/Accessibility';
 import type UseWalletSectionIllustration from './types';
 
 const useWalletSectionIllustration: UseWalletSectionIllustration = () => {
-    const isReduceMotionEnabled = Accessibility.useReducedMotion();
-    const illustrations = useMemoizedLazyIllustrations(['BigVault']);
     const styles = useThemeStyles();
-
-    if (isReduceMotionEnabled) {
-        return {
-            illustration: illustrations.BigVault,
-            illustrationStyle: styles.walletStaticIllustration,
-        };
-    }
-
-    return {
-        illustration: LottieAnimations.BankVault,
-        illustrationStyle: styles.walletLottieIllustration,
-    };
+    return useSectionIllustrationWithMotion(LottieAnimations.BankVault, 'BigVault', styles.walletStaticIllustration, styles.walletLottieIllustration);
 };
 
 export default useWalletSectionIllustration;