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

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