useColorScheme

useColorScheme() returns 'light' or 'dark' (or null without the native Appearance module) and re-renders your component when that changes. In React Native 0.86 36,878 it is a thin layer over React 7,897 's useSyncExternalStore(), which reads a value from outside React and subscribes to its changes:

node_modules/react-native/Libraries/Utilities/useColorScheme.js (excerpt)JavaScript
const subscribe = (onStoreChange: () => void) => {
  const appearanceSubscription = addChangeListener(onStoreChange);
  return () => appearanceSubscription.remove();
};
export default function useColorScheme(): ?ColorSchemeName {
  return useSyncExternalStore(subscribe, getColorScheme);
}

On Android, AppearanceModule emits the change when the activity's night mode changes, re-rendering every caller (Building a Dark Mode Toggle logs it). A StyleSheet.create() that reads Appearance.getColorScheme() at load time keeps its first answer forever, so call the hook inside components.