The feature of light and dark modes is used by every mobile user on a regular basis. This increases the visibility of the app content in a different light mode. Have you wondered what is the code syntax behind integrating this feature?
If not, don’t worry. In this tutorial blog, I will explain to you the complete process of how you can use the React Native framework to embed a dark-light display mode in your app.
Prior-needed tasks
Firstly, you need to get the environment for the React Native framework. If you have already executed this step before in your project, skip this step. If not, you need to install the updated version of NodeJS, Android Studio, and VS code editor. If you don’t want to work on the VS code editor, you can install any other IDE. Also, I will recommend you to get the Marshmallow version of Android Studio. If you are looking for a reliable resource for learning the detailed steps of this environment setup, you can check the attached article.
In the second step, developers of React Native app development company build a simple template. It is required for every project to embed the code. I can guide you through the steps of building templates.
- Create a new folder. It can be in your C drive. Name it RN_PROJECT. You can name it differently.
- Open the command prompt. Type cd RN_PROJECT. It will take you to the RN_PROJECT folder.
- Here, you have to pass npx react-native init Lightdark –version 0.68.1. Note that, this is the command line to create the template. The name of this template is Lightdark and we are using the 0.68.1 version of React Native. If not the latest version, it is suggested to use the newer version of React Native.
- After clicking on the enter button, your template building will be done.
Now, you can add your codebase to this template. Let’s start the process.
Code-syntax for the project
Open the App.js file from the template that you have created recently and start editing the file.
Start your codebase by importing some RN components.
Image 1
You need StyleSheet, Text, View, useColorScheme, Switch, and TextInput from the react-native library. Also, your project needs useState and React from the react library.
Let’s discuss the use of these components and hooks in brief.
- StyleSheet- With StyleSheet, you can process colors, change font style and size and provide a presentable look to your app interface.
- Text- It is a core component of React Native used to display text elements.
- View- It is used to add the main container. Also, other elements like text and image is embedded under the View component.
- Switch- It is a component used to control boolean value. The possible values are either true or false.
- TextInput- It is somewhat different from the Text component and used to add any form of text. It uses some props like onChangeText.
- useColorScheme- It is a React Native hook. As the name suggests, it is used in the codebase to provide different schemes of color.
- useState- A React Native hook that is considered to set the initial value of the added state variables.
Image 2
A component named App is introduced in this codebase. useColorScheme hook is used to set the initial mode of the app display in dark. Also, useState React Native hook is used to specify the initial state of the dark. Here, dark is a state variable.
Image 3
The code snippets in image 3 render the View and a Switch element. The view element is the container in which the app will display.
The styling parameter used for the View element is flex, alignItems, justifyContent, and backgroundColor. It has a flex of 1, meaning that the container will cover all the space available. The content in the container is justified at the center and the same is the alignment of the items.
Here, the (:)operator is used to add the if/else conditions for the background color. The color of the background will be black if the display mode is dark or else it will be white.
The value of the Switch is set to a dark variable. The code uses the onValueChange prop to update the value of the Switch if there is any change.
Image 4
AView component is used to wrap two TextInput elements and a text element.
The Text component is used to display the ‘Login’ text. It has a font size of 22 pixels and is aligned at the center. The background color is set based on conditions. If the display is dark, the text will be in white color. However, if the display is in light mode, the text color will be black color.
TextInput is used to add two placeholders. The first TextInput is used to add the placeholder ‘Email’ and the other TextInput is used to add the placeholder ‘Password’.The same styling is used for both placeholders.
The placeholders ‘Email’ and ‘Password’ have a width of 340, height of 40, border width of 1, 30 as their horizontal margin, and 20 as its margin at the top. For the border color and text color, the (:) operator is used. The border color is white if it is in dark mode or else is black.
Image 5
Before proceeding further, you have to lose the two </View> tags. Then you have to use the StyleSheet component. Here, I have only used the loginText.
Executing the program on the virtual device
Let’s give a simple way to execute the codebase that we have created.
You have built the template. Right? Now, open the command prompt from that template. Run npm install. After the packages and dependencies are installed, you have to run npx react-native run-android. After some time, your emulator will start running and you can see the login app on the emulator. You can switch the display mode in dark and light as shown in image 6.
Image 6
Hope you have understood the process of integrating light and dark themes in your React Native app.
