Day and Night theme with React Native

On the left we have the “Day” theme and on the right we have the “Night” theme.

Hello all, today we are going to dive deep into developing a themed application with react native. There are a number of ways to do that i.e. using global state like redux but for our case we shall be using React Context API. Here are a few things we will be done within a short time.

1. Build an application that will detect the default theme of the phone and adapt to that theme.
2. Let the user override the default theme of the phone and store the user’s theme preference so we can later retrieve and apply the setting when the application is opened at a later time.
3. Do all those we mentioned above, neatly and professionally that can allow our application to be scaled up and down with ease.

What you should know by now?

This tutorial is targeted at developers with at least basic knowledge of react and react-native, if you don’t find yourself comfortable with the development in those libraries, I suggest you first learn the basics down to intermediate from other sources.

Getting Started

I will be working on this project and using Github as a repository so feel free to check and compare it with your implementation at https://github.com/Yoncity/LetsGetThemed.git

So here are a few of the libraries and packages that we are going to use today to achieve our objective.

1. react v17.0.1 and react-native v0.64.1 or above.
2. @react-navigation/bottom-tabs that you can learn more from https://reactnavigation.org/docs/tab-based-navigation/
3. @react-native-async-storage/async-storage that will use to store the custom user theme preference, that you can learn more from https://react-native-async-storage.github.io/async-storage/docs/.

Overall Project Structure

app
|---components
|  |------Header
|     |------index.js
|     |------style.js
|  |------AsyncStorage.js
|  |------ThemeManager.js
|---constants
|  |------StorageKeys.js
|---hooks
|  |------useTheme.js
|---screens
|  |------Home
|     |------index.js
|     |------style.js
|  |------Settings
|     |------index.js
|     |------style.js
|---style
|  |------colors.js
App.js

Get Busy…

First off, lets get started by creating / initializing a brand new react-native project using npx react-native init LetsGetThemed .

This will create a react-native project with the name “LetsGetThemed” with default react-native template.

We can proceed by defining the colors that we shall use for our application. They will be defined in app/style/colors.js .

app/style/colors.js

Now, we can create ThemeManager.js file in the app/components folder as seen below.

app/components/ThemeManager.js

So let us break down the code above. Firstly, we started by creating a context called ThemeContext, and then we went ahead and provided a way we can pass the values of the context to children by creating a ThemeContext.Provider and putting it in a functional component so we can change its state easily.

Then let us go ahead and create a AsyncStorage.js file, that will help us store the custom user theme preference so we can retrieve and set it later. Let’s create this file on app/components/ folder.

app/components/AsyncStorage.js

And once we have setup the AsyncStorage and ThemeManager, we can proceed to creating a Custom Hook that will help us retrieve and set themes. So we will create a useTheme.js file under app/hooks/ folder.

app/hooks/useTheme.js

This file is what most of our next screens will be interacting with and if it is hard to understand, dont worry, you can first learn about creating custom react hooks. And as time passes you will get familiar with it.

So if we are to dissect it, we first have the reference to the ThemeContext we created a while back, so we can retrieve the values.

Then we have the function readTheme that we will use to read the user’s custom set theme preference. If the user has not set a custom manually, it will go with the default device theme.

And lastly, we have the function updateTheme that we will use to save the user’s custom theme.

Now, most of the heavy lifting is done, what’s remaining is creating the Home and Settings Screens and placing them in a bottom tabbed navigation.

This is the Home Screen created in the app/screens/Home

app/screens/Home/index.js

So now we shall create style.js function that takes in color as a parameter to be sent from the functional component after invoking the useTheme hook.

app/screens/Home/style.js

And below you will find the Settings screen created under app/screens/Settings

app/screens/Settings/index.js

And lastly, we can create the style.js file for styling the Settings screen.

app/screens/Settings/style.js

LetsGetThemed application built and running on Android.

The Takeaway

Day and Night themed application design is gaining popularity nowadays and implementing this from Android Studio natively is so much easier as you simply have to create a different theme style file and place it in values-night directory and android will do most of the heavy lifting for you, but that is not the case for react native.

And what frustrated me is that in previous tutorials I watched, they were combining the design/style in the file that contains the screen or the functional component just so they can include the theme’s logic. And with the idea of file separation in mind, I was able to come up with a simple and modular approach.

If you found it helpful, don’t forget to give it a clap, and please do share your thoughts in the comment section. Thanks for taking your time and reading my story.