Start a Project

Dark Mode in React Native

Dark Mode in React Native

In this blog, We are going to implement the dark mode in our react native application. First of all, we have to know the benefits of this Dark mode.

Benefits Of Dark Mode

Dark Mode is a very commonly used feature that most commonly used and famous applications have support for dark mode now. iOS and Android added dark mode support to their platforms within the last year, which means that it’s easier than ever to support this feature in your app. It is a great way to enhance the user experience for a mobile app.

So in this blog, we are going to create a demo application that contains a <text> and a <Switch> and some other custom components. We can change the app theme by just switching the Switch to enable or disable dark mode.

So Let’s get started.

Requirements

Firstly, We are going to create a new product. You can skip the creation of a project if you already created it.

Open a terminal window and run the above command you can create a new react-native project. In my case, I have named my project “DarkModeDemo” you can change it as per your requirement.

After this, we need to make some changes to our native code.

For Android devices, there is no specific command to bind the native binaries. It is a two-step process.

First, open android/app/src/main/AndroidManifest.xml and add a uiMode flag.

After this, we need to import some third-party libraries by using below mentioned commands.

Open the terminal window and install the react-native-appearance library.

or

Now, go back to the terminal window and install the styled-components library.

or

Now our all configuration gets completed.

Let’s do some real code……..

Firstly we create Two theme classes that will hold our theme are following.

  1. dark.js

2. light.js

Now we have to create our theme manager class that will be responsible for entire changes.

ThemeManager.js :

I know the code is a little bit complicated for beginners but no issue you will understand this code very soon because my next blog will be on react hooks that we used in this class. I will mention the blog link soon in the description.

Here is our last class App.js :

One thing I have to tell you is that I have placed all those classes in the root path because many of my readers ask me for the files because they don’t get the file at the imported path so I have put all the files on the same path (Root).

Here we got the result :

I hope this blog will help you to implement the dark mode feature in your react native app.

Exit mobile version