Implementing light and dark modes in React Native apps

Mobile users can easily change the display setting on their phone depending on their eyesight. This is the method of toggling between dark and light modes. Some prefer light mode while others prefer dark mode. Let’s learn in this blog the process of adding dark and light display settings in a React Native app, as practiced by React Native app development company.

For this project, we need to start from the content of the prerequisite.

Environment setup for Implementing light and dark modes in React Native

The first task that you have to execute is setting up the environment for the framework you have chosen. Here, as we are working on the React Native framework, we have to get our dev system familiar with it. You have to download NodeJS, VS code editor, and Android Studio.

Note that when working with an app development work, you have to get all the SDKs. These are the tools to create a codebase, debug your app, and set up the emulator.

Also, you need to direct the paths for SDKs of Android and Java.

You can check the linked article if you don’t know where to start.

A template for the project

Without completing this task, you cannot proceed further. You need some storage place to store your codebase. Right? This is what the template folder will work as. Let me show you the simplest way to create one.

1. Make a new folder (ReactNative_Project) in the C drive. You can make it on another drive but it is recommended to choose your C drive.
2. Open a new cmd and pass cd ReactNative_Project. This will let you get into the ReactNative_Project folder.
3. Now pass npx react-native init dark_light –version 0.68.1. Also, click on the enter key. The template will be created with the name dark_light in your C drive.

Your template will be built. As you have created the folder, you can add the codebase.

Codebase in the App.js folder

Open the template dark_light and go to the App.js file. You have to conduct this operation from your code editor.

If you have worked with this framework earlier, you should know the most fundamental task in creating the codebase is to import relevant components, either from the core React Native library or any other third-party library.

Here, we have imported useState, StyleSheet, Text, View, Switch, TextInput, useColorScheme, and the entire React.

We have chosen two native libraries. One is the react-native and the other one is the react. Here, StyleSheet, TextInput, Switch, and View are for the user interfaces whereas useState and useColorScheme are the hooks of React Native.

Using React Native hook, you can skip converting your functional codebase into a class codebase and easily manage the state. We will learn more about the application of hooks (useColorScheme and useState) later in our codebase.

You may or may not import React from the react library. This is a way of getting all the components available to the react library in the codebase.

The App is the React component. It is the main component of this project. It renders a div element with an h1 tag embedded in it.

The code also specifies a variable called DarkMode. It has two values, either true or false. It will be true if the color scheme of the user is dark. In other cases, the value of DarkMode is false.

Here, the code uses the useState hook. A state variable dark is introduced. An array is created with two elements namely dark and setDark. If there is any change in the value of dark, setDark is used to update the change in its value. Using the useState, you can set the initial value of the state variable. Here, it is set to DarkMode.

The code returns a Switch and a View element. The container is created with the View component. Styling is used for the container. The content of the container is justified at the center position. Also, the alignment of its items is at the center. The value of flex is set to 1. Since it is based on dark and light display modes, the background color cannot be the same. It will vary based on the display mode. So, the code uses a conditional operator to set the background color of the container. It is black if it is in dark mode or else it is white.

The Switch component is used. It further uses two parameters namely onValueChange and value.

As initially, it is in dark mode, the event handler onValuechange is used to call setDark and update the change when the user switches it to light mode. Also, it will be used when the user again switches it to dark mode and vice versa.

One Text component and two TextInput components are used. The Text component is used to add the text ‘Login’ to the button. However, TextInput is used to add two placeholder texts: ‘Email’ and ‘Password’.

It is a login app and hence these placeholder texts are used.

The most interesting thing in this snippet is that it uses the conditional statement using the (:) operator. This is used for all three text elements. (:) is used to set the color of the texts. It is white, if the display mode is in dark, or else it will be black for the ‘Login’ text and somewhat charcoal for the placeholder texts.

This is the last section of your codebase where you need to export the App component and use the Stylesheet object. I have not stressed the StyleSheet object as my aim is to create the light and dark mode display interface.

However, before this, close all the tags.

To check the accuracy of the codebase

You can achieve this by running the program on a device. Let’s see how you can complete this task.

1. Create a new terminal from your template folder.
2. Then pass npm install.
3. Also, run npx react-native run-android.

If it starts bundling, you have successfully created the project and there is no bug in your codebase.

The output will show as shown in image 7.

If you have faced any bugs, you have to check the setup process or the codebase.