Skip to content
A themeable abstraction over React Native StyleSheet.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
samples/themed-app Add MIT license. Aug 20, 2018
.gitignore Version 1.1.0. Jul 13, 2018
LICENSE.txt Add MIT license. Aug 20, 2018
README.md Added medium article to readme. Jul 20, 2018
changelog.md Version 1.1.0. Jul 13, 2018
package.json

README.md

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) => ({
  container: {
    color: theme.textColor,
    // 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.

Read about it on Medium

You can’t perform that action at this time.