UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

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

TypographyFont familySizeLine heightWeight

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',
        },
    },
});