react-native-textography

Glorified helper around https://github.com/hectahertz/react-native-typography.

The library simply uses Material Design text styles on Android and iOSUIKit text styles on iOS.

Usage

import { Caption, Subheading, Text, Title } from "react-native-textography";

function App() {
  return (
    <View>
      <Text em>Emphasized Text</Text>
      <Caption>Small Text</Caption>
      <Subheading>Small Title</Subheading>
      <Title>Title</Title>
      <Title large>Large Title</Title>

      <Text type={isAndroid ? "display4" : "caption2"}>Weird Text</Text>
    </View>
  );
}

The em property

Android

The em property is mostly ignored on Android unless used with the <Text /> component, it will then use the body2 Android text style instead of the body1.

<Text em /> // --> body2

iOS

On iOS it always adds the suffix Emphasized to the current chosen iOS text style:

<Caption em /> // --> footnoteEmphasized
<Text em /> // --> bodyEmphasized
<Suheading em /> // --> subheadEmphasized
<Title em /> // --> title3Emphasized

Weights

For convenience you can specify weight on all components:

<Text thin />
<Caption light />
<Title regular />
<Text semibold />
<Text bold />
// ...

Text style names reference

Component	Android	iOS
<Caption />	caption	footnote
<Caption em />	caption	footnoteEmphasized
<Text />	body1	body
<Text em />	body2	bodyEmphasized
<Subheading />	subheading	subhead
<Subheading em />	subheading	subheadEmphasized
<Title />	title	title3
<Title em />	title	title3Emphasized
<Title large />	display1	largeTitleEmphasized
<Title large em />	display1	largeTitleEmphasized