React-theme-provider — the easiest way to use multiple themes in your app

Jakub Kłobus

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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 <cyan>react-theme-provider<cyan>

<rte-code>react-theme-provider<rte-code> started its life as a local module in react-native-paper and react-native-ios-kit (BTW 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!

How to start?

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 troubles 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!

Jakub Kłobus
Software developer working at Callstack since the beginning. After mastering web, he moved to React Native. Fanboy of ReasonML and functional programming.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.