Highly customizable material design components for React Native
MIT License
Bot releases are visible (Hide)
Published by xotahal over 5 years ago
Some props will be changed. A new components will be added.
Published by xotahal over 6 years ago
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"
/>
Published by xotahal over 6 years ago
React.createContext
. Please check the official documentation - https://reactjs.org/docs/context.html
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>
);
}
}
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
import React, { Component } from 'react';
import { Navigator, NativeModules } from 'react-native';
class Main extends Component {
render() {
return (
<App />
);
}
}
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 ...
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
Published by janziemba over 6 years ago
Published by xotahal over 7 years ago
Published by xotahal over 7 years ago
trancluent
prop - it was removed, use style
prop insteadPublished by xotahal almost 8 years ago
"eslint-config-airbnb": "^13.0.0"
Published by xotahal almost 8 years ago
Published by xotahal almost 8 years ago
Published by xotahal almost 8 years ago
TouchableNativeFeedback
you can use RippleFeedback
in your Appexport { default as RippleFeedback } from './RippleFeedback';
Published by xotahal about 8 years ago
NOTE: only if you override style of action button.
Structure of action button was changed. Just check it in render method.
Published by xotahal about 8 years ago
Published by xotahal about 8 years ago
Published by xotahal about 8 years ago
Published by xotahal about 8 years ago
Published by xotahal about 8 years ago
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 :)).
Published by xotahal about 8 years ago