How to add custom themes to your mobile app using React Native and Expo. by Ed Rutherford | November, 2022

Configure Light Mode and Dark Mode Themes in Your Apps

Add Custom App Theme!

Ah subjects! Love them or hate them, themes are all around us! Our operating systems offer custom theme options (some more than others), many popular web browsers allow custom theme extensions to be installed… and of course, our mobile phones do too!

Although mobile device themes can be a bit more limited than the other methods mentioned above, there are still inherent similarities between both iOS and Android. light And dark Topics for main applications.

As a developer, it has become important to keep themes in mind when designing and implementing new applications and features… no matter what the platform! In this article, we will specifically look at how we can do that when building a new Android app using React Native!

Before coding our app, it’s important to explain how we do it! The example application used for this article will be written almost exclusively in JavaScript Extended JavaScript (or JSX). This may come as a shock to those new to cross-platform development, who generally consider Java and Swift as the only way to build mobile apps. It’s true, Java/Kotlin as well as Swift/Objective-C are both the primary languages ​​used to build mobile applications for Android and iOS respectively… but they are not the only way!

Enter React Native:

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interface…

…create platform-specific versions of components so that a single codebase can share code across all platforms. With React Native, a team can maintain two platforms and share a common technology – React.

By using React Native, we will be able to take advantage of the power and flexibility offered by React, and also the ability to reuse custom components to build mobile apps that can run on both Android and iOS. .. same code base!

To set up our project, we will be using the excellent Expo framework and its CLI (Command Line Interface). Expo has become one of the most widely used tools for mobile development with React Native, not only because of how easy it makes starting a project, but also because of the wealth of libraries it supports as your app. And offers to customize the functionality!

To start things off, it’s important to make sure we have the following system requirements installed:

  • Node.js LTS release (it is important to use LTS specific release)
  • Gita
  • Watchman (for Linux/MacOS systems)
  • Yarn (not required, but recommended by Expo)

With that out of the way, it’s time to write some code! Open your preferred Terminal application or PowerShell, and navigate to the location where you plan to create your project directory. Once there, run the following to create a new Expo project:

npx create-expo-app example-app && cd example-app

Expo also provides the option to pass templates when creating a new project. To see the different templates, just run npx create-expo-app --template, And with that, our new project skeleton is ready and ready to go.

Alright, let’s move on to the good stuff! Now that we have our basic setup, we’ll go ahead and build some components to put together in a small example app to see how the theme can be used. The application will represent a store shopping list app, which adjusts its component themes depending on whether it is set on the user’s device light either dark way.

The first and arguably most important step for us is to create a set of colors for the theme of our app. This project uses a fantastic React Native framework react-native-paper, This will provide the key components used to build our UI. A great feature that can be found on their website is a generator for Material UI themes based on the primary color provided:

React Native Paper Theme Generator

This brilliant tool not only works hard to create proper light and dark color palette objects, but also follows material design Guidelines that all new versions of Android follow allow our app to effectively feel And See Like any other natively built application!

If you haven’t done so already, be sure to add the following dependencies to your package.json To install All Magic:

To use the theme objects we created earlier, go ahead and open your project App.js file and add them, as well as other import statements expo And react-native-paper ,

The gist above is where all the theming magic happens in our app! We declare our theme object using the color palette values ​​generated by react-native-paper, Expo provides an API to adjust the color of the top status bar depending on whether the device is set to dark either light mode, so we make sure to include that as well. The other important part of this code includes the use of useColorScheme Hooks when defining our two theme providers. This will allow our themes to be passed around and accessed by all child components in the app.

You must have noticed a special import statement in the above code which contains a . have been added MainNavigator Component. This is where the primary navigation functionality of our app resides, and uses another powerful and aptly named react-navigation framework to do so. Before we take a look at our navigator, let’s put together some small components to include in our UI:

With our component files defined, we can now go ahead and import them into our MainNavigator file, with navigation components provided by react-navigation ,

If you have paid close attention, you may have noticed the key lines of code that allow us to apply our custom theme colors to the components of the app. Let’s take a look at this section a little closer to see how it actually works!

import { ..., useTheme, ... } from 'react-native-paper';

that’s it useTheme Hooks that allow us to access custom theme objects passed down from the top of our application. To use these colors simply call the hook and store the return value inside a variable, like our PrimaryScreen Component:

Teaesting

To run our new project in live development mode, run npx expo start in the project root directory. This will launch an interactive command line utility that lets you choose which device to test your app on:

  • Test on a physical device using Expo Go Mobile App (Scan QR for easy setup)
  • Run on Android Emulator (using android studio,
  • Run on iOS emulator device (using xcode,

That wasn’t all that bad, was it? The process of implementing a custom theme can seem quite daunting to many developers, including me, at first. With the help of some amazing frameworks, though, this can be accomplished (relatively) painlessly!

Even though going through all the finer details of react native development was beyond the scope of this article, I hope it at least sheds light on the possibilities that exist to build and build. customizing Your own mobile application with the help of Expo and React Native.

Feel free to check out the entire source code for this project. Maybe this can provide some inspiration and guidance for your next mobile project!

Leave a Comment