Add dark mode to your react native app

Dark Mode was introduced in iOS 13. It adds a darker theme to iOS and allows you to do the same for your app. It’s a great addition to give to your users so they can use your app in a darker design.

In this blog post, we are going to see how to add it in your react native app very quickly with React navigation v5 and Expo.

Create the expo app

if you dont have the expo-cli installed run this before:

npm install -g expo-cli

and then :

expo init

Adding navigation

Let’s install React navigation(latest version v5)

yarn add @react-navigation/native

We need to install a few more libraries for this to work.

In the project directory, run

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

This will install versions of these libraries that are compatible.

We have React navigation installed in our project we can start using it by creating a simple stack navigator with 2 screens.

• Install the stack navigator

 yarn add @react-navigation/stack

• Imports

_import_ { createStackNavigator } _from_ “@react-navigation/stack”;
_import_ { NavigationContainer } _from_ “@react-navigation/native”;

• Create the stack

const _Stack_ = _createStackNavigator_();

Adding dark mode support

Now we want to provide light and dark themes based on the user preference.

• Let’s install react-native-appearance to detect the operating system color scheme preferences.

expo install react-native-appearance

• Then, in app.json, under the ios key we need to add "userInterfaceStyle": "automatic"

"ios": {"userInterfaceStyle": "automatic"}

• Now we can import AppearanceProvider and useColorScheme(return the operating system color scheme)

_import_ { AppearanceProvider, useColorScheme } _from_ “react-native-appearance”;

• React navigation provide by default a Dark theme and a defaultTheme we can import it and use it

_import_ { DefaultTheme, DarkTheme } _from_ “@react-navigation/native”;

When I change the color scheme of my operating system, the theme of my app changes automatically. Cool 😍

But we can notice that the text is not displayed when the theme is dark because this is a black text in a black background. We can adjust the text color by using the current theme color text.

To gain access to the theme in any component that is rendered inside the navigation container: we can use the useTheme hook. It returns the theme object.

The colored text automatically adapts to the current schema.

Custom themes

Instead of using themes provided by React navigation we can create our own themes.

A theme is a JS object containing a list of colors to use. It contains the following properties:

• dark (boolean): Whether this is a dark theme or a light theme
• colors (object): Various colors used by react navigation components:
• primary (string): The primary color of the app used to tint various elements. Usually you'll want to use your brand color for this.
• background (string): The color of various backgrounds, such as background color for the screens.
• card (string): The background color of card-like elements, such as headers, tab bars etc.
• text (string): The text color of various elements.
• border (string): The color of borders, e.g. header border, tab bar border etc.
• notification (string): The color of Tab Navigator badge.

When creating a custom theme, you will need to provide all of these properties.

Done ✅

This is what i wanted to share with you today, thanks for reading.

Visit my blog or my youtube channelfor more content.