Content size category

iOS

Android

2.0.0

Content size category is a user preference used to adjust text size and control content magnification in your app. This feature is especially useful for users with visual impairments or limited vision.

It’s also possible to use these values to build responsive layouts based on native settings rather than screen size.

iOS

Unistyles implementation is based on Human Interface Guidelines and the available values are:

xSmall, Small, Medium, Large, xLarge, xxLarge, xxxLarge, unspecified

2.4.0

In addition to above categories, you can also use the Accessibility sizes, available values are:

accessibilityMedium, accessibilityLarge, accessibilityExtraLarge, accessibilityExtraExtraLarge, accessibilityExtraExtraExtraLarge

Android

There is no direct equivalent to the iOS content size category on Android. The implementation is based on Font Scale and the available values are:

Small, Default, Large, ExtraLarge, Huge

Mapping is based on the following table:

Version	Value	Font Scale
-	Small	<= 0.85
-	Default	<= 1.0
-	Large	<= 1.15
-	ExtraLarge	<= 1.3
-	Huge	<=1.5
2.4.0	ExtraHuge	<=1.8
2.4.0	ExtraExtraHuge	>1.8

Your app restarts?

If you change the font scale in your Android settings, your app will restart by default. To prevent this, follow the instructions in the FAQ.

Web

There is no support for the content size category on the web. Reading the value will always resolve to unspecified.

Usage

To get the current contentSizeCategory you need to use UnistylesRuntime:

import { UnistylesRuntime } from 'react-native-unistyles'

// check the current content size category
export const ContentSizeCategory = () => (
    <Text>
        My device is using the {UnistylesRuntime.contentSizeCategory} size.
    </Text>
)

For convenience, library exposes two enums to map the values mentioned above:

import { AndroidContentSizeCategory, IOSContentSizeCategory } from 'react-native-unistyles'

// compare the current content size category based on platform

Advanced usage

To build layouts based on the content size category, you can use the value in your stylesheet:

import React from 'react'
import { View, Text } from 'react-native'
import { UnistylesRuntime, createStyleSheet, useStyles } from 'react-native-unistyles'

export const ContentSizeCategory = () => {
    const styles = useStyles(stylesheet, {
        contentSizeCategory: UnistylesRuntime.contentSizeCategory
    })

    return (
        <View style={styles.container}>
            <Text>
                My device is using the {UnistylesRuntime.contentSizeCategory} size.
            </Text>
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    container: {
        variants: {
            // for a unified experience across Android and iOS you need to map these values yourself
            contentSizeCategory: {
                xSmall: {
                    padding: theme.spacing(1),
                },
                Small: {
                    padding: theme.spacing(2),
                },
                Medium: {
                    padding: theme.spacing(3),
                },
                Large: {
                    padding: theme.spacing(4),
                },
                xLarge: {
                    padding: theme.spacing(5),
                },
                xxLarge: {
                    padding: theme.spacing(6),
                },
                xxxLarge: {
                    padding: theme.spacing(7),
                },
                unspecified: {
                    padding: theme.spacing(8),
                },
            },
        }
    },
}))