2.0.0-alpha.1 (2019-04-20)

Bug Fixes

• init of version 2.0 (f5cfcee)
• update libraries (61e74ca)

BREAKING CHANGES

• The lib needs to be updated to use

• the latest React and React Native
• a new Context API
• flow type
• a new theming system (currently it doesn't respect the Pure Component idea)

Some props will be changed. A new components will be added.

Features

• ⭐️ You can now override an icon set in theme - MaterialIcons, MaterialCommunityIcons, FontAwesome, etc. (Everything that is provided by react-native-vector-icons).

To use community set as default:

<ThemeContext.Provider value={getTheme({ iconSet: 'MaterialCommunityIcons' })>
    ...
</ThemeContext.Provider>

or just for only one component

<ListItem
     iconSet="MaterialCommunityIcons"
     icon="shape"
/>

Breaking changes

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

Before

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

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

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

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

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

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

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

export default MyButton

Enhancement

• [Badge] Add stroke around the badge

- [Button] Add ability to set custom icon element instead of name (#92)

Fix

• [Toolbar] Fix no props propagation
• [Toolbar] Fix toolbar background overflowing https://github.com/xotahal/react-native-material-ui/issues/91
• [ListItem] Add Dynamic Text functionality with tertiaryText prop (#89)

Breaking changes

• only if you use toolbar's trancluent prop - it was removed, use style prop instead

Features and Enhancements

• [Toolbar] Add animation between search/default mode 🎉 Check an article about this feature
• [IconToggle] enhancement ripple effect of icon buttons (so smooth now, uses native driver -> doesn't block JS thread) 🎉 Check an article about this feature
• [Button] Set button text to go uppercase or not (#77) - @kenma9123
• [Avatar] Add ability to specify icon's color and size (#69) - @frankros91
• [ActionButton] Add support for custom icons in actions (#66) - @NewOldMax
• [ListItem] Add tertiaryText Option (#67) - @mbenjamin618
• [Toolbar] Add show and hide animations (#80) - @HofmannZ

Fix

• [ActionButton] Add missing styles for labels (#76) - @NewOldMax

Features and Enhancements

• use "eslint-config-airbnb": "^13.0.0"
• add Jest and use codecov.io
• [BottomNavigation] Ability to handle custom Icons instead of icon names. (#62) decb49a
• [BottomNavigation] Able to change the styles of active navigation via theme (#72) e28942c
• Add autoCaptialize & autoCorrect to Toolbar.searchable (#71)
• Add show and hide animation BottomNavigation 🎉 check it here
• Add ability to hide/show action button 🎉 check it here

Feature

• introduce new Bottom Navigation component 🎉

Fix

• Fix leftElement to work with any element and not just icon names (#46) 6cef3d6
• Remove code specific to Android in Toolbar Search (#54) 042c60e

Feature

• introduce new Badge component 🎉

Fix

• fix breaking layout changes in RN0.36

Enhancement

• use React.PureComponent instead of React.Component for all components