React Native Material UI Files

Breaking changes

• Now we are using React.createContext. Please check the official documentation - https://reactjs.org/docs/context.html

Before

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

import { COLOR, ThemeProvider } 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 (
            <ThemeProvider uiTheme={uiTheme}>
                <App />
            </ThemeProvider>
        );
    }
}

Now

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

import { COLOR, ThemeContext, getTheme } from 'external/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>
        );
    }
}

If you don't want to change the default theme, you don't have to do anything. You don't have to use ThemeContext.Provider

Now - without changing default theme

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

class Main extends Component {
    render() {
        return (
             <App />
        );
    }
}

Using the theme in your components

Before

:::js
import ...

const contextTypes = {
    uiTheme: PropTypes.object.isRequired,
};

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

        return ...
    }
}

export ...

Now

:::js
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)

Or no-HOC solution

:::js
import { ThemeContext } from 'react-native-material-ui'

class MyButton extends Component {
    render() {
        <ThemeContext.Consumer>
             {theme => .... }
        </ThemeContext.Consumer>
    }
}

export default MyButton