https://github.com/brankeye/react-native-paint
A themeable abstraction over React Native StyleSheet.
https://github.com/brankeye/react-native-paint
Last synced: 3 months 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 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T19:01:43.000Z (almost 3 years ago)
- Last Synced: 2025-07-02T03:48:37.529Z (4 months ago)
- Language: Java
- Size: 1.95 MB
- Stars: 10
- Watchers: 2
- 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)