Implement Dark Mode in Android and iOS Apps with React Native and Redux

Tools and Packages

• React https://reactjs.org/

• React Native https://reactnative.dev/

• Redux https://redux.js.org/

• React Navigation https://reactnavigation.org/

• Appearance https://reactnative.dev/docs/appearance

‍

Let's start

1 - React Native Bare Project

First, we need to set up the environment. We are going to create a React Native App and then install the required packages.

The app will be named ReactNativeDarkMode, but you can put whatever you want as a name.

In your preferred terminal run the following command:

2 - Redux and React-Redux

Redux is a predictable state container for Javascript apps. Because Redux can be used with many frameworks and libraries that's why along with redux we need to install react-redux.

Add the packages running the following command in your terminal:

3 - React Navigation

React Navigation is a library that holds Routing and navigation for your React Native(RN) app. This library is being used by many developers lately. And personally I think it is robust and a great choice to hold Routing and navigation in RN. It´s also a great choice if you want to have a default theme in your app and apply it to all screens.

According to the official documentation, to install React Navigation we need to run the following commands:

1. React Navigation: npm install @react-navigation/native
2. React Navigation Dependencies: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3. iOS pod configuration: npx pod-install
4. Basic Stack navigation: npm install @react-navigation/stack

4 - Appearance configuration on Android

React Native Appearance module has a known bug (Please check #28823) that cause change theme listener not working. In order to fix this bug we need to install another package called react-native-appearance‍

So we need to run the following commands:

Then, in order to have properly configured the Appearance module for React Native, we should modify the android/app/src/main/java/com/reactnativedarkmode/MainActivity.java file.

We need to add the following lines to the file:

App Implementation

1 - Let's start with a simple App.js file

Modify the App.js file with the following code:

2 - Next we are going to add a very basic implementation of Redux and react-redux to hold the App state

In the App.js file add the following lines:

3 - Now we are going to add the React Navigation to our app

In the app root folder create the following file src/screens/HomeScreen.js, folders should be created as well.

In the HomeScreen.js file create a very simple functional component:

In the app.js file modify the file as follows:

‍

export default App;

4 - It's time to add the Appearance module

to our app. Let's do it

The Appearance module has an event listener that listens when the user or the system (scheduled color scheme change at sunrise or sunset) change the preferred color scheme. So we are going to add that listener when the application first starts in the App component.

To be more clear let's move the NavigatorContainerComponent to another new file. Create a new file src/NavigatorContainerComponent.js

Let's write the code for the new component:

5 - Add an action and save the theme to the redux store

‍

First, we need to create a type that will be responsible for changing the theme. In order to do that we need the create a new file ./src/types.js and modify as following:

6 - Sixth and last step, get state from Redux and use in all components

First, we need to pass the theme to the React Navigation Container, in order to do that we need to modify the src/NavigatorContainerComponent.js file as following:

‍

In the next link you can check how to leverage React Testing Library

DarkTheme and DefaultTheme have many properties that may help to be consistent using colors.

• dark (boolean): Whether this is a dark theme or a light theme
• colors (object): Various colors used by react navigation components:
• primary (string): The primary color of the app used to tint various elements. Usually, you'll want to use your brand color for this.
• background (string): The color of various backgrounds, such as background color for the screens.
• card (string): The background color of card-like elements, such as headers, tab bars, etc.
• text (string): The text color of various elements.
• border (string): The color of borders, e.g. header border, tab bar border, etc.
  
  

If you'd like to take a look at the complete code used in this post, head over to Francisco's GitHub project.

‍

‍