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.
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.
Paint object comes with all of the same helper methods and properties as
StyleSheet (with the
create method renamed to
sheet which creates a
StyleSheet directly). That’s it!
Thanks for stopping by! Here are some helpful links.