Quick Start
Display your first animated number with Number Flow React Native
Import NumberFlow
import { NumberFlow } from 'number-flow-react-native';Use it with a value
function PriceDisplay() {
const [price, setPrice] = useState(42.99);
return (
<NumberFlow
value={price}
format={{ style: 'currency', currency: 'USD' }}
style={{ fontSize: 32, fontFamily: 'System', color: '#000' }}
/>
);
}Every time price changes, each digit rolls smoothly to its new value.
Explore the components
Check out the Components section for all four components — NumberFlow, TimeFlow, SkiaNumberFlow, and SkiaTimeFlow — with full prop references.
Import Paths
The library exposes three entry points:
// Native components (default)
import { NumberFlow, TimeFlow } from 'number-flow-react-native';
// Explicit native-only import (same as default)
import { NumberFlow, TimeFlow } from 'number-flow-react-native/native';
// Skia components (requires @shopify/react-native-skia)
import { SkiaNumberFlow, SkiaTimeFlow, useSkiaFont } from 'number-flow-react-native/skia';The root import only includes native components — it does not pull in @shopify/react-native-skia. You only need Skia installed if you import from number-flow-react-native/skia.