Dollar Format Regex in React Native

Question

I'm trying to create a method in React Native that formats my input to dollar format.

onChangeNumberFormat = (text, input) => {
    const obj = { ...this.state.data };

    const value = text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
    obj[input] = value;

    this.setState({
      data: obj
    });
  };

My input (I'm using Native Base):

<Input
  value={Amount}
  onChangeText={(text) => this.onChangeNumberFormat(text, 'RentalAmount')}
  style={styles.valueText}
/>

When I enter 5000.00, it formats to 5,000.00 which is correct. However, if I delete the last 3 0 zeros, it becomes 5,00 instead of 500. How can I fix it? Also, is there a way to always put the '$' in the front and just accept numbers in the Input?

Thanks

Possible duplicate of [How can I format numbers as currency string in JavaScript?](https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript) — MonkeyZeus, Jul 18 '19 at 19:38
I think it is not duplicated. As I said, I am using React Native, so I can't use toFixed() — myTest532 myTest532, Jul 18 '19 at 19:58

score 5 · Accepted Answer · answered Jul 18 '19 at 20:22

To format currency you can use one of these libraries:

Otherwise, you can do something like this:

const format = amount => {
    return Number(amount)
      .toFixed(2)
      .replace(/\d(?=(\d{3})+\.)/g, '$&,');
};

Check out the demo https://snack.expo.io/@abranhe/currency-formatting

import React, { useState } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';

export default () => {
  const [money, setMoney] = useState(0);

  const format = amount => {
    return Number(amount)
      .toFixed(2)
      .replace(/\d(?=(\d{3})+\.)/g, '$&,');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>$ {format(money)}</Text>
      <TextInput
        value={money}
        onChangeText={money => setMoney(money)}
        style={styles.input}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  input: {
    height: 30,
    borderColor: 'black',
    borderWidth: 1,
  },
});

Dollar Format Regex in React Native

1 Answers1