How To Add Comma Separators in React Native Text Input

Question

I am working on a React Native app. I am using Formik for my forms. And now my requirement is I have a TextInput where the user will type a price. This input field should add comma separators for 1000s for example if I type 10000 the input field should show as 10,000 and if I type 100000 it should show as 100,000. How to do that. FYI my TextInput is imported from React Native Paper

Below is my code:

 <TextInput
  style={{ width: "auto", marginBottom: 10 }}
  mode="outlined"
  label="Starting Price"
  placeholder="25,000"
  inputMode="numeric"
  defaultValue="0"
  left={<TextInput.Affix text="LKR" />}
  onChangeText={obj.handleChange("startingPrice")}
  value={obj.values.startingPrice}
   />

Answer 1

You have an handleChange function. You can use this code in your function.

This is an example

const number = 100000;
const commaNumber = number.toLocaleString();

Output is: 100,000

I hope it helps.

Answer 2

Format a price string before showing it in TextInput and remove formatting before storing it. Something like this:

const [price, setPrice] = React.useState('');

<TextInput
...
  inputMode="numeric"
  onChangeText={(value) => setPrice(value.replaceAll(',', ''))}
  value={Number(price).toLocaleString()}
/>

Answer 3

Here is the example. That can help you.

The Number.prototype.toLocaleString() method is used to format a number into a string representation according to the specified locale and formatting options. This method provides a way to automatically format numbers based on the user’s locale, including adding commas for thousands separation and specifying decimal points.

const number = 1234567.89;

// Using default formatting (based on user's locale)
const formattedNumberDefault = number.toLocaleString();
console.log(formattedNumberDefault); // Output depends on user's locale

// Specifying a specific locale (e.g., en-US)
const formattedNumberUS = number.toLocaleString('en-US');
console.log(formattedNumberUS); // Output: "1,234,567.89"

// Specifying options for formatting
const options = {
  style: 'decimal',  // Other options: 'currency', 'percent', etc.
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
};
const formattedWithOptions = number.toLocaleString('en-US', options);
console.log(formattedWithOptions); // Output: "1,234,567.89"

This method also handles scientific notation numbers, commonly known as exponential notation, which are represented using the format x * 10^y, where x is a coefficient and y is the exponent.

const scientificNumber = 1.234e6; // 1.234 * 10^6 = 1234000

// Using default formatting (based on user's locale)
const formattedScientificDefault = scientificNumber.toLocaleString();
console.log(formattedScientificDefault); // Output depends on user's locale

// Specifying a specific locale (e.g., en-US)
const formattedScientificUS = scientificNumber.toLocaleString('en-US');
console.log(formattedScientificUS); // Output: "1,234,000"