Number Flow React Native

Getting Started

Install Number Flow React Native and its peer dependencies

Installation

Install the library

bun add number-flow-react-native
npm install number-flow-react-native
yarn add number-flow-react-native
pnpm add number-flow-react-native

Install Reanimated

bun add react-native-reanimated
npm install react-native-reanimated
yarn add react-native-reanimated
pnpm add react-native-reanimated

Add the Reanimated Babel plugin to your babel.config.js (must be listed last):

module.exports = {
  plugins: [
    // Reanimated v4+
    'react-native-worklets/plugin',
    // Reanimated v3
    // 'react-native-reanimated/plugin',
  ],
};

(Optional) Install Skia

If you want to use the Skia renderer, also install @shopify/react-native-skia:

bun add @shopify/react-native-skia
npm install @shopify/react-native-skia
yarn add @shopify/react-native-skia
pnpm add @shopify/react-native-skia

(Optional) Install MaskedView

For the best visual quality with the native renderer, install @rednegniw/masked-view to enable smooth gradient masking at digit edges. Without it, the native renderer falls back to per-digit opacity fading.

bun add @rednegniw/masked-view
npm install @rednegniw/masked-view
yarn add @rednegniw/masked-view
pnpm add @rednegniw/masked-view

@rednegniw/masked-view requires a dev build (Expo Dev Client or bare RN). It won't work in Expo Go — the native renderer will automatically fall back to per-digit opacity fading in those environments.

Peer Dependencies

PackageVersionRequired
react>= 18Yes
react-native>= 0.73Yes
react-native-reanimated>= 3.0.0Yes
@shopify/react-native-skia>= 2.0.0Only for Skia components
@rednegniw/masked-view>= 0.4.0Optional — smooth gradient masking for native renderer

On this page