2 Easy Ways to Add Dark Mode in a React Native Application

Learn how to leverage Appearance and Navigation to implement the dark theme in just a few steps.

Introducing themes is a great way to customize the style and appearance of screens in mobile apps. As developers, you may remember the daunting era before React Native when theme integrations used to be tedious, complicated tasks.

But now, implementing a dark theme and switching between the dark and the light modes has become easier than ever, thanks to the modern theme implementation capabilities of React Native. Let’s explore the various ways in which React Native helps developers implement the dark theme.

Different Ways to Implement a Dark Mode

🔥 An application’s theme can be changed in two ways:

1. By manually changing the theme in the application
2. By changing the system theme of the device

Let’s learn how to work around both scenarios and make an application compatible with dark mode.

Of course, there are several ways to implement dark mode in a react native app. But I’ll save you some time and share with you the two most efficient ways that have worked very well for our team at Simform.

1. Using Appearance

As a core React Native module, Appearance is used for making theme changes on an underlying device. Here’s how to implement the dark mode using Appearance:

Begin by importing the useColorScheme() hook from react-native.

import { useColorScheme } from 'react-native';

Now, use the useColorScheme() hook to identify the theme of your default system. Here, as you will see, the value will change to‘dark’ if the default theme is dark and ‘light’ if the default theme is light.

Using the appearance, you can find out whether the existing theme is dark or light and then, adjust the style accordingly.

2. Using Navigation

Initially, set up react navigation for your project.

After setting up the navigation in your route file, write the following code:

Once your route file has been done, import DarkTheme and DefaultTheme from react-navigation/native, check whether the scheme is dark or light, and set DarkTheme and DefaultTheme accordingly.

It will reflect default colors, and you need to get those colors from useTheme() imported from react-navigation/native.

In your jsx file, enter the following code:

When to use Appearance to implement dark mode

If the app contains a toggling feature for changing the theme, the best way to handle it is by storing value in local storage at your convenience. I am using async storage for storing theme values in local storage.

First, you need to create a colors.js file as per your preference like this,

After creating the colors.js file, set up async-storage 💾 in your project and create methods for receiving and saving data from storage.

Note: You can use async storage or redux to store data locally.

Then, create an async storage function in the storage.js file, as shown below:

Once your function is ready, write code for it in your app.js file to handle the initial installation of the app. Do this when you need to save your default system theme appearance in the local storage.

Note: Here, I have used a real-time scenario to handle the theme. If your app is being installed for the first time on the device, you need to set a theme as the default theme of the device. Later, if you change the theme in the app, it will change accordingly, such as to “Light Mode 🌝 ,” “Dark Mode 🌚 ,” or “System Default.”

Insert the following code into the App.js file:

Once this is done, design your screen and manage the themes based on your logic. I have implemented my own logic to manage themes using async storage. You can see it in the code below ⬇.

Here, I have managed dark mode logic using switch cases. And for the UI to change the theme, I have used radio buttons. You can see the output by changing the theme in the application.

🚀 For the complete source code, check out the repository on GitHub. 🚀

When to use Navigation to implement dark mode

If the app contains the default theme of the device on which it is running, we need to write it as we discussed above in the navigation example.

First, you need to change the colors object to dark and light in the colors.js file.

Once the colors object is set, import the Colors in the AppNavigation.js file and write code as follows:

import Colors from '../theme';
<NavigationContainer theme={theme === 'dark' ? Colors.dark : Colors.light}>
   //....add navigation screen
</NavigationContainer>

The code will check whether the system theme is ‘dark’ or ‘light’, and it will set the colors object accordingly.

Check out the whole AppNavigation.js code below:

After setting up the theme colors object in navigation, you will be able to use that object in your styles.

Now you can design according to your preferences, apply theme-based colors, and look at the output.

In your jsx file, enter the following code:

Here, you can see the output by changing the system theme of the device.

🚀 For the complete source code, check out the repository on GitHub. 🚀

Closing thoughts

The implementation of themes has become a common practice in modern mobile application development processes. Particularly in the case of React Native apps, changing themes between dark and light has never been easier. The easiest approach to implementing a dark mode is through Navigation, but if an app has a toggling feature, then using Appearance is the best way to go about it.

To learn more about engineering at Simform, check out the rest of our Engineering Blog, and visit our Simform site. To view and apply to open opportunities, visit our Careers page.