React Native Material Design

React Native components which implement Material Design.

This repository has been forked from the react-native-material-design project started by @Ehesp.

Supported is React Native 0.16+

• Getting Started
• Examples
• Components

Getting Started

npm i react-native-material-ui --save

Copy the MaterialIcons font file from react-native-vector-icons to your local working directory:

./node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf -> ./android/app/src/main/assets/fonts.

Usage

Import any required components into your project, for example:

import React from 'react-native';
import { Button } from 'react-native-material-ui';

class ReactNativeComponent extends React.Component {
  render() {
    return <Button text="Submit" />
  }
}

You may need to restart your packager in order for the icons to render.

Examples

Components

This library needs better documentation of components. For now, in this section are some gifs and pictures.

• [Avatar] (#avatar)
• [Button] (#button)
• [Checkbox] (#checkbox)
• [Icon] (#icon)
• [List item] (#list-item)
• [Radio button] (#radio-button)
• [Card] (#card)
• Drawer
• Dropdown menu
• Toolbar

Toolbar

Toolbar has the search feature!

<Toolbar
  searchable={{
    onChangeText: () => { },
    placeholder: 'Search'
  }}
/>

![Toolbar] (https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbar/searchable.gif "Searchable toolbar")

Dropdown menu

You can use dropdown menu on Toolbar and ListItem. You just have to define menuActions. The onPress function returns result (either 'itemPressed' or 'dismissed') and index of item in list (0 for 'First', 1 for 'Second' in these examples).

<Toolbar
  menuActions={{
    labels: ['First', 'Second'],
    onPress: (result, index) => { }
  }}
/>

<ListItem
  menuActions={{
    labels: ['First', 'Second'],
    onPress: (result, index) => { }
  }}
/>

![Dropdown] (https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/dropdown/dropdown.gif)

Drawer with account style header

![Drawer] (https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/drawer/drawer.gif)