How to use react-native-typography with styled-components?

You can use the plain object exports from the library and spread them in your styled components. For example, spread material.titleObject in a StyleSheet.create call within your styled component definitions to extend or customize styles.

react-native-typography vs react-native-paper for text styling?

react-native-typography focuses solely on typographic styles and utilities, providing accurate native design system matches, while react-native-paper offers a full UI component library with Material Design, including text styles but as part of a larger package with more overhead.

Does react-native-typography support custom fonts?

The library is built around native system fonts for accessibility, but you can extend styles by overriding fontFamily properties in custom StyleSheets. However, this may break cross-platform consistency and accessibility features like Dynamic Type.

How to handle letter spacing on iOS with react-native-typography?

Use the sanFranciscoSpacing helper function, which converts font size to appropriate letter spacing for the San Francisco typeface. This is automatically applied in predefined collections but can be used manually for custom sizes, as shown in the Spacing/Kerning section.

Is react-native-typography compatible with Expo?

Yes, it's a pure JavaScript library with no native dependencies, so it works seamlessly with Expo projects. The repository includes a Demo Expo app that you can run to test it out, as mentioned in the Quick start section.

Can I use react-native-typography for web projects with React Native Web?

Absolutely, it includes webWeights for React Native Web's system font stack and is designed to work across iOS, Android, and web platforms, ensuring consistent typography in universal React Native apps.

Open-Awesome

react-native-typography

MITJavaScriptv1.4.1

Pixel-perfect, native-looking typographic styles and helpers for React Native apps.

GitHub

3.5k stars109 forks0 contributors

What is react-native-typography?

React Native Typography is a library that provides pixel-perfect, native-looking typographic styles and utilities for React Native applications. It solves the complexity of creating consistent and accessible text styles across iOS and Android by offering predefined collections matching Material Design and iOS Human Interface Guidelines, along with helpers for weights, colors, and spacing.

Target Audience

React Native developers building mobile applications who need to implement native-looking, accessible typography quickly and consistently across platforms.

Value Proposition

Developers choose this library because it handles cross-platform text styling quirks out-of-the-box, provides design system-accurate styles, and offers flexible customization while maintaining native typeface rendering for better accessibility.

Overview

Pixel–perfect, native–looking typographic styles for React Native ✒️

Use Cases

Best For

Implementing Material Design typography in React Native apps
Building iOS apps that follow Human Interface Guidelines for text
Creating cross-platform text styles with native font weights
Supporting Chinese, Japanese, or Korean languages in mobile apps
Extending or customizing native typographic styles
Ensuring consistent text rendering across iOS, Android, and web

Not Ideal For

Projects with custom design systems not based on Material Design or iOS Human Interface Guidelines
Teams wanting drop-in text components without manual StyleSheet integration
Apps where precise letter-spacing control on Android is critical for typography

Pros & Cons

Pros

Native Design Fidelity

Provides predefined collections like material and human that exactly match Material Design and iOS Human Interface Guidelines, ensuring pixel-perfect typography with platform-specific sizes, weights, and colors.

Cross-Platform Weight Helpers

Includes systemWeights that adapt to San Francisco on iOS and Roboto on Android, maintaining consistency and accessibility with native typefaces across platforms, as highlighted in the cross-platform section.

CJK Script Support

Offers dedicated collections like materialDense for Chinese, Japanese, and Korean languages, handling dense and tall scripts with appropriate adjustments, as detailed in the Dense and tall scripts documentation.

Flexible Styling Options

Exports each style as both a StyleSheet and plain object, allowing easy extension by spreading objects in custom StyleSheets or combining with other styles, as explained in the Customization & Helpers section.

Cons

Android Kerning Limitations

Admits in the F.A.Q. that letter-spacing isn't fully accurate for Material styles on Android due to React Native's lack of support, affecting typographic precision for display sizes.

Missing Font Weights

Notes that Roboto Black is unavailable by default on Android and CJK languages have fewer weight options on Android due to system constraints, limiting design flexibility.

No Component Export

Only provides StyleSheets and objects, requiring developers to manually apply styles to Text components, which can lead to more boilerplate compared to libraries offering pre-styled text components.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,847

Forks2,107

Last commit2 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,139

Forks1,801

Last commit4 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,948

Forks4,961

Last commit14 days ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,385

Forks3,615