React Native UI Components for Material Design
Clone or download
Latest commit e3909c4 Dec 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Update button text to center align, RN 0.35 seems to have modified this Oct 18, 2016
.eslintrc mrn refactor Dec 11, 2015
.gitignore mrn refactor Dec 11, 2015
CONTRIBUTING.md mrn refactor Dec 11, 2015
LICENSE Update LICENSE Dec 27, 2018
README.md Update README.md Dec 27, 2018
package.json Fixing Drawer style broken on react-native 0.3* Aug 15, 2016

README.md

This library is no longer maintained. As an alternative we highly recommend checking out React Native Paper by the awesome folks over at @callstack.

React Native Material Design

npm Dependency Status GitHub issues GitHub license Join the chat at https://gitter.im/react-native-material-design/react-native-material-design

React Native components which implement Material Design.

This repository has been heavily developed on top of the mrn project started by @binggg. Improvements include support for the latest React Native versions, many bug fixes, extra components, backward compatibility to Android SDK API 16 and more.

Please keep in mind this is still a work in progress. The master branch is subject to breaking changes.

Looking for a demo app? Check out the repo.

Or view it online here! (Credits to Appetize for free hosting).

Installation

npm i react-native-material-design --save

Follow the Android installation instructions on the react-native-vector-icons library, which consists of adding the following to your ./android/app/build.gradle:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Note: It's possible that the instructions on the react-native-vector-icons page differ from what is above. If that's the case, follow those instructions, and please file an issue with us to update it here.

Import any required components into your project, for example:

import { Button, Card } from 'react-native-material-design';

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

Documentation

Documentation & full installation instructions are available at http://react-native-material-design.github.io

React Native 0.16+

This library only works with React Native 0.16+ due to the breaking changes with Babel and font loading it introduced.

Examples

Example 1 Example 2 Example 3

Contributing

Full contributing guidelines are to be written, however please ensure you follow the points when sending in PRs:

  • Ensure no lint warns occur via npm run lint.
  • Follow the Material Design guidelines.