rn-number-flow

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.