HOME
|
COMMUNITY
|
BLOG
|
React-Theme-Provider — the Easiest Way to Use Multiple Themes in Your App

React-Theme-Provider — the Easiest Way to Use Multiple Themes in Your App

In short

<rte-code>react-theme-provider<rte-code> is a user-friendly library for React and React Native, making theming a breeze. It allows easy customization of app aesthetics without the fuss of React context. The article explains how to install, wrap your code, and change themes with ease.

Theming possibilities

Have you ever wanted to add theming possibilities to your application? To introduce to users an option to choose their favourite app “look and feel” without struggling with React context or huge singletons with theming data.

Now it’s possible with <rte-code>react-theme-provider<rte-code>! And let me tell you more… it’s possible in both <rte-code>React<rte-code> and <rte-code>React Native<rte-code>.

Origins of react-theme-provider

<rte-code>react-theme-provider<rte-code> started its life as a local module in react-native-paper and react-native-ios-kit (I encourage you to check out those libs). It was duplicated so we decided to make a totally separated library with both React Native and React support. We’ve added some additional features, wrapped it into nice API, added some tests, and voila!

Getting started

Just install <rte-code>@callstack/react-theme-provider<rte-code> package from <rte-code>npm<rte-code> and import <rte-code>ThemeProvider<rte-code> component into your main JS file. After that simply wrap your code into <rte-code>ThemeProvider<rte-code> component and pass your theme as a <rte-code>theme<rte-code> prop. Just like this:

To change theme of the application just change the value of the <rte-code>theme<rte-code>prop.

Ok, so we provided our — for sure beautiful — theme. Now it’s time to use it in our components. It is possible thanks to <rte-code>withTheme<rte-code> Higher Order Component. Wrap your component with it and start using theme data injected into the<rte-code>theme<rte-code> prop.

Demo time

You can try our demo here:

But wait… there is more!

You can use <rte-code>createTheming<rte-code> function to add multiple ThemeProviers for one application or inject a default theme. But I’m going to stop here and invite you to check out our documentation. If you have any trouble or ideas for improvements, feel free to open an issue on our repository.

Big thanks to Satyajit Sahoo who is the father of this project and main author of the code.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.