Skip to main content

ScrollNumber

#ScrollNumber scrolling number component

Effect demonstration

1. Default effect

<ScrollNumber value={value} />

2. Modify style

<ScrollNumber
value={value}
height={100}
containerStyle={{
width: 100,
marginRight: 10,
borderWidth: 1,
borderColor: "red",
}}
textStyle={{ fontSize: 80, color: "#0000ff" }}
/>

3. Modify animation type

<ScrollNumber
value={value}
height={100}
animationType="spring"
containerStyle={{
width: 100,
marginRight: 10,
borderWidth: 1,
borderColor: "red",
}}
textStyle={{ fontSize: 80, color: "#0000ff" }}
/>

API

PropertiesRequiredDescriptionTypeDefault Value
numberRangefalseScrollable text range. The default is a number from 0-9string[][0-9]
valuetruecurrent valuestring
heightfalseDisplay height (if not passed, the height of the text will be calculated by default)number0
containerStylefalsecontainer styleViewStyle
textStylefalseText styleTextStyle
animationTypefalseScroll animation typetiming | springtiming