decimalSeparator issue when using with react-native

[bogdantudorascu]

I have the following NumberFormat "react-number-format": "^4.3.0",:

              <NumberFormat
                value={amount}
                displayType={'text'}
                decimalSeparator={'.'}
                prefix={'$ '}
                renderText={value => (
                  <TextInput
                    underlineColorAndroid="transparent"
                    style={styles.input}
                    onChangeText={this.handleChange}
                    value={value}
                    keyboardType="numeric"
                  />
                )}
              />

The input works fine, but when I'm trying to use the '.' as decimal separator probably the state updating onChangeText and the value resetting the TextInput's value are not syncronized and somehow the decimal point is corrected by the NumberFormat before actually knowing that it is indeed a valid input.

For example, if I type 22., before I get to type 22.2 the value gets refreshed and the . decimal separator is gone. If I do type really fast, the decimal separator will stay there and I will get 22.2 in the NumberFormat's input field.

I get the same behavior when deleting the input that has . decimal separator added. If I delete slowly, the . will stay there. The only way to get rid of it is to keep the back button for a longer time.

[irfanandratama]

Did you manage to solve it?

[Volekss]

Same question, any success on that?

[maxteebabs]

I ran into same issue. The dot(.) seperator dissappears Here is my code <TextInput inputMode="decimal" value={'20'} keyboardType="decimal-pad" onChangeText={(text) => console.log(text) } cursorColor={theme.colors.grey500} style={[appStyles.input, {paddingVertical: 10, paddingHorizontal: 10}]}></TextInput>

[DHIRENDRA199]

same issues i have to prevent input after decimal limit cross