Skip to content

Content size category

Content Size Category

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.


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

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


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

accessibilityMedium, accessibilityLarge, accessibilityExtraLarge, accessibilityExtraExtraLarge, accessibilityExtraExtraExtraLarge


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:

VersionValueFont Scale
-Small<= 0.85
-Default<= 1.0
-Large<= 1.15
-ExtraLarge<= 1.3


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


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 = () => (
My device is using the {UnistylesRuntime.contentSizeCategory} size.

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}>
My device is using the {UnistylesRuntime.contentSizeCategory} size.
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),