https://github.com/brankeye/react-native-paint

A themeable abstraction over React Native StyleSheet.
https://github.com/brankeye/react-native-paint

Last synced: 5 days ago
JSON representation

A themeable abstraction over React Native StyleSheet.

• Host: GitHub
• URL: https://github.com/brankeye/react-native-paint
• Owner: brankeye
• License: mit
• Created: 2018-07-07T00:25:56.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T19:01:43.000Z (almost 2 years ago)
• Last Synced: 2024-08-16T17:54:17.541Z (4 months ago)
• Language: Java
• Size: 1.95 MB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-react-native - react-native-paint ★5 - A themeable abstraction over React Native StyleSheet. Read about it [here](https://medium.com/@brankeye/making-easily-themeable-react-native-stylesheets-bd8782b4e685). (Components / Styling)
• awesome-react-native - react-native-paint ★5 - A themeable abstraction over React Native StyleSheet. Read about it [here](https://medium.com/@brankeye/making-easily-themeable-react-native-stylesheets-bd8782b4e685). (Components / Styling)
• awesome-react-native - react-native-paint ★5 - A themeable abstraction over React Native StyleSheet. Read about it [here](https://medium.com/@brankeye/making-easily-themeable-react-native-stylesheets-bd8782b4e685). (Components / Styling)
• awesome-react-native - react-native-paint ★5 - A themeable abstraction over React Native StyleSheet. Read about it [here](https://medium.com/@brankeye/making-easily-themeable-react-native-stylesheets-bd8782b4e685). (Components / Styling)

README

        
# React Native Paint

A themeable abstraction over React Native [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet.html).

## Usage

#### Step 1

Install [`react-native-paint`](https://www.npmjs.com/package/react-native-paint) using [yarn](https://yarnpkg.com/lang/en/) or [npm](https://www.npmjs.com/get-npm).

```

yarn add react-native-paint

```

```

npm install react-native-paint

```

#### Step 2

Wrap your root-level component with a provider.

```jsx

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 (

      

        

      

    );

  }

}

```

#### Step 3

Use it in your components.

```jsx

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

// with theme

const paint = (theme) => ({

  container: {

    color: theme.textColor,

    // Paint inherits all properties from StyleSheet

    ...Paint.absoluteFillObject,

  },

});

// 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) => (

  

    {(styles) => }

  

);

export default ThemedText;

// or as hoc

const ThemedText = ({ styles, ...props }) => (

  

);

export default withStyles(paint)(ThemedText);

```

## Try it

Check it out [here](https://exp.host/@brankeye/themed-app) with [Expo](https://expo.io/).

Have a look at the sample code [here](https://github.com/brankeye/react-native-paint/tree/master/samples/themed-app).

See the changelog [here](https://github.com/brankeye/react-native-paint/blob/master/changelog.md).

Read about it on [Medium](https://medium.com/@brankeye/making-easily-themeable-react-native-stylesheets-bd8782b4e685)