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
react-theme-provider! And let me tell you more… it’s possible in both
react-theme-provider started its life as a local module in
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?
@callstack/react-theme-provider package from
npm and import
ThemeProvider component into your main JS file. After that simply wrap your code into
ThemeProvider component and pass your theme as a
theme prop. Just like this:
To change theme of the application just change the value of the
Ok, so we provided our — for sure beautiful — theme. Now it’s time to use it in our components. It is possible thanks to
withTheme Higher Order Component. Wrap your component with it and start using theme data injected into the
You can try our demo here:
But wait… there is more!
You can use
createTheming 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!