react-native-theme-provider v0.0.2

react-theme-provider

Theme provider for react-native

Example

https://github.com/WhatAKitty/react-native-theme-provider-example

Usage

If you want to use this module, you should first install a react native babel dependence:

yarn add babel-plugin-transform-decorators-legacy
# or npm
# npm install babel-plugin-transform-decorators-legacy --save

And then, create a file named .babelrc contains:

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

All right, then you can use this module in an easy way:

• install react-native-theme-provider

yarn add react-native-theme-provider
# or npm
# npm install react-native-theme-provider --save

• import package

import ThemeProvider, { applyTheme } from 'react-native-theme-provider';

• wrap app under ThemeProvider and put themes in it

<ThemeProvider
  themes={{
    'default': {
      color: '#333333',
    },
    'red': {
      color: 'red',
    },
  }}   {/* you can use require('/path/to/your/themefile') also, import is not support current. */}

  onChange={(name, before, after) => {
    console.log(before)
    console.log(after)
    // persist new theme into redux or something else.
    // this module will persist theme key into localstorage defaultly that key named `@App:theme`
  }}   {/* listen changes while theme changed */}
>
  <App />
</ThemeProvider>

• use theme styles from props by @applyTheme()

@applyTheme()
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        {/* this.props.theme.styles is the theme styles object passed by yourself in ThemeProvider Component */}
        <Text style={[styles.instructions, this.props.theme.styles]}>
          {instructions}
        </Text>
        <Button
          title="Toggle Theme"
          onPress={() => {
            this.props.activeTheme(this.props.theme.current === 'default' ? 'red' : 'default');
          }}
        />
      </View>
    );
  }
}

Properties

LICENSE

MIT