Simple React Native Theme Provider
It is great to let users change the theme of your application. It allows the user customize and personalize their experience as they interact with the app. This article will show you in easy steps how to give users the ability to change the theme of a React Native application. Following useful guidelines from the Material Design Color System in a sample project, users will be able to choose different color themes in the app built with React Native using Redux for state management.
A few principles before diving into code. Great color themes follow recommendations of color guidelines laid out by the design system of the application platform (iOS, Android). In other words, colors are meant to be applied to UI elements and components in a meaningful way following specific guidelines.
With a specific focus on Material Design, color systems can help you create color themes that project your brand and style. This color system uses a simple method of applying colors to your UI. Typically, a primary and a secondary color are selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways. And you’re done! — okay, maybe not.
A good theme creates harmony between the colors where the text contents are accessible, UI components and surfaces are highlighted and distinguishable. You should take a look at the Material Design Color System to better understand the principles behind using a color system to create themes that are expressive, legible and organized.
Firstly, we need to set up a collection of all theme options we want to make available to the user. A theme contains a primary color, a secondary color and different shades of both. The code snippet below sets up the theme options with each key having the primary color, and the value mapping to an object having different variants of the primary and secondary colors. This can easily be generated with tools such as Material palette generator.
Next, we will define a component to show the different theme options. Using the primary colors used as the keys of the theme options defined in themeOption.js (shown above containing all themes we want to make available), color palettes are created that will set the theme of the application when pressed. This can be on a settings screen, however, it is based on your application setup. The color palette component for this sample project is on the side drawer. This navigation drawer is created with React Navigation. To learn how to customize React Navigation drawer to fit your application design, I recommend you go through this article.
After this, we set up the Redux boilerplate code to set up the initial theme when the application launches and an action to update the theme state.
To persist the theme of the app, we can save the theme primary color to AsyncStorage in an action creator.
Application theme can be retrieved from AsyncStorage when the application is launched and the value is used to update the store. This is done in the componentDidMount lifecycle method of your application root component. This can also be achieved using a useEffect in the root component of your project if you are using React Hooks.
So far, we have defined a set of theme options available using dark and light variants of primary and secondary color combinations, we have defined a component to dispatch actions to change the theme, we have persisted selected theme to AsyncStorage and we can also retrieve a theme when the application launches.
One more thing to do is to set up our components to use the colors available in the selected theme. As shown below, the header and status get background colors from the selected theme and change accordingly.
At this point, users can change the theme of the application and the selected theme persists between application launches.
I hope this article showed enough to help you create beautiful themes for your users to choose from.
Feel free to reach out to me on Twitter @ike_dunamis or via email at ikeenjoku@gmail.com.
