[SOLVED] React Native TextInput Format Number Amount Comma Separated Number with Decimal Points with two state values

React Native TextInput Format Number Amount Comma Separated Number with Decimal Points with two state values

React Native TextInput write Comma Separated Number with Decimal Points with to state values i.e one for presentation and another for pure number value dynamically updated i.e SIMILAR TO THE LOGIC OF THIS PAGE https://www.redcross.org/donate/donation.html/ enter image description here

import React, { useState, useEffect, useCallback, Text } from "react";
import { View, TextInput } from "react-native";
const App = () => {
  const [amount, setAmount] = useState(null);
  const [amountFormatted, setAmountFormatted] = useState(null);
  /**
   * FUNCTION TO CHANGE AMOUNT TO amountFormattted i.e value for text input will bue ###,###,###[DECIMAL_POINT]##
   * i.e user input 50000000 textInput value  50,000,000.00 where amount == 500000.00 and amount formatted is 50,000,000.00
   */

  const formatAmountFunc = (text) => {
    //Function to Format TextIput value and save amount as pure number

    setAmountFormatted(text);
  };

  /**
   *
   */

  return (
    <View>
      {/**
       * THERE IS NO TEXT VIEW IN THIS APP ONLY TEXTINPUT i.e user input 500000.00 the TextInput
       * Shows 50,000,000.00 i.e amountFormatted is 50,000,000.00 and Amount is 500000.00
       *
       * **/}

      <TextInput
        value={amountFormatted}
        onChangeText={(text) => {
          formatAmountFunc(text);
        }}
      />
    </View>
  );
};
export default App;

I Tried Several Number formatting configurations and a few npm number formatters not sure why it is not working

Solution