Content Transition

NumericText

Text whose glyphs transition individually when the value changes.

import { NumericText } from 'expo-content-transition';

NumericText renders a line of text and animates every change to it. It sizes itself to its content like a Text, and takes its typography as props or through style.

<NumericText
  value={count}
  fontSize={64}
  fontWeight="600"
  monospacedDigits
  direction="auto"
  duration={420}
  bounce={0.46}
/>

Content

The text itself, how it's matched between values, and the view around it. See Alignment and separators.

PropTypeDefault
value*string | number–
alignment'start' | 'center' | 'end''start'
decimalSeparatorstring'.'
styleStyleProp<TextStyle>–

Typography

How the glyphs are drawn. Each can also be set through style; an explicit prop wins. See Typography.

PropTypeDefault
fontSizenumber–
fontWeight'normal' | 'bold' | '100' … '900''normal'
fontStyle'normal' | 'italic''normal'
fontFamilystring–
letterSpacingnumber–
colorstring–
monospacedDigitsbooleanfalse

Transition

How a change moves. See Transitions and Blur and clipping, or try them all in the playground.

PropTypeDefault
direction'auto' | 'up' | 'down''auto'
durationnumber420
bouncenumber0.46
enterScalenumber0.4
travelnumber0.333
blurbooleantrue
blurIntensitynumber1
maxBlurRadiusnumberunbounded
clipbooleantrue
animatedbooleantrue

Behaviour

  • First render. The first value is shown without animating. Every later change animates, unless animated is false.
  • Rapid changes. A change that arrives mid-transition retargets the glyphs already moving; nothing queues up or jumps.
  • Sizing. The view reports the size of its current text. Give it a width, or let it stretch, to align the text inside.
  • Memoised. NumericText is wrapped in React.memo, and only the string crosses to the native side when it changes.

Types

NumericText's props are exported as INumericText, with the typography and transition groups available on their own. See Types.