How to activate the dark mode in react native app when android theme set to dark mode?

Question

I am developing a react native app which supports dark theme.

I used react navigation and created custom theme using React context. Now I can toggle between dark mode and light mode using a button. But I want to use the android theme (eg: dark mode) when opening the app. Which means if dark mode is enabled in the android, my app want to have dark mode enabled when opening the app.

Answer 1

Facebook is still working on adding appearance support: https://github.com/facebook/react-native/commit/63fa3f21c5ab308def450bffb22054241a8842ef

Until then, I'd recommend to use something like: https://github.com/expo/react-native-appearance

You can then retrieve the appearance settings of the device and load the appropriate stylesheets, with perhaps a fallback for non-dark mode or devices not supporting it.

Answer 2

You can use react-native-appearance :

import { AppearanceProvider, Appearance } from 'react-native-appearance';

export default () => (
  <AppearanceProvider>
    <App />
  </AppearanceProvider>
);

let colorScheme = Appearance.getColorScheme();

let subscription = Appearance.addChangeListener(({ colorScheme }) => {
  // do something with color scheme
});