Switch Between Dark Theme And Light Theme Mode In React Native & Expo Apps

How to Add Dark Theme Mode in React native & Expo Applications | Javascript Code

Dark And Light Theme Mode In React Native & Expo

Project setup and Package Requirements

Project Algo & Code

  • I am setting the project for two-screen bottom tab navigation. You can add more than two screens. It depends upon your project requirements. I named the first screen “Home Screen” and the second screen “Profile Screen”. On the home screen, I used the toggle switch button to toggle between the light theme and the dark theme.
  • In this project, We have to manage the global state. Why? Because when we toggle the switch to dark theme mode on the Home screen then the Home screen as well as the Profile screen must render the Dark Theme mode. Here, the Toggle switch is acting as a global switch. Now, to deal with the global state, I am using react native event listeners. The code of the switch component in the App.js will be something like this:
<Switch 
value={darkMode}
onValueChange={(value) => {
setDarkMode(value);
EventRegister.emit('changeTheme', value)
}}

/>
  • Of course, you have to use a DarkMode useState hook to manage the changes in the state of the switch.
  • Next, inside App.js, we need to do some changes to handle the global state change.
useEffect(() => {
const listener = EventRegister.addEventListener('changeTheme', (data) => {
setDarkMode(data)
console.log(data)
})
return () => {
EventRegister.removeEventListener(listener)
}

}, [darkMode])
  • Next, make a folder inside the root directory, let's say “theme”. Inside the theme folder, make two javascript files, “theme.js” and “themeContext.js”
  • Inside the “theme.js” I stated the dark and light theme.
const theme = {
light:{
theme:'light',
color: 'black',
background: 'white'
},
dark:{
theme:'dark',
color: 'white',
background: 'black'
}
};

export default theme;
  • In the themeContext.js. A one-liner code is used for the theme Context.
import React, { createContext } from "react";

const themeContext = createContext({});

export default themeContext;
  • Use this themeContext provider and wrap it over the react-navigation container.
<themeContext.Provider value={darkMode === true ? theme.dark : theme.light}>
<NavigationContainer theme={darkMode === true? DarkTheme : DefaultTheme}>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
</themeContext.Provider>
  • Add the theme context to the styling of the Home and Profile Screen
  • That’s it. Now, test your application in the expo go application.
  • If you are confused or lost. Then I would recommend you to watch the step-by-step dark theme implementation in this video.

Why do I suggest more to watch videos?

Well, I am from India. I love to write codes and share them with the community. We all know that money is the ultimate motivation to do work and the Medium payment system works on Stripe which is in preview mode in India for the past 4–5 years. I waited for 1 year on the Medium platform but in the end, nothing worked. So, I started making YouTube Videos. I want to make a living.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store