Typography resource

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.

List of typographies

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

How to use

There are two ways to use fonts in UIKit for React Native: use the Text component or use the typography property of UIKitTheme.

Text component

As shown in the code below, you can use the Text component of UIKit for React Native to render various fonts.

import { Text } from '@sendbird/uikit-react-native-foundation';

const TextList = () => {
    return (
<>
<Text h1>{'h1'}</Text>
<Text h2>{'h2'}</Text>
<Text caption1>{'caption1'}</Text>
<Text caption2>{'caption2'}</Text>
<Text caption3>{'caption3'}</Text>
<Text caption4>{'caption4'}</Text>
</>
    );
};

const TextButton = ({ children, ...props }) => {
    return (
    <Pressable {...props}>
<Text button>{children}</Text>
    </Pressable>
    );
};

Typography property

You can also get access to the fonts through the typography property of UIKitTheme.

import { Text } from 'react-native';

const Component = () => {
    const { typography } = useUIKitTheme();

    return <Text style={typography.h1}>{'Text'}</Text>;
};

Customize the typography

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.

Customize with default themes

See the code below on how to override the fonts with typography of LightUIKitTheme.

import { LightUIKitTheme, createTypography } from '@sendbird/uikit-react-native-foundation';

// Override typography.
LightUIKitTheme.typography = createTypography({
    // Apply to h1 typography.
    h1: {
        fontSize: 24,
        lineHeight: 26,
    },
    // Apply to h2 typography.
    h2: {
        fontSize: 20,
        lineHeight: 24,
    },
    // Apply to all typographies.
    shared: {
        fontFamily: 'Roboto',
    },
});

// Clear h1 typography.
LightUIKitTheme.typography.h1 = {};

Customize with createTheme()

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.

import { createTheme } from '@sendbird/uikit-react-native-foundation';

const CustomTheme = createTheme<'custom'>({
    appearance: 'custom',
    colors: (palette) => ({
    /* ... */
    }),
    typography: {
        h1: {
            fontSize: 24,
            lineHeight: 26,
        },
        h2: {
            fontSize: 20,
            lineHeight: 24,
        },
        shared: {
            fontFamily: 'Roboto',
        },
    },
});