Usage.md

Usage

If you want to use default theme, you can skip this step

To achieve the level of customizability, React Native Material UI is using a single JS object called uiTheme that is passed in via context. By default, this uiTheme object is based on the lightTheme that you can find here. So, you can change almost everything very easily.

The uiTheme object contains the following keys (for more of them - check the code):

    spacing: {} // can be used to change the spacing of components.
    fontFamily: {} // can be used to change the default font family.
    palette: {  // can be used to change the color of components.
        primaryColor: blue500,
        accentColor: red500,
        ...
    }
    typography: {} // can be used to change the typography of components
    // you can change style of every each component
    avatar: {}
    button: {}
    toolbar: {}
    ...

import React, { Component } from 'react';
import { Navigator, NativeModules } from 'react-native';

import { COLOR, ThemeContext, getTheme } from 'react-native-material-ui';

// you can set your style right here, it'll be propagated to application
const uiTheme = {
  palette: {
    primaryColor: COLOR.green500,
  },
  toolbar: {
    container: {
      height: 50,
    },
  },
};

class Main extends Component {
  render() {
    return (
      <ThemeContext.Provider value={getTheme(uiTheme)}>
        <App />
      </ThemeContext.Provider>
    );
  }
}

It means, if you want to change primary color of your application you can just pass to ThemeContext.Provider object with your own settings. The settings will be merged with default theme.

What else?

Another great feature is, you can use the theme everywhere. Even in your own components. So if you built your own implementation of Button for example, look how you can get the primary color.

import { withTheme } from 'react-native-material-ui'

class MyButton extends Component {
    render() {
	    // it's really easy to get primary color everywhere in your app
        const { primaryColor } = this.props.theme.palette;

        return ...
    }
}

export default withTheme(MyButton)

Local changes

Of course, sometimes we need to change style of only one component. All buttons have a red background by default, but only facebook button should have blue background.

Every component have a style property. So you can very easily override whatever you want.

<Button style={{ container: { backgroundColor: 'blue' } }} />