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.