React Native Paint
A themeable abstraction over React Native StyleSheet.
Usage
Step 1
Install react-native-paint
using yarn or npm.
yarn add react-native-paint
npm install react-native-paint
Step 2
Wrap your root-level component with a provider.
import React from "react";import StylesProvider from "react-native-paint"; const themes = light: name: "light" // some light theme properties dark: name: "dark" // some dark theme properties ; Component state = currentTheme: themeslight ; { const name = thisstatecurrentTheme; const nextTheme = name === "light" ? themesdark : themeslight; this; }; { const currentTheme = thisstate; return <StylesProvider = => <MySuperCoolAwesomeApp = /> </StylesProvider> ; }
Step 3
Use it in your components.
import Paint StylesConsumer withStyles from "react-native-paint"; // with themeconst paint = Paint; // or without themeconst paint = Paint; // or create a stylesheet directly// but do not pass this to paint prop on consumer/hocconst stylesheet = Paint // as consumerconst ThemedText = props <StylesConsumer => styles <Text = /> </StylesConsumer>; ; // or as hocconst ThemedText = styles ...props <Text = />; paintThemedText;
Try it
Have a look at the sample code here.
See the changelog here.