React native colorScheme

Question

I need to know the colorScheme of the device.

I've found two ways to know, but I don't understand what the difference is between the two.

Which one do you recommend to use and why?

useColorScheme

import { Text, useColorScheme } from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

Appearance

import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Answer 1

The useColorScheme() React hook gets the current user preference and then subscribes to changes. This means that there is an immediate read of the preference and then automatically updates on change. It's a bit confusing because the hook does come from the Appearance module.

From the docs:

The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).

Appearance.getColorScheme() reads the user preference one time. If the user, or schedule, changes the preference while the app is active, the app will not update. However, an event listener can be configured to monitor preference changes and allow the app to respond to change.

useColorScheme() does seem to be simpler for most apps.

Answer 2

useColorScheme just show color Scheme , and called Appearance module, for set that you should use Appearance , for more info see this: Link