AnimatedSlidingNumber Component

Numbers with smooth sliding animations for each digit change. Perfect for counters, timers, odometers, financial displays, and any numerical display that needs engaging visual feedback.

✨ Features

Smooth Digit Transitions: Each digit slides smoothly when the number changes
Auto-Formatting: Automatically detects and formats numbers (decimals, thousands separators)
Thousands Separators: Automatic comma placement for numbers ≥ 1,000
Smart Decimal Detection: Auto-detects optimal decimal places (max 2 for readability)
Customizable Styling: Full control over text appearance and container styling
Zero-to-Value Animation: Starts from 0 and smoothly animates to the target value
TypeScript Support: Fully typed with comprehensive prop interfaces
Performance Optimized: Efficient animations using React Native's Animated API

🚀 Installation

The component is already included in this project. It consists of two files:

components/animated/
├── AnimatedSlidingNumber.tsx  # Main component
└── SlidingDigit.tsx          # Individual digit animation

📖 Basic Usage

Simple Auto-Formatting (Recommended)

tsx

import AnimatedSlidingNumber from './components/animated/AnimatedSlidingNumber';

export default function MyComponent() {
  const [value, setValue] = useState(0);

  return (
    <AnimatedSlidingNumber
      number={value}
      textStyle={{ fontSize: 32, color: '#00D4AA' }}
      autoFormat={true}  // 🎉 That's it! Auto-handles everything
    />
  );
}

Manual Control (Advanced)

tsx

<AnimatedSlidingNumber
  number={value}
  textStyle={{ fontSize: 32, color: '#00D4AA' }}
  autoFormat={false}
  minDigits={3}
  decimalPlaces={2}
  showThousandsSeparator={true}
/>

🎛️ Props

Prop	Type	Default	Description
`number`	`number`	Required	The number to display
`textStyle`	`StyleProp<TextStyle>`	`undefined`	Style object for the digit text
`containerStyle`	`StyleProp<ViewStyle>`	`undefined`	Style object for the container
`autoFormat`	`boolean`	`true`	Enable automatic formatting
`minDigits`	`number`	`2`	Minimum number of digits to display (pads with zeros)
`maxDigits`	`number`	`6`	Maximum number of digits to display (clamps the value)
`decimalPlaces`	`number`	`0`	Number of decimal places (0 = auto-detect, -1 = force integer)
`showThousandsSeparator`	`boolean`	`false`	Show thousands separator (auto-enabled when autoFormat=true)

🎯 Auto-Formatting Examples

When autoFormat={true} (default), the component automatically:

tsx

// API returns 2000 → displays "2,000"
<AnimatedSlidingNumber number={2000} autoFormat={true} />

// API returns 104459.34 → displays "104,459.34"  
<AnimatedSlidingNumber number={104459.34} autoFormat={true} />

// API returns 50.5 → displays "50.5" (no comma, <1000)
<AnimatedSlidingNumber number={50.5} autoFormat={true} />

// API returns 123 → displays "123" (no comma, no decimals)
<AnimatedSlidingNumber number={123} autoFormat={true} />

📱 Real-World Examples

Bitcoin Price Display

tsx

const [bitcoinPrice, setBitcoinPrice] = useState(0);

// Fetch from API
const fetchPrice = async () => {
  const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd');
  const data = await response.json();
  setBitcoinPrice(data.bitcoin.usd); // e.g., 104459.34
};

return (
  <View style={styles.priceContainer}>
    <Text style={styles.currencySymbol}>$</Text>
    <AnimatedSlidingNumber
      number={bitcoinPrice}
      textStyle={styles.bitcoinText}
      autoFormat={true}  // Automatically shows: $104,459.34
    />
  </View>
);

Counter with Auto-Format

tsx

const [count, setCount] = useState(0);

return (
  <AnimatedSlidingNumber
    number={count}
    textStyle={styles.counterText}
    autoFormat={true}  // Shows: 1,234 when count reaches 1234
  />
);

Timer Display (Manual Control)

tsx

const [seconds, setSeconds] = useState(3725); // 1:02:05

return (
  <View style={styles.timerContainer}>
    <AnimatedSlidingNumber
      number={Math.floor(seconds / 3600)}
      textStyle={styles.timerText}
      autoFormat={false}  // Manual control for timer format
      minDigits={2}
      decimalPlaces={-1}  // Force integer
    />
    <Text>:</Text>
    <AnimatedSlidingNumber
      number={Math.floor((seconds % 3600) / 60)}
      textStyle={styles.timerText}
      autoFormat={false}
      minDigits={2}
      decimalPlaces={-1}
    />
    <Text>:</Text>
    <AnimatedSlidingNumber
      number={seconds % 60}
      textStyle={styles.timerText}
      autoFormat={false}
      minDigits={2}
      decimalPlaces={-1}
    />
  </View>
);

🎨 Styling Examples

Bitcoin Orange Theme

tsx

const styles = StyleSheet.create({
  bitcoinText: {
    fontSize: 36,
    fontWeight: 'bold',
    color: '#F7931A',
    fontFamily: 'monospace',
  },
});

Green Money Theme

tsx

const styles = StyleSheet.create({
  moneyText: {
    fontSize: 48,
    fontWeight: 'bold',
    color: '#32D74B',
    fontFamily: 'monospace',
    textShadowColor: 'rgba(50, 215, 75, 0.3)',
    textShadowOffset: { width: 0, height: 2 },
    textShadowRadius: 4,
  },
});

🔧 Migration from Manual to Auto-Format

Before (Manual Setup)

tsx

// Old way - lots of configuration
<AnimatedSlidingNumber
  number={bitcoinPrice}
  textStyle={styles.bitcoinText}
  minDigits={5}
  maxDigits={6}
  decimalPlaces={2}
  showThousandsSeparator={true}
/>

After (Auto-Format)

tsx

// New way - one line!
<AnimatedSlidingNumber
  number={bitcoinPrice}
  textStyle={styles.bitcoinText}
  autoFormat={true}
/>

🎯 Use Cases

Financial Apps: Currency amounts, stock prices, account balances with auto-formatting
Fitness Apps: Step counters, calorie counters, workout timers
Gaming: Score displays, level counters, achievement progress
Analytics: Real-time metrics, visitor counts, sales numbers
E-commerce: Product ratings, review counts, inventory numbers
Crypto: Live price displays with proper formatting

⚡ Auto-Format Logic

When autoFormat={true}:

Decimal Detection:
- 123.45 → Shows 2 decimal places
- 123.5 → Shows 1 decimal place
- 123 → Shows no decimal places
- Max 2 decimal places for readability
Thousands Separator:
- Number >= 1000 → Automatically adds commas
- 999 → No comma
- 1000 → 1,000
- 1234567 → 1,234,567
Smart Formatting:
- API value 104459.34 → Display 104,459.34
- API value 2000 → Display 2,000
- API value 50.5 → Display 50.5

Animated Sliding Text

About