Build Real-World React Native App #8 : implement Dark mode

Build Real-World React Native App #8 : implement Dark mode

Build Real-World React Native App #8 : implement Dark mode

In this chapter, we are going to implement a new feature in our app. The feature is called dark mode which is very prevalent in the app nowadays. The dark mode is configured into any app to make it night friendly or low light friendly. To implement the dark mode into our react native application, we are going to use the features of react-navigation and react-native-paper. This will make it easier to trigger the dark mode manually through the app itself. The aim is to make use of React Context to change the theme of the overall app. The interesting thing is that there won’t be any re-render of components while changing the theme. We are also going to make use of the higher-order function to apply theme props to different screens and components.

We are going to implement the Settings screen in which there will be a switch to trigger on and off the dark mode. We are also going to make use of the react-native-dark-mode package. Finally, we are going to implement the configuration by which the app will automatically go into a dark mode when switching into a dark mode in the device itself.

Initial setup

First, we need to go to Navigator.js and import the theme components from react-navigation as shown in the code snippet below:

Then, we need to import the required components for dark theme and theme properties from a react-native-paper package as shown in the code snippet below:

Then, by using PaperProvider and theme prop we need to pass dark theme as a parameter as shown in the code snippet below:

As a result, the overall UI interface theme of the app will automatically change to dark as shown in the emulator screenshots below:

Trigger dark mode in React Native

Trigger dark mode in React Native

 

Changing Theme with React Context

Here, we are going to control theme configuration by using React Context. We need to create ThemeContext and a global function named toggleTheme and theme variable to access the theme value as shown in the code snippet below:

Here, we have created a new file name ThemeCotrotroller.js with state variables and ThemeController functional component.

Activate context

To make context accessible in every child component, we need to go to App.js  and import ThemeController to this file as shown in the code snippet below:

Then, we need to wrap the Navigator class with ThemeController as shown in the code snippet below:

Next, we need to come back to Navigator.js and import useContext and ThemeContext as shown in the code snippet below:

With the help of the useContext hook, we can access theme value easily. Then, we can use value to change theme as shown in the code snippet below:

Now, to create a theme switch button, we will use Setting.js screen. First, we need to import ThemeContext in the Setting.js file as shown in the code snippet below:

Now, we can use the functions and variables as shown in the code snippet below:

Next, we use the Switch component to switch theme which depends on the theme variable used for switch status as shown in the code snippet below:

Now, we can try to switch the theme from light mode to dark mode and vice-versa using the switch button in the Settings screens as shown in the emulator screenshot below:

Activate dark mode

Activate dark mode

Change Theme on HTML

Since react-native-render-html does not depend on react-native-paper and react-navigation package, the theme for HTML elements in the screen doesn’t change automatically. Hence, we need to make a higher-order component named withTheme from react-native-paper and then inject theme value into it.

For that, we need to import withTheme component to a screen that uses the react-native-render-html package as shown in the code snippet below:

Now, we need to wrap component name with withTheme function while exporting as shown in the code snippet below:

Hence, we can pass theme as a parameter in this component now as shown in the code snippet below:

For now, we will change the style of color using the following theme value:

Now, if we change the theme of the app again, we will get the following results on our emulator screen:

Dark theme in HTML zone

Dark theme in HTML zone

No re-render problem

Now, our final problem is that the react-native-render-html components do not re-render when the theme changes. To force the components of this package to change the style. We add key prop as shown in the code snippet below:

Now, if we change the theme of the app, we will get the result as shown in the emulator screenshots below:

Solve React Native render HTML in dark mode

Solve React Native render HTML in dark mode

 

Change theme on SinglePost Screen

In SinglePost screen, we have used the components from a react-native-render-html package. So, we start here by adding a theme in FlatlistItem. First, we need to import withTheme Component as shown in the code snippet below:

The withTheme module is a higher-order function provided by the react-native-paper package. When applied to a component, it injects the theme instances and objects into the component props. Then, the instances and methods provided by it can be accessed through the component’s props.

Then, we need to wrap the SinglePost component before export as shown in the code snippet below:

Then, we need to inject the theme variable into its parameter as shown in the code snippet below:

Next, we will use the theme variable to change the HTML tag styles. The coding implementation for this is provided in the code snippet below:

Then, we need to add a theme to the icon as well:

Hence, we will get the following result on our emulator screen:

Add dark mode to icon

Add dark mode to icon

As we can see, the overall theme of the SinglePost screen also changed to dark.

Hence, we have successfully added the dark mode themes to different screens in our app and also configured the manual trigger in the Settings screen.

Conclusion

This chapter is the most interesting one in which we learned how to change the theme to React Native. Dark Mode is a popular feature in the latest Android updates. Many users prefer using dark mode in the device itself and especially the apps. Here, we got the detailed stepwise guidance on how to implement dark mode theme changes in the React Native app. The interesting part was to change the theme using the packages involved and manually trigger the theme change using the switch in the Settings screen. The in-built modules in react-navigation and react-native-paper packages made this implementation easier and simple.

Now, that we know how to change the theme to dark mode. We can try implementing some different themes to the UI giving a more modern look.

In the next chapter, we are going to learn how to handle the Offline mode in a React Native app.

All codes are available on Github.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Build Real-World React Native App #9 : Implementing Remove Ads Feature

One of the simplest ways to make money from apps is through Advertisements. Hence, we have a popular ads network for mobile that is Admob. There are ...

Build Real-World React Native App #6: Show Bookmark and Categories

Here, we are going to implement the list view of bookmarked posts in the Bookmark screen and also work on implementing the Categories screen. For the ...

Build Real-World React Native App #4 : Content Placeholder

Placeholders are an essential addition to the overall UI of any app. They enable us to show the temporary image or text until the actual data loads. ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy