skip to content

In React Native, what is the iOS large content viewer, and when would you enable it with accessibilityShowsLargeContentViewer?

level: middleimportance: nice to knowfreq 12%

answer

  1. a long press shows an enlarged copy
  2. iOS 13 and later
  3. accessibilityLargeContentTitle names it
  4. for chrome that cannot grow
  5. no Android counterpart in these props

basics

~20 s

The iOS large content viewer shows an enlarged copy of an element's content on long press; you enable it with accessibilityShowsLargeContentViewer, optionally titled by accessibilityLargeContentTitle, for controls such as tab bar items whose text you had to cap.

solid answer

~40 s

The large content viewer is an iOS feature, available from iOS 13, that shows an enlarged overlay of an element's content while the user long-presses it. In React Native you turn it on with `accessibilityShowsLargeContentViewer={true}` on the element, and `accessibilityLargeContentTitle` sets the text shown, which only works when the first prop is `true`. It exists for interface chrome that cannot grow with the user's text size, such as a tab bar, a toolbar or a compact segmented control, where I cap the label with `maxFontSizeMultiplier` to keep the bar usable; the viewer gives large-text users a way to read the capped label. It is not a substitute for letting content text scale, and it is iOS-only, so Android still needs labels that fit or grow.

code

tsx · 16 lines
tsx
import {Pressable, Text} from 'react-native';

type TabItemProps = {label: string; selected: boolean; onPress: () => void};

export function TabItem({label, selected, onPress}: TabItemProps) {
  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="tab"
      accessibilityState={{selected}}
      accessibilityShowsLargeContentViewer
      accessibilityLargeContentTitle={label}>
      <Text maxFontSizeMultiplier={1.3}>{label}</Text>
    </Pressable>
  );
}

go deeper

for a junior

Recall that the large content viewer is an iOS long-press overlay enabled with accessibilityShowsLargeContentViewer.

for a middle

Explain when it applies, compact chrome with capped labels, and how accessibilityLargeContentTitle depends on the enabling prop.

for a senior

Show how you pair capped chrome labels with the viewer on iOS and plan the Android layout that must fit or grow without it.

for a principal

Decide which shared chrome components enable the viewer by default, so capped labels always come with a way to read them.

## The problem it solves Some interface elements cannot grow much without breaking: a bottom tab bar with four items, a toolbar of icon buttons, a compact segmented control. When a user chooses a large system text size, React Native scales their labels too, and the bar either overflows or has to cap the labels with `maxFontSizeMultiplier`. A capped label is then smaller than the user asked for. iOS offers a specific answer for this situation: the **large content viewer**. ## What the viewer is The **large content viewer** is an iOS system feature, available from **iOS 13**, that shows an enlarged copy of an element's content in an overlay while the user **long-presses** the element. It is aimed at people who use large text sizes: the bar keeps its compact layout, and a press-and-hold reveals the label at a readable size. ## The React Native props | Prop | Platform | Effect | |---|---|---| | `accessibilityShowsLargeContentViewer` | iOS | `true` shows the large content viewer when the user long-presses the element | | `accessibilityLargeContentTitle` | iOS | the title shown in the viewer; requires the previous prop to be `true` | They are accessibility props on `View` and the components built on it, so they work on a tab item container as well as on a `Pressable`. ## When to enable it Enable it on elements that meet all of these: 1. **The element is compact chrome**, not content: tab bar items, toolbar buttons, small segmented controls. 2. **Its text is capped or small on purpose**, typically with `maxFontSizeMultiplier`, because the layout cannot grow. 3. **The label matters**: the user needs to know which tab or tool it is. Do not enable it as a substitute for scaling body content. A boarding pass's passenger name, flight and seat must scale and wrap; showing them only in a long-press overlay would make them harder to read, not easier. ## Things to watch - **Title the viewer.** When the element is an icon with a small label, set `accessibilityLargeContentTitle` to the label, such as "Trips", so the viewer shows the meaningful word. - **Long press conflicts.** An element that also uses a long press for something else, such as reordering tabs, can compete with the viewer gesture; decide which behaviour the element needs. - **Android has no counterpart in these props.** On Android the same bar has to fit its labels, scale them within a cap that is still readable, or switch to a layout with more room when the font scale is large. ## A short example A boarding-pass app has a bottom bar with Wallet, Trips, Alerts and Profile. Each label is capped at `maxFontSizeMultiplier={1.3}` so the bar keeps one line. Each tab item also sets `accessibilityShowsLargeContentViewer` and a `accessibilityLargeContentTitle`, so an iOS user at a large text size can press and hold a tab to read its name before switching. The screens behind the tabs keep their text uncapped. ## Verifying On an iOS device set to a large accessibility text size, long-press each tab item and check that the overlay appears with the right title, and that a short tap still switches tabs.

  • Why not enable the large content viewer on every Text in the app?
    It is designed for compact chrome that cannot grow. Content text should scale and wrap with the user's setting; hiding it behind a long-press overlay makes reading slower and depends on the user knowing the gesture. Keep the viewer for capped labels in bars and toolbars, where growing is not an option.

saying these in an interview costs you the question

  • The large content viewer works on both iOS and Android in React Native.
  • Enable the large content viewer instead of letting body text scale.
  • accessibilityLargeContentTitle works without accessibilityShowsLargeContentViewer.
  • The large content viewer appears on a short tap of the element.
  • The large content viewer enlarges the element permanently in the layout.