Material Design styles for React Native
JavaScript
Switch branches/tags
Nothing to show
Clone or download
binggg Merge pull request #1 from feelingweird/master
fixed iOS issue where fontFamily had more than one font family
Latest commit 84e44df Sep 12, 2017

README.md

React Native Material Design Styles

npm

React Native Material Design Styles is based on paper-style 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

A Material Design style React Native component library.

Table of contents

Quick start

Install with npm: npm install react-native-material-design-styles --save.

Documentation

Typography

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.

<Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Typography</Text>
<Text style={[typographyStyle.paperFontDisplay4]}>Display4</Text>
<Text style={typographyStyle.paperFontDisplay3}>Display3</Text>
<Text style={typographyStyle.paperFontDisplay2}>Display2</Text>
<Text style={typographyStyle.paperFontDisplay1}>Display1</Text>
<Text style={typographyStyle.paperFontHeadline}>Headline</Text>
<Text style={typographyStyle.paperFontTitle}>Title</Text>
<Text style={typographyStyle.paperFontSubhead}>Subhead</Text>
<Text style={typographyStyle.paperFontBody2}>Body2</Text>
<Text style={typographyStyle.paperFontBody1}>Body1</Text>
<Text style={typographyStyle.paperFontCaption}>Caption</Text>
<Text style={typographyStyle.paperFontButton}>Button</Text>
<Text style={typographyStyle.paperFontCode2}>Code2</Text>
<Text style={typographyStyle.paperFontCode1}>Code1</Text>

Here is what it look:

typography

Color

import { StyleSheet } from 'react-native';
import { color } from 'react-native-material-design-styles';
const typographyStyle = StyleSheet.create(typography);

Using for Text

<Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Text Color</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink50]}>paperPink50</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink100]}>paperPink100</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink200]}>paperPink200</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink300]}>paperPink300</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink400]}>paperPink400</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink600]}>paperPink600</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink700]}>paperPink700</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink800]}>paperPink800</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink900]}>paperPink900</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA100]}>paperPinkA100</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA200]}>paperPinkA200</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA400]}>paperPinkA400</Text>
<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA700]}>paperPinkA700</Text>

textColor

Using for background or other ways

<View style={[styles.colorItem,{backgroundColor: color.paperBlue500.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue50.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue100.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue200.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue300.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue400.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue500.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue600.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue700.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue800.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlue900.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlueA200.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlueA400.color}]}></View>
<View style={[styles.colorItem,{backgroundColor: color.paperBlueA700.color}]}></View>

backgroundColor

All colors

All color is show below, you can also Watch in fullScreen and you can copy color name.

allColor