The UIKitTypography
interface contains a set of text styles used in UIKit components. All fonts used in UIKit are configured under this interface, but you can also customize the values of UIKitTypography
in UIKitTheme
to use different fonts in views.
Typography | Font family | Size | Line height | Weight |
---|---|---|---|---|
h1 | System | 18 | 20 | 500 |
h2 | System | 16 | 20 | bold |
subtitle1 | System | 16 | 22 | 500 |
subtitle2 | System | 16 | 22 | normal |
body1 | System | 16 | 20 | normal |
body2 | System | 14 | 16 | 500 |
body3 | System | 14 | 20 | normal |
button | System | 14 | 16 | bold |
caption1 | System | 12 | 12 | bold |
caption2 | System | 12 | 12 | normal |
caption3 | System | 11 | 12 | bold |
caption4 | System | 11 | 12 | normal |
There are two ways to use fonts in UIKit for React Native: use the Text
component or use the typography
property of UIKitTheme
.
As shown in the code below, you can use the Text
component of UIKit for React Native to render various fonts.
You can also get access to the fonts through the typography
property of UIKitTheme
.
You can customize UIKitTypography
by either overriding the colors with the typography
property of the existing theme or setting custom fonts when creating a new theme.
See the code below on how to override the fonts with typography
of LightUIKitTheme
.
When creating a new theme with custom fonts, you can set the text styles in the shared
property. This allows you to apply the text style changes to all typographies in UIKit.