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