https://github.com/invertase/react-native-material-design
React Native UI Components for Material Design
https://github.com/invertase/react-native-material-design
Last synced: 22 days ago
JSON representation
React Native UI Components for Material Design
- Host: GitHub
- URL: https://github.com/invertase/react-native-material-design
- Owner: invertase
- License: mit
- Archived: true
- Created: 2015-12-11T15:29:45.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-27T10:31:49.000Z (over 6 years ago)
- Last Synced: 2025-03-22T08:05:39.588Z (24 days ago)
- Language: JavaScript
- Homepage: http://react-native-material-design.github.io
- Size: 143 KB
- Stars: 3,146
- Watchers: 94
- Forks: 365
- Open Issues: 86
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-native-material-design - React Native UI Components for Material Design (JavaScript)
README
> This library is **no longer maintained**. As an alternative we highly recommend checking out [React Native Paper](https://github.com/callstack/react-native-paper) by the awesome folks over at @callstack. ✨
# React Native Material Design
[](https://www.npmjs.com/package/react-native-material-design)
[](https://david-dm.org/react-native-material-design/react-native-material-design.svg)
[](https://github.com/react-native-material-design/react-native-material-design/issues)
[](https://raw.githubusercontent.com/react-native-material-design/react-native-material-design/master/LICENSE)
[](https://gitter.im/react-native-material-design/react-native-material-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
React Native components which implement [Material Design](https://www.google.com/design/spec/material-design/introduction.html).
This repository has been heavily developed on top of the [mrn](https://github.com/binggg/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](https://github.com/react-native-material-design/demo-app).
Or view it online [here](https://appetize.io/app/hyp1m20y515c16cj5yw2karcjg)! (Credits to Appetize for free hosting).
## Installation
```
npm i react-native-material-design --save
```
Follow the [Android installation instructions](https://github.com/oblador/react-native-vector-icons#android) on the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library, which consists of adding the following to your `./android/app/build.gradle`:
```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
## 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](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids).