react-native-animated-number-input

A performant, animated, and auto-sizing number input for React Native and Expo. Supports both Expo Managed and Bare workflows.

---

---

✨ Features

• Animated digit transitions
• Auto font-size adjustment based on container width
• Supports decimal and thousand separators
• Prefix and suffix support
• Custom animation duration and styles
• Works in both Expo and Bare React Native
• Written in TypeScript

---

🚀 Installation

npm install react-native-animated-number-input
# or
yarn add react-native-animated-number-input

Peer dependencies:

• react-native-reanimated (v3+)
• react-native
• react

---

📦 Usage

import { AnimatedNumberInput } from 'react-native-animated-number-input';

export default function MyScreen() {
  const [value, setValue] = React.useState('1234.56');
  return (
    <AnimatedNumberInput
      value={value}
      onChangeText={setValue}
      precision={2}
      maxFontSize={48}
      containerStyle={{ width: 200 }}
      prefix="$"
      suffix=" USD"
      decimalSeparator=","
      thousandSeparator="."
      animationDuration={200}
      placeholder="Enter a number"
      textStyle={{ color: '#222', fontWeight: 'bold' }}
    />
  );
}

---

🛠 API Reference

<AnimatedNumberInput />

A fully controlled, animated, auto-sizing number input component.

Props

Prop	Type	Default	Description
value	string	Required	The current value of the input (controlled).
onChangeText	(value: string) => void	Required	Callback when the value changes.
textStyle	TextStyle	{}	Style for the input text.
containerStyle	ViewStyle	{}	Style for the container.
decimalSeparator	string	'.'	Character to use as the decimal separator.
thousandSeparator	string	','	Character to use as the thousand separator.
prefix	string	undefined	String to display before the number (e.g., currency symbol).
suffix	string	undefined	String to display after the number (e.g., unit).
precision	number	2	Number of decimal places to allow.
animationDuration	number	100	Duration of digit transition animations in milliseconds.
maxFontSize	number	64	Maximum font size for the digits.
exiting	EntryOrExitLayoutType (Reanimated animation)	FadeOutDown.duration(animationDuration)	Animation for exiting digits.
entering	EntryOrExitLayoutType (Reanimated animation)	FadeInDown.duration(animationDuration)	Animation for entering digits.
placeholder	string	undefined	Placeholder text when the value is empty.
...TextInputProps	All other TextInput props except value/onChangeText		You can pass any other valid TextInput prop (e.g., autoFocus, keyboardType, etc.).

Example with all features

<AnimatedNumberInput
  value={value}
  onChangeText={setValue}
  precision={2}
  maxFontSize={48}
  containerStyle={{ width: 200 }}
  prefix="$"
  suffix=" USD"
  decimalSeparator=","
  thousandSeparator="."
  animationDuration={200}
  placeholder="Enter a number"
  textStyle={{ color: '#222', fontWeight: 'bold' }}
  autoFocus
/>

---

🧪 Example App

See the example/ folder for a working Expo + Bare React Native demo. The example demonstrates:

• Animated transitions
• Auto font sizing
• Prefix/suffix
• Custom separators
• Placeholder
• Custom styles

---

🤝 Contributing

PRs and issues welcome! Please open an issue or submit a pull request.

See CONTRIBUTING.md for guidelines.

---

📜 Changelog

See CHANGELOG.md for release notes.

---

🧑‍💻 Code of Conduct

This project follows a Code of Conduct to foster an open and welcoming community.

---

📄 License

MIT © Sivantha Paranavithana