Appearance: Cache colorScheme in JavaScript

packages/react-native/Libraries/Utilities/Appearance.js

@@ -9,7 +9,6 @@
  */
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import Platform from '../Utilities/Platform';
 import EventEmitter, {
   type EventSubscription,
 } from '../vendor/emitter/EventEmitter';
@@ -20,88 +19,81 @@ import NativeAppearance, {
 } from './NativeAppearance';
 import invariant from 'invariant';
 
-type AppearanceListener = (preferences: AppearancePreferences) => void;
 const eventEmitter = new EventEmitter<{
-  change: [AppearancePreferences],
+  change: [{colorScheme: ?ColorSchemeName}],
 }>();
 
 type NativeAppearanceEventDefinitions = {
   appearanceChanged: [AppearancePreferences],
 };
 
-if (NativeAppearance) {
-  const nativeEventEmitter =
-    new NativeEventEmitter<NativeAppearanceEventDefinitions>(
-      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
-      // If you want to use the native module on other platforms, please remove this condition and test its behavior
-      Platform.OS !== 'ios' ? null : NativeAppearance,
-    );
-  nativeEventEmitter.addListener(
-    'appearanceChanged',
-    (newAppearance: AppearancePreferences) => {
-      const {colorScheme} = newAppearance;
-      invariant(
-        colorScheme === 'dark' ||
-          colorScheme === 'light' ||
-          colorScheme == null,
-        "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-      );
-      eventEmitter.emit('change', {colorScheme});
-    },
-  );
+// Cache the color scheme to reduce the cost of reading it between changes.
+// NOTE: If `NativeAppearance` is null, this will always be null.
+let appearance: ?{colorScheme: ?ColorSchemeName} = null;
+
+if (NativeAppearance != null) {
+  new NativeEventEmitter<NativeAppearanceEventDefinitions>(
+    NativeAppearance,
+  ).addListener('appearanceChanged', (newAppearance: AppearancePreferences) => {
+    const colorScheme = toColorScheme(newAppearance.colorScheme);
+    appearance = {colorScheme};
+    eventEmitter.emit('change', appearance);
+  });
 }
 
-module.exports = {
-  /**
-   * Note: Although color scheme is available immediately, it may change at any
-   * time. Any rendering logic or styles that depend on this should try to call
-   * this function on every render, rather than caching the value (for example,
-   * using inline styles rather than setting a value in a `StyleSheet`).
-   *
-   * Example: `const colorScheme = Appearance.getColorScheme();`
-   *
-   * @returns {?ColorSchemeName} Value for the color scheme preference.
-   */
-  getColorScheme(): ?ColorSchemeName {
-    if (__DEV__) {
-      if (isAsyncDebugging) {
-        // Hard code light theme when using the async debugger as
-        // sync calls aren't supported
-        return 'light';
-      }
+/**
+ * Returns the current color scheme preference. This value may change, so the
+ * value should not be cached without either listening to changes or using
+ * the `useColorScheme` hook.
+ */
+export function getColorScheme(): ?ColorSchemeName {
+  if (__DEV__) {
+    if (isAsyncDebugging) {
+      // Hard code light theme when using the async debugger as
+      // sync calls aren't supported
+      return 'light';
     }
+  }
+  let colorScheme = null;
+  if (NativeAppearance != null) {
+    if (appearance == null) {
+      // Lazily initialize `appearance`. This should only happen once because
+      // we never reassign a null value to `appearance`.
+      appearance = {
+        colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+      };
+    }
+    colorScheme = appearance.colorScheme;
+  }
+  return colorScheme;
+}
 
-    // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-    const nativeColorScheme: ?string =
-      NativeAppearance == null
-        ? null
-        : NativeAppearance.getColorScheme() || null;
-    invariant(
-      nativeColorScheme === 'dark' ||
-        nativeColorScheme === 'light' ||
-        nativeColorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark' or 'light'?",
-    );
-    return nativeColorScheme;
-  },
-
-  setColorScheme(colorScheme: ?ColorSchemeName): void {
-    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
-
-    invariant(
-      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
-      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
-    );
+/**
+ * Updates the current color scheme to the supplied value.
+ */
+export function setColorScheme(colorScheme: ?ColorSchemeName): void {
+  if (NativeAppearance != null) {
+    NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
+    appearance = {colorScheme};
+  }
+}
 
-    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
-      NativeAppearance.setColorScheme(nativeColorScheme);
-    }
-  },
+/**
+ * Add an event handler that is fired when appearance preferences change.
+ */
+export function addChangeListener(
+  listener: ({colorScheme: ?ColorSchemeName}) => void,
+): EventSubscription {
+  return eventEmitter.addListener('change', listener);
+}
 
-  /**
-   * Add an event handler that is fired when appearance preferences change.
-   */
-  addChangeListener(listener: AppearanceListener): EventSubscription {
-    return eventEmitter.addListener('change', listener);
-  },
-};
+/**
+ * TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
+ */
+function toColorScheme(colorScheme: ?string): ?ColorSchemeName {
+  invariant(
+    colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+    "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+  );
+  return colorScheme;
+}

packages/react-native/Libraries/Utilities/DevLoadingView.js

@@ -9,7 +9,7 @@
  */
 
 import processColor from '../StyleSheet/processColor';
-import Appearance from './Appearance';
+import {getColorScheme} from './Appearance';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
 const COLOR_SCHEME = {
@@ -39,9 +39,7 @@ module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
       const colorScheme =
-        Appearance.getColorScheme() === 'dark'
-          ? COLOR_SCHEME.dark
-          : COLOR_SCHEME.default;
+        getColorScheme() === 'dark' ? COLOR_SCHEME.dark : COLOR_SCHEME.default;
 
       const colorSet = colorScheme[type];
 

packages/react-native/Libraries/Utilities/useColorScheme.js

@@ -12,14 +12,14 @@
 
 import type {ColorSchemeName} from './NativeAppearance';
 
-import Appearance from './Appearance';
+import {addChangeListener, getColorScheme} from './Appearance';
 import {useSyncExternalStore} from 'react';
 
 const subscribe = (onStoreChange: () => void) => {
-  const appearanceSubscription = Appearance.addChangeListener(onStoreChange);
+  const appearanceSubscription = addChangeListener(onStoreChange);
   return () => appearanceSubscription.remove();
 };
 
 export default function useColorScheme(): ?ColorSchemeName {
-  return useSyncExternalStore(subscribe, Appearance.getColorScheme);
+  return useSyncExternalStore(subscribe, getColorScheme);
 }

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -9155,12 +9155,11 @@ declare export default typeof UTFSequence;
 `;
 
 exports[`public API should not change unintentionally Libraries/Utilities/Appearance.js 1`] = `
-"type AppearanceListener = (preferences: AppearancePreferences) => void;
-declare module.exports: {
-  getColorScheme(): ?ColorSchemeName,
-  setColorScheme(colorScheme: ?ColorSchemeName): void,
-  addChangeListener(listener: AppearanceListener): EventSubscription,
-};
+"declare export function getColorScheme(): ?ColorSchemeName;
+declare export function setColorScheme(colorScheme: ?ColorSchemeName): void;
+declare export function addChangeListener(
+  listener: ({ colorScheme: ?ColorSchemeName }) => void
+): EventSubscription;
 "
 `;
 

packages/react-native/index.js

@@ -82,7 +82,7 @@ import typeof StyleSheet from './Libraries/StyleSheet/StyleSheet';
 import typeof Text from './Libraries/Text/Text';
 import typeof * as TurboModuleRegistry from './Libraries/TurboModule/TurboModuleRegistry';
 import typeof UTFSequence from './Libraries/UTFSequence';
-import typeof Appearance from './Libraries/Utilities/Appearance';
+import typeof * as Appearance from './Libraries/Utilities/Appearance';
 import typeof BackHandler from './Libraries/Utilities/BackHandler';
 import typeof DeviceInfo from './Libraries/Utilities/DeviceInfo';
 import typeof DevSettings from './Libraries/Utilities/DevSettings';

packages/react-native/src/private/specs/modules/NativeAppearance.js

@@ -14,19 +14,19 @@ import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboMod
 
 export type ColorSchemeName = 'light' | 'dark';
 
-export type AppearancePreferences = {|
+export type AppearancePreferences = {
   // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
   // types.
   /* 'light' | 'dark' */
   colorScheme?: ?string,
-|};
+};
 
 export interface Spec extends TurboModule {
   // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
-  +setColorScheme?: (colorScheme: string) => void;
+  +setColorScheme: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

packages/rn-tester/js/examples/Appearance/AppearanceExample.js

@@ -8,31 +8,26 @@
  * @flow
  */
 
-import type {
-  AppearancePreferences,
-  ColorSchemeName,
-} from 'react-native/Libraries/Utilities/NativeAppearance';
+import type {ColorSchemeName} from 'react-native/Libraries/Utilities/NativeAppearance';
 
 import {RNTesterThemeContext, themes} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {Appearance, Button, Text, View, useColorScheme} from 'react-native';
 
 function ColorSchemeSubscription() {
-  const [colorScheme, setScheme] = useState<?ColorSchemeName | string>(
+  const [colorScheme, setColorScheme] = useState<?ColorSchemeName | string>(
     Appearance.getColorScheme(),
   );
 
   useEffect(() => {
     const subscription = Appearance.addChangeListener(
-      (preferences: AppearancePreferences) => {
-        const {colorScheme: scheme} = preferences;
-        setScheme(scheme);
+      ({colorScheme: newColorScheme}: {colorScheme: ?ColorSchemeName}) => {
+        setColorScheme(newColorScheme);
       },
     );
-
-    return () => subscription?.remove();
-  }, [setScheme]);
+    return () => subscription.remove();
+  }, [setColorScheme]);
 
   return (
     <RNTesterThemeContext.Consumer>