React Native Dark Mode Made Easy: A Complete Guide

Here is the rewritten article:

Implementing a Theme Switcher in React Native: A Step-by-Step Guide

In today’s digital landscape, almost every website and mobile application offers a dark mode or alternative color scheme to the default one. This feature provides users with the flexibility to choose how they want their app design to look. As developers, it’s essential to design for each user’s preference, whether they prefer light mode or dark mode. In this article, we’ll focus on implementing a theme switcher in a React Native application, covering the setup, understanding the useColorScheme Hook, styling text according to the color scheme, switching between light and dark themes dynamically, and adapting the app theme to system settings automatically.

Setting Up Your Project with Expo

If you’re developing React Native apps with Expo, you’ll need to make a small change in your app.json file. Add the following lines to accommodate both dark and light themes:

json
{
"expo": {
"theme": "automatic"
}
}


This allows you to dynamically retrieve the color scheme of your device.

Understanding the useColorScheme Hook

Before building our theme switcher, let’s familiarize ourselves with the useColorScheme Hook. This Hook enables us to subscribe to updates on different color schemes, providing access to the device’s color scheme, which could be light or dark. It returns a value that shows the current color scheme preferred by the user.

Styling Text According to the Color Scheme

With the value returned by useColorScheme, we can design for when users choose either dark or light mode. Let’s examine the code snippet below:

import { useColorScheme } from 'eact-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();

return (
    <View>
      <Text style={{ color: colorScheme === 'dark'? 'white' : 'black' }}>
        Hello, World!
      </Text>
    </View>
  );
};

In this code, we’re styling our text according to the color scheme. When users select dark mode, we style the text with white color to make it visible in dark mode. Conversely, we style the text with black color when users are in light mode.

Switching Between Light and Dark Themes Dynamically

So far, we’ve explored how to check the current mode or color scheme of our device. We’ve also seen how to use the returned value of the useColorScheme Hook to style our application accordingly. In this section, we’ll look at how to switch between themes dynamically and persist in the current state of our theme.

First, let’s install the async-storage package, which allows us to save JSON strings in our device’s local storage. Then, create a ThemeContext component to house our theme’s context and current state.

Adapting App Theme to System Settings Automatically

The final step is to detect the system color scheme and accurately switch the theme of the application accordingly. We’ll modify the code we already have above to accomplish this.

By following these steps, you can create a React Native theme switcher app that adapts to the user’s system settings automatically. The full project code is available on GitLab. If you have any remaining questions, feel free to comment them below.