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
  }
};

class App extends React.Component {
  state = {
    currentTheme: themes.light
  };

  toggleTheme = () => {
    const { name } = this.state.currentTheme;
    const nextTheme = name === "light" ? themes.dark : themes.light;
    this.setState({
      currentTheme: nextTheme
    });
  };

  render() {
    const { currentTheme } = this.state;
    return (
      <StylesProvider id={currentTheme.name} theme={currentTheme}>
        <MySuperCoolAwesomeApp onToggleTheme={this.toggleTheme} />
      </StylesProvider>
    );
  }
}

Step 3

Use it in your components.

import Paint, { StylesConsumer, withStyles } from "react-native-paint";

// with theme
const paint = Paint.create((theme) => ({
  color: theme.textColor,
  container: {
    // Paint inherits all properties from StyleSheet
    ...Paint.absoluteFillObject,
  }
}));

// or without theme
const paint = Paint.create({
  color: "blue",
});

// or create a stylesheet directly
// but do not pass this to paint prop on consumer/hoc
const stylesheet = Paint.sheet({
  color: "blue",
})

// as consumer
const ThemedText = (props) => (
  <StylesConsumer paint={paint}>
    {(styles) => (
      <Text {...props} styles={styles} />
    )}
  </StylesConsumer>
);

export default ThemedText;

// or as hoc
const ThemedText = (({ styles, ...props }) => (
  <Text {...props} styles={styles} />
));

export default withStyles(paint)(ThemedText);

Try it

Check it out here with Expo.

Have a look at the sample code here.

See the changelog here.