hectahertz/react-native-typography: Pixel–perfect, native–looking typographic styles for React Native ✒️


23 bookmarks. First posted by jimthedev december 2017.


Github repo
Name: react-native-typography
Tagline: Pixel–perfect, native–looking typographic styles for React Native ✒️
Languages:
JavaScript = 114031 bytes

# <img alt="React Native typography" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/logo.png" width="275"/>

Pixel–perfect, native–looking typographic styles for React Native.

[![npm version](https://img.shields.io/npm/v/react-native-typography.svg)](https://www.npmjs.com/package/react-native-typography)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
[![npm downloads](https://img.shields.io/npm/dm/react-native-typography.svg)](https://www.npmjs.com/package/react-native-typography)

<p align="center">
<img alt="React Native Typography Human Showcase" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-ios.png" width="49.7%"/>
<img alt="React Native Typography Material Showcase" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-android.png" width="49.7%"/>
</p>

## Why

Creating great Text Styles in React Native
[is not a simple task](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80),
it requires a lot of fiddling and handling edge cases.

This library provides a good set of defaults and helpers that cover the majority
of the cases you'll need, make your code much simpler and ✨*bonus*✨ render
great [on iOS, Android and the web](#cross-platform) 😄

## Quick start

Add the dependency:

```sh
yarn add react-native-typography
```

Set a style in your component:

```JSX
import { material } from 'react-native-typography'

<Text style={material.display1}>Hello Typography!</Text>
```

And it will look like this:

<p align="center">
<img alt="Material Design Collection" src="https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/hello-world.png" width="40%" height="40%"/>
</p>

### Example app

* You can run the example app
[via Expo](https://expo.io/@hectahertz/react-native-typography-example) or
[check the code](example/App.js), all of the screenshots are taken directly
from there!

## Typography collections

We provide a series of predefined collections for you to start with that match
the native design systems for iOS and Android.

You can **use them directly** wherever you would supply a
[textStyle](https://facebook.github.io/react-native/docs/textstyleproptypes.html).

There's also the option of [extending them](#customization-helpers) to create
your own styles.

### Material Design

Includes all the styles defined in the
[Material Design Guidelines](https://material.io/guidelines/style/typography.html#typography-styles).
Defines size, weight and color.

```JSX
import { material } from 'react-native-typography'

<Text style={material.display4}>Hello...
github  programming  github-starred-to-pinboard  crypto 
february 2018 by brianyang
react-native-typography - Pixel–perfect, native–looking typographic styles for React Native ✒️
android  font  react-native  ios  mobile  typography 
january 2018 by jppferguson
react-native-typography - Pixel–perfect, native–looking typographic styles for React Native ✒️
react-native  fonts 
december 2017 by mgreich
namuit starred hectahertz/react-native-typography
from:ifttt  github  from twitter_favs
december 2017 by namu
joeybaker starred hectahertz/react-native-typography
from:github  from:IFTTT 
december 2017 by joeybaker
"Pixel–perfect, native–looking typographic styles for React Native ✒️"
reactnative  mobile  ui  android  ux  ios 
december 2017 by kevinrood