React Native TextInput flickering on setState

Question

I am building a Currency Input component using React Native TextInput. While the user is typing, the requirement is that the text should always be format in this way:

$ + [integer-part] . [2 digits decimals]

So for example if the user enters 2, it should be automatically formatted to $0.02. I am able to perform a formatting while the user is typing as illustrated in the below screenshot:

Basically, using onChangeText, I apply some formatting and then call setState with the formatted value.

The problem here is that the newly typed character says for one second before being correctly formatted. And this causes the TextInput to flicker briefly.

I have looked at this similar question. But not only I could not understand how the accepted answer can solved my problem. And even when I did as suggested, it did not work.

I don't know how to go about with this problem: it seems that the TextInput cannot be fully "controlled" since it is displaying an input character although I have explicitly stated:

value={this.state.value}

Any help from the community would be greatly appreciated

Answer 1

There is an open issue in the react-native github:

TextInput flickering when format the text closed, releated to:

Can't modify text in TextInput onChangeText callback on Android (open since 2019)

Even in the v0.68.1 (latest we have today) the same problem is happening.

I have a particullary case where I need to use currency masks and I have two choices:

1. Accept the flickering issue and keep the mask
2. Remove the mask and let the user put any plain text value. (in my case, forcing the keyboardType as 'numeric' was enough.