RollingNumber

Display numbers with a rolling digit animation

Import: import { RollingNumber } from 'react-native-mantine';

Usage

import { RollingNumber } from 'react-native-mantine';

<RollingNumber
  value={value}
  prefix="$ "
  thousandSeparator
  decimalScale={2}
  textStyle={{ fontSize: 28, fontWeight: '700' }}
/>

// Change the value to trigger the rolling animation
setValue(Math.floor(Math.random() * 100000));

Props

Prop	Type	Default	Description
`value` (required)	`number \| string`		Value to display
`prefix`	`string`		Prefix added before the formatted value (e.g., " quot;)
`suffix`	`string`		Suffix added after the formatted value (e.g., " USD")
`thousandSeparator`	`string \| boolean`		Thousands separator, true for "," or any string (e.g., " ", ".")
`decimalSeparator`	`string`	`"."`	Decimal separator character
`decimalScale`	`number`		Limits the number of digits after the decimal point
`fixedDecimalScale`	`boolean`	`false`	If true, zeros are added to match decimalScale
`animationDuration`	`number`	`600`	Roll animation duration in ms, 0 disables animation
`timingFunction`	`'ease' \| 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out'`	`"ease"`	Animation timing function
`tabularNumbers`	`boolean`	`true`	If set, digits use tabular figures to prevent layout shifts
`textStyle`	`TextStyle`		Text style applied to every character
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm