React Native Number Flow 🔢

A beautiful, high-performance animated number transition component for React Native. Perfect for displaying counters, prices, statistics, and any numeric values with style! 💫

Demo 🎥

Features ✨

• 🚀 Smooth, fluid animations powered by React Native Reanimated
• 🎨 Highly customizable styles and animations
• 📱 Cross-platform support (iOS & Android)
• 🔧 Easy to configure animation parameters
• ⚡️ Optimized performance
• 🎯 TypeScript support
• 📦 Zero dependencies (except for React Native Reanimated)

Installation 📦

# Using npm
npm install rn-number-flow

# Using yarn
yarn add rn-number-flow

Make sure you have react-native-reanimated installed and configured in your project.

Usage 💻

import NumberFlow from 'rn-number-flow';

// Basic usage
<NumberFlow value="1234" />

// With custom styling
<NumberFlow
  value="1234.56"
  style={{ fontSize: 24, color: '#007AFF' }}
  separatorStyle={{ color: '#666' }}
/>

// With custom animation config
<NumberFlow
  value="9999"
  animationConfig={{
    enabled: true,
    animateOnMount: true,
    digitDelay: 50,
    mass: 0.8,
    stiffness: 75,
    damping: 15
  }}
/>

Props 📝

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | The numeric value to display | | style | TextStyle | - | Style for the digits | | separatorStyle | TextStyle | - | Style for non-numeric characters (like commas, decimals) | | autoFitText | boolean | false | Enable/disable text auto-fitting based on ascender | | animationConfig | AnimationConfig | - | Configuration for animations |

AnimationConfig Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | true | Enable/disable animations | | animateOnMount | boolean | true | Animate on initial render | | digitDelay | number | 20 | Delay between digit animations (ms) | | mass | number | 0.8 | Spring animation mass | | stiffness | number | 75 | Spring animation stiffness | | damping | number | 15 | Spring animation damping | | reduceMotion | ReduceMotion | System | Respect system's reduce motion settings |

Examples 🎯

Basic Counter

import NumberFlow from 'rn-number-flow';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <View>
      <NumberFlow value={count.toString()} />
      <Button title="Increment" onPress={() => setCount(c => c + 1)} />
    </View>
  );
}

Price Display

<NumberFlow
  value="$1,234.99"
  style={{ fontSize: 32, fontWeight: 'bold' }}
  separatorStyle={{ color: '#666' }}
  animationConfig={{ digitDelay: 50 }}
/>

Contributing 🤝

Contributions are welcome! Feel free to open issues and submit PRs.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License 📄

MIT

Made with ❤️ for the React Native community.