https://github.com/binggg/react-native-material-design-styles

Material Design styles for React Native
https://github.com/binggg/react-native-material-design-styles

Last synced: 21 days ago
JSON representation

Material Design styles for React Native

• Host: GitHub
• URL: https://github.com/binggg/react-native-material-design-styles
• Owner: binggg
• Created: 2015-11-07T09:59:20.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-12T05:54:23.000Z (over 7 years ago)
• Last Synced: 2024-04-26T20:22:48.870Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.49 MB
• Stars: 91
• Watchers: 6
• Forks: 22
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [React Native Material Design Styles](http://github.com/binggg/react-native-material-design-styles)

[![npm](https://img.shields.io/npm/v/react-native-material-design-styles.svg)](https://www.npmjs.com/package/react-native-material-design-styles)

React Native Material Design Styles is based on [paper-style](https://github.com/PolymerElements/paper-styles) which provides simple ways to use Material Design CSS styles in your application.　The difference is that this project is available in the form of React Native.

**Recommend**

[![http://mrn.js.org](https://github.com/binggg/mrn/raw/master/mrn-logo-text.png)](http://mrn.js.org)

## A Material Design style React Native component library.

## Table of contents

* [Quick start](#quick-start)

* [Documentation](#documentation)

## Quick start

Install with [npm](https://www.npmjs.com): `npm install react-native-material-design-styles --save`.

## Documentation

### Typography

```javascript

import { StyleSheet } from 'react-native';

import { typography } from 'react-native-material-design-styles';

const typographyStyle = StyleSheet.create(typography);

```

Now we can use Material Design typography in our JSX code.

```javascript

Typography

Display4

Display3

Display2

Display1

Headline

Title

Subhead

Body2

Body1

Caption

Button

Code2

Code1

```

Here is what it look:

![typography](./typography.png)

### Color

```javascript

import { StyleSheet } from 'react-native';

import { color } from 'react-native-material-design-styles';

const typographyStyle = StyleSheet.create(typography);

```

#### Using for Text

```javascript

Text Color

paperPink500

paperPink50

paperPink100

paperPink200

paperPink300

paperPink400

paperPink500

paperPink600

paperPink700

paperPink800

paperPink900

paperPinkA100

paperPinkA200

paperPinkA400

paperPinkA700

```

![textColor](./textColor.png)

#### Using for background or other ways

```javascript

```

![backgroundColor](./backgroundColor.png)

#### All colors

All color is show below, you can also [Watch in fullScreen](http://codepen.io/binggg/full/LpgJvY/) and you can copy color name.

![allColor](./allColors.jpg)