Skip to main content
These iOS-only modifiers refine text rendering — shrinking long strings to fit, tightening character spacing, varying font width, animating content changes, and attaching badges to list rows or tab items. Use minimumScaleFactor and allowsTightening together with lineLimit to gracefully fit text in fixed frames. Use contentTransition to animate text updates — particularly numeric counters.

​
minimumScaleFactor

Sets the minimum scale factor for text before it truncates.
​
number
required
The minimum scale factor, from 0 to 1. For example, 0.5 allows text to shrink to 50% of its original size before truncating.
Auto-shrinking text
Fitting a title in a fixed frame
The system progressively reduces the font size down to minimumScaleFactor * originalSize before falling back to truncation. A value of 1 (the default) means no shrinking is allowed. Best used in combination with lineLimit to constrain the text to a fixed number of lines.

​
allowsTightening

Allows text to tighten character spacing to fit available space before truncating.
​
boolean
default:"true"
Whether to allow the text to tighten its character spacing. Defaults to true.
Allow text to compress before truncating
Disable tightening
Text tightening reduces the inter-character spacing slightly to fit more text in the available width. It is applied before truncation but after the minimum scale factor (if set).

​
fontWidth

Sets the font width variant for text content.
​
FontWidth
required
The font width to apply. See FontWidth for available values (e.g., "compressed", "condensed", "standard", "expanded").
Condensed text
Expanded text
Combined with weight and design

​
badge

Adds a badge displaying a count or text to a component, typically used in tab bars or list rows.
​
number | string
required
The badge content. Pass a number for a count badge, or a string for a text badge.
Numeric badge on a list row
Text badge
Badge on a tab item
Badges are most commonly used with List rows and TabView items. On iOS, the system renders the badge in a rounded capsule aligned to the trailing edge.

​
contentTransition

Controls how content changes are animated within a view.
​
ContentTransitionType | { countsDown: boolean }
required
The content transition type. Can be:
  • "numericText" — animates numeric text changes with a rolling digit effect
  • "opacity" — cross-fades between old and new content
  • "identity" — no animation, content updates immediately
  • "interpolate" — smoothly interpolates between old and new content
  • { countsDown: boolean } — numeric text transition with direction hint (true for counting down, false for counting up)
Animate a numeric counter
Numeric text with direction hint
Cross-fade content changes

​
See also

  • font — overall font style
  • fontWeight — font weight (e.g., bold, regular)
  • fontDesign — font design (e.g., serif, monospaced)
  • lineLimit — limits the number of displayed lines
  • transition — view-level appearance and disappearance transitions
  • FontWidth — font width values