AnimatedNumber

Features

• Smoothly animates number updates with layout transitions
• Animated comma or dot separators between every 3 digits
• Supports two animation strategies: "translate" and "swap"
• Supports customizable animation configs: "timing" and "spring"

Dependencies

This component requires React Native Reanimated:

npx expo install react-native-reanimated

Usage

This component is self-contained and can be used by simply copying the file.

Steps

1. Copy and paste the AnimatedNumber.tsx file into your project

2. Use it inside your component:

   import AnimatedNumber from "./AnimatedNumber"
   import { TextInput, View } from "react-native"
   import { useRef, useState } from "react"
   
   export default function App() {
     const [number, setNumber] = useState("")
     const inputRef = useRef(null)
   
     return (
       <View style={styles.container}>
         <AnimatedNumber
           number={number}
           textStyle={styles.text}
           containerStyle={{ width: "100%", justifyContent: "center" }}
           separatorAnimation="swap"
           separator="comma"
           animationConfig={{
             type: "spring",
             damping: 20,
             stiffness: 120
           }}
         />
         <TextInput
           ref={inputRef}
           autoFocus
           style={{ width: "100%", height: 0, backgroundColor: "transparent", position: "absolute", bottom: 0 }}
           onChangeText={setNumber}
           keyboardType="numeric"
         />
       </View>
     )
   }

Props

AnimationConfig

AnimationConfig can be one of two types. The type field determines which fields are applicable.

TimingOptions

SpringOptions

Examples

// timing
animationConfig={{
  type: "timing",
  duration: 400,
  easing: Easing.out(Easing.exp)
}}

// spring
animationConfig={{
  type: "spring",
  damping: 20,
  stiffness: 120,
  overshootClamp: false
}}

Made with love by niche.guys
Let the numbers flow beautifully.