refactor: extract useSystemColorScheme

Author: adrcotfas

src/core/PaperProvider.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Appearance, ColorSchemeName } from 'react-native';
 
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import { Provider as SettingsProvider, Settings } from './settings';
 import { defaultThemes, ThemeProvider } from './theming';
+import { useSystemColorScheme } from './useSystemColorScheme';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
 import PortalHost from '../components/Portal/PortalHost';
 import { ReduceMotionContext } from '../theme/accessibility/ReduceMotionContext';
@@ -23,42 +23,9 @@ export type Props = {
 const PaperProvider = (props: Props) => {
   const { reduceMotion = 'auto' } = props;
 
-  const colorSchemeName =
-    (!props.theme && Appearance?.getColorScheme()) || 'light';
-
-  const [colorScheme, setColorScheme] =
-    React.useState<ColorSchemeName>(colorSchemeName);
-
+  const colorScheme = useSystemColorScheme(!props.theme);
   const resolvedReduceMotion = useResolvedReduceMotion(reduceMotion);
 
-  const handleAppearanceChange = (
-    preferences: Appearance.AppearancePreferences
-  ) => {
-    const { colorScheme } = preferences;
-    setColorScheme(colorScheme);
-  };
-
-  React.useEffect(() => {
-    let appearanceSubscription:
-      | ReturnType<typeof Appearance.addChangeListener>
-      | undefined;
-    if (!props.theme) {
-      appearanceSubscription = Appearance?.addChangeListener(
-        handleAppearanceChange
-      ) as typeof appearanceSubscription;
-    }
-    return () => {
-      if (!props.theme) {
-        if (appearanceSubscription) {
-          appearanceSubscription.remove();
-        } else {
-          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
-          Appearance?.removeChangeListener(handleAppearanceChange);
-        }
-      }
-    };
-  }, [props.theme]);
-
   const theme = React.useMemo<Theme>(() => {
     const scheme = colorScheme === 'dark' ? 'dark' : 'light';
     const base = defaultThemes[scheme];

src/core/useSystemColorScheme.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Appearance, ColorSchemeName } from 'react-native';
+
+/**
+ * Subscribes to the OS color-scheme setting via `Appearance.addChangeListener`
+ * and returns the current value.
+ *
+ * When `enabled` is false the hook does not subscribe and returns `'light'` —
+ * used by `PaperProvider` to skip system tracking when the user has supplied
+ * an explicit theme.
+ */
+export function useSystemColorScheme(enabled: boolean): ColorSchemeName {
+  const [colorScheme, setColorScheme] = React.useState<ColorSchemeName>(() =>
+    enabled ? Appearance?.getColorScheme() ?? 'light' : 'light'
+  );
+
+  React.useEffect(() => {
+    if (!enabled) return;
+    const sub = Appearance?.addChangeListener((preferences) => {
+      setColorScheme(preferences.colorScheme);
+    });
+    return () => {
+      sub?.remove();
+    };
+  }, [enabled]);
+
+  return colorScheme;
+}