Skip to content

Releases: xotahal/react-native-material-ui

v2.0.0-alpha.1@develop

20 Apr 05:02
Compare
Choose a tag to compare

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

Bug Fixes

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.

1.30.1

02 Jul 11:44
Compare
Choose a tag to compare

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"
/>

1.30.0 - June 2018

26 Jun 23:31
Compare
Choose a tag to compare

Breaking changes

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

v1.21.0

07 Mar 14:04
Compare
Choose a tag to compare
Bump version

v1.20.0

23 Feb 12:09
963ab8f
Compare
Choose a tag to compare
Bump version

v1.8.0

21 Feb 20:03
Compare
Choose a tag to compare

Enhancement

  • [Badge] Add stroke around the badge

screen shot 2017-02-21 at 8 27 24 pm

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

Fix

  • [Toolbar] Fix no props propagation
  • [Toolbar] Fix toolbar background overflowing #91
  • [ListItem] Add Dynamic Text functionality with tertiaryText prop (#89)

v1.7.0

05 Feb 18:10
Compare
Choose a tag to compare

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
    untitled2
  • [IconToggle] enhancement ripple effect of icon buttons (so smooth now, uses native driver -> doesn't block JS thread) 🎉 Check an article about this feature
    untitled3
  • [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

v1.6.0

10 Jan 15:28
Compare
Choose a tag to compare

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

v1.5.0

07 Dec 13:27
Compare
Choose a tag to compare

Feature

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

v1.4.0

15 Nov 13:53
Compare
Choose a tag to compare

Feature

Fix

  • fix breaking layout changes in RN0.36

Enhancement

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