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>
);
}
em
property
The 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 |