I struggle to find a proper solution to format the number input in a TextInput using the onChangeText function in React Native using Redux.
I tried using the function .toFixed(2), but the issue is that as soon as I have one digit typed in the function it interprets the next digit as the first decimal and rounds it right back to 0. This is because I control the input with Redux. As soon as one digit is typed it gets saved to the Redux state and the value prop of the TextInput is hooked up to that part of the Redux state.
Example: I type 5, then toFixed(2) returns 5.00. When I now type a 3 it interprets it as 5.03 and the function rounds it down and returns 5.00 again.
I also tried using react-native-masked-text, but the issue is that due to a bug in the actual TextInput of React Native I have a terrible flickering effect and can't get rid of it. (https://github.com/benhurott/react-native-masked-text/issues/12)
The ideal way would be to enter one digit and have it as the first decimal when I hit the next digit the decimal point would move one to the right. Example: I type 7, the TextInput should show 0.07, then I type 9 and the TextInput should show 0.79. Then I type 4 and the TextInput should show 7.94 etc.
A lot of Banking apps in the US do that as a standard practice.
