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

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

Fixed

• fix ability to change size of toolbar icons (issue - #34) 5fbdf3b

Enhancement

• since iOS doesn't support TouchableNativeFeedback you can use RippleFeedback in your App

export { default as RippleFeedback } from './RippleFeedback';

Fixed

• fix three lines item in list f37cc13
• it'll close toolbar search on BackAndroid press now c6335be
• remove React and React Native from dependecies issue

New features

• you are able to specify actions with labels for action buttons (see this page)

Breaking changes ❗️

NOTE: only if you override style of action button.

Structure of action button was changed. Just check it in render method.

Fix dependencies

New features

• iOS support 🎉

New features

• Add ability to display extra actions after the FAB is pressed - see ActionButton component 🎉
• Add animations for floating action button

New features

• Add ActionButton component 🎉

Fix

• Set backgroundColor of drawer to white by default f74240d
• Fix background of drawer if image is specified 368ddfa

Breaking changes!

This version completely changes how to use this library. You should know about new theme provider. And also there is documentation for every each component (or it will be very soon :)).

New features

• ability to add divider after list item

Fixes

• IconToggle background

New features

• Add ability to display and select account on side menu's header spec
• Add list item: controls spec
• Add ability to set fullWidth for Card component