https://github.com/eightyfive/react-native-textography
Glorified layer atop react-native-typography
https://github.com/eightyfive/react-native-textography
Last synced: 6 months ago
JSON representation
Glorified layer atop react-native-typography
- Host: GitHub
- URL: https://github.com/eightyfive/react-native-textography
- Owner: eightyfive
- License: mit
- Created: 2021-02-04T15:59:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-04T16:16:36.000Z (over 5 years ago)
- Last Synced: 2025-03-05T23:19:36.415Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-textography
Glorified helper around [`react-native-typography`](https://github.com/hectahertz/react-native-typography).
The library simply uses [Material Design](https://github.com/hectahertz/react-native-typography#material-design) text styles on Android and [iOSUIKit](https://github.com/hectahertz/react-native-typography#iosuikit) text styles on iOS.
## Usage
```js
import { Caption, Subheading, Text, Title } from "react-native-textography";
function App() {
return (
<>
Body Text
Emphasized Text
Small Text
Small Title
Title
Large Title
Weird Text
>
);
}
```
## Text styles reference
| Component | Android | iOS |
| -------------------- | ---------- | -------------------- |
| `` | caption | footnote |
| `` | caption | footnoteEmphasized |
| `` | body1 | body |
| `` | body2 | bodyEmphasized |
| `` | subheading | subhead |
| `` | subheading | subheadEmphasized |
| `` | title | title3 |
| `` | title | title3Emphasized |
| `` | display1 | largeTitleEmphasized |
| `` | display1 | largeTitleEmphasized |
> **Note**: The `em` property is mostly ignored on Android.
## The `white` property
The `white` property adds the "White" suffix to the current text style name:
```js
// Android
// --> body1White
// --> display1White
// iOS
// --> bodyWhite
// --> largeTitleEmphasizedWhite
// ...
```
## Weights
For convenience you can specify the [font weight](https://github.com/hectahertz/react-native-typography#system-weights) on all components:
```js
// ...
```