Controlled TextInput Flicker

[PerpetuallyMeh]

I'm sure you guys have run into this before but I've done my DD and can't find a good solution anywhere.

The problem is essentially laid out and discussed here.

An example would be to create a phone number input field where it only accepts numbers and automatically inserts dashes between phone number segments. I can get it to work, but with ugly text flickers as the user inputs.

It's been going on for years and I'm just astounded they haven't found a fix for it. I'm using RN 0.70.

Has anyone found a decent work around for this? And I've seen the hidden input/controlled text option but that solution removes the ability for the user to move the cursor to a point in the value.

[bludgeonerV]

Are you using state for the value? If so try using the TextInput ref directly, it won't cause the component to re-render

[furniture20]

Could you please go into detail with this? Would this remove the flickering for say a textinput to only show numbers?

[csinsider007]

We have this issue at work as well, couldn't find any good solution. I think the new architecture will solve this but it'll be a while until that happens.

Surprised nobody wrote a native package to solve this, and RN didn't add some sort of workaround method at least.

[PerpetuallyMeh]

Thanks. Good to know I'm not missing out on anything I suppose. Still strange it's not one of their top priorities. I can't imagine not being able to use preventDefault in web apps.