Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-native-material-ui

Package Overview
Dependencies
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-material-ui - npm Package Compare versions

Comparing version 1.30.0 to 1.30.1

docs/Animations.md
docs/Components.md
docs/Demo.md
docs/GettingStarted.md
docs/Usage.md

2

package.json
{
"name": "react-native-material-ui",
"version": "1.30.0",
"version": "1.30.1",
"description": "React Native Material Design Components",

@@ -5,0 +5,0 @@ "main": "./index.js",

184

README.md
# React Native Material UI (iOS and Android supported)
**Highly customizable material design components for React Native!**
Highly customizable material design components for React Native!

@@ -8,181 +8,33 @@ [![npm](https://img.shields.io/npm/v/react-native-material-ui.svg)](https://www.npmjs.com/package/react-native-material-ui)

[![npm](https://img.shields.io/npm/dm/react-native-material-ui.svg)](https://img.shields.io/npm/dm/react-native-material-ui.svg)
[![GitHub issues](https://img.shields.io/github/issues/xotahal/react-native-material-ui.svg)](https://github.com/xotahal/react-native-material-ui/issues)
[![Dependencies](https://david-dm.org/xotahal/react-native-material-ui.svg)](https://david-dm.org/xotahal/react-native-material-ui.svg)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xotahal/react-native-material-ui/master/LICENSE)
# Getting Started
## Documentation
```bash
$ npm i react-native-material-ui --save
```
- [Getting Started](https://github.com/xotahal/react-native-material-ui/blob/master/docs/GettingStarted.md)
- [Usage](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Usage.md)
- [Demo & Examples](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md)
- [Components](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md)
or
## Showroom
```bash
$ yarn add react-native-material-ui
```
### [Savee.io](http://bit.ly/savee-io)
## Setting of vector icons
[iOS App](http://bit.ly/savee-ios) & [Android App](http://bit.ly/savee-android)
You can see [this repo](https://github.com/oblador/react-native-vector-icons) for much more information.
<img src="https://cdn-images-1.medium.com/max/2000/1*c4LrPZvMIgIZntDPfYDKFA.png" width="512px" />
### React Native Link (recommended)
### [Reservio](https://www.reservio.com/)
> Make sure you have atleast v0.31.0 react-native version.
[iOS App](https://itunes.apple.com/us/app/reservio/id1314263364?mt=8) & [Android App](https://play.google.com/store/apps/details?id=com.reservio&hl=en)
```bash
$ react-native link react-native-vector-icons
```
<img src="https://lh3.googleusercontent.com/1wm87owPIRr_vp9FrroYuD4eusW2x8N7H7OdhP_B2ynLDIds6s83VAWKFz8xBa3NOh8=w1440-h620-rw" width="256px" /><img src="https://lh3.googleusercontent.com/AIDK60jiX6ldE9dZ4n5srJSG1sdeRKgsqIEdfdyCQvJcNY1rW7vCmHwvC6aOcLk7swE=w1440-h620-rw" width="256px" />
### Manual Installation
## Questions
#### Android (see [original](https://github.com/oblador/react-native-vector-icons#android))
If you need anything ping us on [twitter](https://twitter.com/xotahal).
Copy the `MaterialIcons` font file from [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#android) to your local working directory:
| Jiri Otahal | Jan Ziemba |
| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| [<img src="https://avatars3.githubusercontent.com/u/3531955?v=4" width="100px;" style="border-radius:50px"/>](https://twitter.com/xotahal) | [<img src="https://avatars1.githubusercontent.com/u/4710865?v=4" width="100px;" style="border-radius:50px"/>]() |
`./node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf` -> `./android/app/src/main/assets/fonts`.
#### iOS (see [original](https://github.com/oblador/react-native-vector-icons#ios))
## Adding Roboto Font
This project uses Roboto as the main font for text. Make sure to add Roboto to your project, as it will give the following error on iOS.
`Unrecognized font family Roboto`.
You can obtain Roboto free from [here](https://fonts.google.com/specimen/Roboto).
Here is a great tutorial which shows [how to add custom fonts](https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4).
# Usage
To achieve the level of customizability, React Native Material UI is using a single JS object called uiTheme that is passed in via context. By default, this uiTheme object is based on the lightTheme that you can find [here](https://github.com/xotahal/react-native-material-ui/blob/master/src/styles/themes/light.js). So, you can change almost everything very easily.
The uiTheme object contains the following keys:
spacing: {} // can be used to change the spacing of components.
fontFamily: {} // can be used to change the default font family.
palette: { // can be used to change the color of components.
primaryColor: blue500,
accentColor: red500,
...
}
typography: {} // can be used to change the typography of components
// you can change style of every each component
avatar: {}
button: {}
toolbar: {}
...
```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>
);
}
}
```
**It means, if you want to change primary color of your application for example. You can just pass to ThemeProvider object with your own settings.** Your settings will be merged with default theme.
## What else?
Another great feature is, you can use the `uiTheme` everywhere. Even in your own components. So if you built your own implementation of `Button` for example, look how you can get the primary color.
```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 ...
```
## Local changes
Of course, sometimes we need to change style of only one component. It means, all `buttons` have red background, but facebook login button that should have blue background. Every each component have `style` property. So you can very easily override whatever you want.
```js
<Button style={{ container: { backgroundColor: 'blue' } }} />
```
# Animations are included
<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/action-button-labels.gif" width="285"> <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/fab-to-toolbar-1.gif" width="285"> <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-anim.gif" width="285">
Note: You have to allow the animations for Android ([see React Native's documentation](https://facebook.github.io/react-native/docs/layoutanimation.html))
```js
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
```
# Themes are supported
<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/buttons-2.png" width="285"> <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/buttons-3.png" width="285"> <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/buttons-4.png" width="285">
# Toolbar with search feature
<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbars-search.gif" width="285">
# Examples
You can try our [Demo App](https://github.com/xotahal/react-native-material-ui-demo-app)!
<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbars-1.png" width="280"> <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbars-anim-1.gif" width="280">
<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-1.gif" width="285">
![Example 1](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-1.jpg 'Example 1')
![Example 2](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-2.jpg 'Example 2')
![Example 3](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-3.jpg 'Example 3')
# Components
Here is a list of all component included in this library. (I'm working on documentation for every each component. Be patient please :))
- [Action Button](https://github.com/xotahal/react-native-material-ui/blob/master/docs/ActionButton.md)
- [Avatar](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Avatar.md)
- [Badge](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Badge.md)
- [Bottom Navigation](https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigation.md)
- [Bottom Navigation Action](https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigationAction.md)
- [Button](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Button.md)
- [Card](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Card.md)
- [Checkbox](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Checkbox.md)
- [Dialog](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Dialog.md)
- [Drawer](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Drawer.md)
- [Divider](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Divider.md)
- [Icon](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Icon.md)
- [Icon toggles](https://github.com/xotahal/react-native-material-ui/blob/master/docs/IconToggle.md)
- [List item](https://github.com/xotahal/react-native-material-ui/blob/master/docs/ListItem.md)
- [Radio button](https://github.com/xotahal/react-native-material-ui/blob/master/docs/RadioButton.md)
- [Subheader](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Subheader.md)
- [Toolbar](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Toolbar.md)

20

src/Avatar/Avatar.react.js
/* eslint-disable import/no-unresolved, import/extensions */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { View, Image, Text, StyleSheet } from 'react-native';
import { View, Text, StyleSheet } from 'react-native';
import { ViewPropTypes } from '../utils';

@@ -14,3 +14,3 @@ /* eslint-enable import/no-unresolved, import/extensions */

*/
image: PropTypes.shape({ type: PropTypes.oneOf([Image]) }),
image: PropTypes.element,
/**

@@ -43,2 +43,3 @@ * If passed in, this component will render icon element inside avatar.

}),
iconSet: PropTypes.string,
/**

@@ -57,2 +58,3 @@ * Theme

style: {},
iconSet: null,
};

@@ -82,3 +84,11 @@

render() {
const { image, icon, iconSize, iconColor, text, theme } = this.props;
const {
image,
icon,
iconSet,
iconSize,
iconColor,
text,
theme,
} = this.props;
const { avatar, spacing } = theme;

@@ -93,3 +103,5 @@

const size = iconSize || spacing.iconSize;
content = <Icon name={icon} color={color} size={size} />;
content = (
<Icon iconSet={iconSet} name={icon} color={color} size={size} />
);
} else if (text) {

@@ -96,0 +108,0 @@ content = <Text style={styles.content}>{text}</Text>;

5

src/BottomNavigation/BottomNavigationAction.react.js

@@ -21,2 +21,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
/**
* Will be rendered under the icon as a content of the action.

@@ -47,2 +51,3 @@ */

onPress: null,
iconSet: null,
active: false,

@@ -49,0 +54,0 @@ disabled: false,

8

src/Button/Button.react.js

@@ -45,2 +45,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
/**
* You can override any style for this button

@@ -65,2 +69,3 @@ */

upperCase: true,
iconSet: null,
style: {},

@@ -166,3 +171,3 @@ };

renderIcon = styles => {
const { icon } = this.props;
const { icon, iconSet } = this.props;
const textFlatten = StyleSheet.flatten(styles.text);

@@ -181,2 +186,3 @@

<Icon
iconSet={iconSet}
name={icon}

@@ -183,0 +189,0 @@ color={textFlatten.color}

7

src/Checkbox/Checkbox.react.js

@@ -40,2 +40,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

onCheck: PropTypes.func.isRequired,
/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
style: PropTypes.shape({

@@ -59,2 +63,3 @@ container: ViewPropTypes.style,

size: 24,
iconSet: null,
};

@@ -99,2 +104,3 @@

label,
iconSet,
} = this.props;

@@ -115,2 +121,3 @@

onPress={this.onPress}
iconSet={iconSet}
size={size}

@@ -117,0 +124,0 @@ />

50

src/Icon/index.js
/* eslint-disable import/no-unresolved, import/extensions */
import VectorIcon from 'react-native-vector-icons/MaterialIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import Feather from 'react-native-vector-icons/Feather';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Foundation from 'react-native-vector-icons/Foundation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Octicons from 'react-native-vector-icons/Octicons';
import Zocial from 'react-native-vector-icons/Zocial';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import React, { PureComponent } from 'react';

@@ -14,2 +25,6 @@ import PropTypes from 'prop-types';

/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
/**
* Theme

@@ -23,7 +38,37 @@ */

style: null,
iconSet: null,
};
const getIconComponent = iconSet => {
switch (iconSet) {
case 'Entypo':
return Entypo;
case 'EvilIcons':
return EvilIcons;
case 'Feather':
return Feather;
case 'FontAwesome':
return FontAwesome;
case 'Foundation':
return Foundation;
case 'Ionicons':
return Ionicons;
case 'MaterialIcons':
return MaterialIcons;
case 'MaterialCommunityIcons':
return MaterialCommunityIcons;
case 'Octicons':
return Octicons;
case 'Zocial':
return Zocial;
case 'SimpleLineIcons':
return SimpleLineIcons;
default:
return MaterialIcons;
}
};
class Icon extends PureComponent {
render() {
const { name, style, size, color, theme } = this.props;
const { name, style, size, color, theme, iconSet } = this.props;
const { palette, spacing } = theme;

@@ -33,2 +78,3 @@

const iconSize = size || spacing.iconSize;
const VectorIcon = getIconComponent(iconSet || theme.iconSet);

@@ -35,0 +81,0 @@ return (

9

src/IconToggle/IconToggle.react.js

@@ -49,2 +49,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
/**
* It'll be used instead of icon (see props name) if exists

@@ -77,2 +81,3 @@ */

style: {},
iconSet: null,
};

@@ -235,3 +240,3 @@

renderIcon = styles => {
const { name, children } = this.props;
const { name, children, iconSet } = this.props;
const { iconSize } = this.state;

@@ -245,3 +250,3 @@

return <Icon name={name} color={color} size={iconSize} />;
return <Icon iconSet={iconSet} name={name} color={color} size={iconSize} />;
};

@@ -248,0 +253,0 @@

17

src/ListItem/ListItem.react.js

@@ -32,2 +32,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
/**
* Called when list item is long pressed.

@@ -99,2 +103,3 @@ */

style: {},
iconSet: null,
};

@@ -305,3 +310,3 @@

renderLeftElement = styles => {
const { leftElement } = this.props;
const { leftElement, iconSet } = this.props;

@@ -318,3 +323,7 @@ if (!leftElement) {

<TouchableWithoutFeedback onPress={this.onLeftElementPressed}>
<Icon name={leftElement} color={flattenLeftElement.color} />
<Icon
iconSet={iconSet}
name={leftElement}
color={flattenLeftElement.color}
/>
</TouchableWithoutFeedback>

@@ -394,3 +403,3 @@ );

renderRightElement = styles => {
const { rightElement } = this.props;
const { rightElement, iconSet } = this.props;

@@ -414,2 +423,3 @@ let content = [];

key={action}
iconSet={iconSet}
color={flattenRightElement.color}

@@ -446,2 +456,3 @@ name={action}

<IconToggle
iconSet={iconSet}
name={rightElement.menu.icon || 'more-vert'}

@@ -448,0 +459,0 @@ color={flattenRightElement.color}

3

src/styles/getTheme.js

@@ -31,4 +31,5 @@ /* eslint-disable import/no-unresolved, import/extensions */

const { spacing, fontFamily, typography, palette } = mergedTheme;
const { iconSet, spacing, fontFamily, typography, palette } = mergedTheme;
const baseTheme = {
iconSet,
spacing,

@@ -35,0 +36,0 @@ fontFamily,

1

src/styles/themes/light.js

@@ -10,2 +10,3 @@ import Color from 'color';

typography,
iconSet: 'MaterialIcons',
fontFamily: 'Roboto',

@@ -12,0 +13,0 @@ palette: {

7

src/Toolbar/LeftElement.react.js

@@ -22,2 +22,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

onSearchClose: PropTypes.func,
/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
};

@@ -31,2 +35,3 @@ const defaultProps = {

size: 24,
iconSet: null,
};

@@ -126,2 +131,3 @@

size,
iconSet,
} = this.props;

@@ -166,2 +172,3 @@

size={size}
iconSet={iconSet}
style={flattenLeftElement}

@@ -168,0 +175,0 @@ />

7

src/Toolbar/RightElement.react.js

@@ -31,2 +31,6 @@ /* eslint-disable import/no-unresolved, import/extensions */

onSearchPress: PropTypes.func.isRequired,
/**
* Name of Icon set that should be use. From react-native-vector-icons
*/
iconSet: PropTypes.string,
};

@@ -40,2 +44,3 @@ const defaultProps = {

searchable: null,
iconSet: null,
};

@@ -95,2 +100,3 @@

onSearchClearRequest,
iconSet,
} = this.props;

@@ -134,2 +140,3 @@

style={flattenRightElement}
iconSet={iconSet}
onPress={() => onRightElementPress({ action, index })}

@@ -136,0 +143,0 @@ />

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc