Making easily themeable React Native StyleSheets.
While applying a theme via inline styles makes theming a React Native app easy, the performance benefits provided by StyleSheets would be lost. A simple day/night theme implementation for a component using StyleSheets might look like the following.
But this quickly becomes tedious when applied across any significant number of components. Another minor gripe with this scenario is only one of the two StyleSheets will be in use at any given time. It would help if StyleSheets were created as a function of a theme and then created at runtime instead when the theme is changed.
That’s where react-native-paint comes in. Here’s the previous scenario re-implemented with the module.
All that’s needed now is to supply the theme to the StylesProvider and an id to determine which theme is currently applied. Whenever we want to change the theme, we just supply the provider with a new theme and id.
Additionally, the Paint object comes with all of the same helper methods and properties asStyleSheet (with the create method renamed to sheet which creates a StyleSheet directly). That’s it!
Thanks for stopping by! Here are some helpful links.
Expo Live Demo with source