Zero to Dark Mode in React Native

With the releases of Android 10 and iOS 13, mobile users and developers of these platforms gained a new system-wide feature: dark mode. I prefer dark UIs so I was stoked for this feature! Echobind designer Michael Dang recently outlined some of the advantages of dark theme user interfaces.

For now, the user’s preference for dark mode isn’t available in React Native out-of-the-box ☹️ Although, it appears a new Appearance API providing access to the user’s preference for dark mode should be available in React Native sometime in the future since iOS support has already landed on master.

Fortunately, there are several packages available on npm that provide this functionality 😊 . Two popular packages are react-native-appearance and react-native-dark-mode. I prefer react-native-appearance because I like that it’s maintained by the Expo organization and is officially supported in managed Expo projects.

To detect the user’s preference for dark mode on supported platforms (Android 10+, iOS 13+) just add react-native-appearance to your React Native project, import the useColorScheme hook, and you’re off to the races! 🏇

Let’s look at a minimal example:

import * as React from 'react';
import { Text, View } from 'react-native';
import { useColorScheme } from 'react-native-appearance';

const colorSchemes = {
  light: {
    background: '#fff',
    text: '#333',
  },
  dark: {
    background: '#333',
    text: '#fff',
  },
};

const DarkModeExample = () => {
  const colorScheme = useColorScheme();
  const colors = colorSchemes[colorScheme] || colorSchemes.light;

  return (
    <View
      style={{
        alignItems: 'center',
        backgroundColor: colors.background,
        flex: 1,
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: colors.text, fontSize: 24 }}>
        zero to dark mode
      </Text>
      <Text style={{ color: colors.text }}>
        color scheme: {colorScheme}
      </Text>
    </View>
  );
}

export default DarkModeExample;

The example provided is intentionally minimal. It’s just enough to determine if dark mode is enabled and modify styles accordingly. You may choose to pull the userColorScheme hook into individual components as we’ve shown in the example, or you may wish to take things a step further and integrate dark mode into your app-wide theme. The power is yours, but it’s up to you how you use it. Now go forth and dark mode all the things! 😎

See also:

• Appearance — Expo Documentation
• Dark Mode — Visual Design — iOS — Human Interface Guidelines