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:

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

Usage

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

1import React, { useState } from 'react';
2import { StyleSheet, View } from 'react-native';
3import MoneyInput from 'react-native-money-format-input';
4
5const App = () => {
6  const [currencyValue, setCurrencyValue] = useState<number>(0);
7
8  // Handler converts the STRING value (that RN's <TextInput> needs)
9  // into a NUMBER and clears it of any extra impurities if any.
10  const handleCurrencyValue = (value: string) => {
11    const cleanedValue = value.replace(/[^0-9.]/g, '');
12    const numericValue = parseFloat(cleanedValue);
13    setCurrencyValue(isNaN(numericValue) ? 0 : numericValue);
14  };
15
16  return (
17    <View style={styles.container}>
18      <MoneyInput
19        // Only NEEDED prop
20        setValue={handleCurrencyValue}
21      />
22    </View>
23  );
24};
25
26const styles = StyleSheet.create({
27  container: {
28    flex: 1,
29    justifyContent: 'center',
30    alignItems: 'center',
31  },
32});
33
34export default App;
35

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