react-native-money-format-input

A customizable and user-friendly React Native component for real-time currency formatting in input fields. It supports formatting integers and decimals, along with optional currency symbols, and locale-aware number formatting.

Features

• Real-time currency formatting: Automatically formats integers and decimals as you type.
• Locale-aware formatting: Supports multiple locales for integer formatting (e.g., 1,000 for en-US or 1.000 for de-DE).
• Customizable styles: Separate styling options for the currency symbol, integer, and decimal portions.
• Flexible currency symbol placement: Allows you to position the currency symbol before or after the number.
• Input sanitization: Ensures only valid (string) numeric input is processed. No other characters apart from numbers.

Installation

Install the library via npm or yarn:

npm install react-native-money-format-input
# or
yarn add react-native-money-format-input

Usage

Here’s a basic example demonstrating how to use the MoneyInput component:

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import MoneyInput from 'react-native-money-format-input';

const App = () => {
  const [currencyValue, setCurrencyValue] = useState<number>(0);

  // Handler converts the STRING value (that RN's <TextInput> needs)
  // into a NUMBER and clears it of any extra impurities if any.
  const handleCurrencyValue = (value: string) => {
    const cleanedValue = value.replace(/[^0-9.]/g, '');
    const numericValue = parseFloat(cleanedValue);
    setCurrencyValue(isNaN(numericValue) ? 0 : numericValue);
  };

  return (
    <View style={styles.container}>
      <MoneyInput
        // Only NEEDED prop
        setValue={handleCurrencyValue}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Props

The MoneyInput component accepts the following props:

| Prop Name | Type | Default | Description | |-----------------------|--------------------------------|-----------|-------------------------------------------------------------------------------------------------| | setValue | (finalNumber: string) => void | Required | Callback invoked when the input value changes. The final number is returned as a string. (<TextInput only receives string values>) | | symbol | string | "$" | The currency symbol to display. | | symbolAtEnd | boolean | false | Whether the currency symbol appears before (false) or after (true) the number. | | locale | string | "en-US" | Locale string used for formatting the integer portion (e.g., en-US for 1,000). | | defaultInteger | string | "" | The default integer value (e.g., "1000"). | | defaultFloat | string | "" | The default float value (e.g., "50" for .50). | | currencySymbolStyle | StyleProp<TextStyle> | null | Style applied to the currency symbol. | | intNumberStyle | StyleProp<TextStyle> | null | Style applied to the integer portion of the number. | | floatNumberStyle| StyleProp<TextStyle> | null | Style applied to the decimal portion of the number. |

Roadmap

Upcoming Features

• Improved styling: Enhance CSS manipulation for dynamic and responsive styling.
• Enhanced backspace behavior: Add flags to handle specific actions, such as clearing the decimal portion when backspacing an empty integer.
• Digit/character limitations: Allow configuration to limit input size, preventing overflow or excessive digits.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library