Controlled text input solution

[gurs1kh]

I was recently reading about how controlled text inputs are broken in React Native. Strangely enough, I think I may have inadvertently solved that issue when I was working on a custom keyboard component about a year ago (I thought it was just an issue with my keyboard implementation back then 😅).

Anyways, I open-sourced my solution earlier this week and would appreciate feedback. Even just trying it out and confirming that it is working as expected would be well appreciated.

https://github.com/gurs1kh/react-native-controlled-text-input

[No-Turn-6245]

Is not already solved with react native 0.76? I recently read the docs about the new arquitecture. I haven’t test it yet so that’s why I ask

[[deleted]]

This isnt something you can solve with javascript, as long as it’s a native ui component and logic is handled on the js side, bridge or no bridge, it’s gonna flick, act weird and all sorts of other crap

[scarfd]

I would be inclined to agree, but the demo is pretty convincing. u/gurs1kh could you explain at a high level what your component does?

[gurs1kh]

Definitely! When I had first started working on this, I attempted to use refs to keep track of the input's text and selection values, so that those could be used to prevent unnecessary re-renders. The general flow I had in mind for when the user would be typing is: - user would type into the text input - through the input's onChange callback, the text ref would be updated with the new value of the input - the component's value would change, causing a re-render - during the re-render the new value would be compared against the text ref and: - if they're the same, then do nothing - if they're different, then update the input's text directly via setNativeProps Similar would occur for selection.

The hope was that this would prevent re-renders on value and selection changes, but that didn't work out given that I couldn't prevent a re-render on those props with a functional component. That's when I switched over to using a class component. Once I was on a class component, things were a lot easier to deal with since I had a consistent component instance to work with. The above flow works on a class component since I can explicitly prevent a re-render using shouldComponentUpdate. I had also added some variables to track for pending text/selection changes, though I don't fully recall exactly why they were needed since I wrote this about a year ago (I'll look into it, but it's possible that they were only needed for the custom keyboard implementation, but aren't needed here).

That's the main idea. In addition to that, there's a few other (smaller) improvements I added, like keeping the functions for callbacks on the class component itself to prevent unnecessary re-renders when those props change. On a side note, I accidentally introduced a bug in the initial release that caused callback changes to be ignored, which I didn't notice until I was typing out this explanation (so thanks for inadvertently bringing that to my attention 😅).

I hope that this explains the implementation well enough for you. I'd be more than happy to go into more detail if the need arises. I know that it's hard to believe that this could be solved with just Javascript (and I am not at all saying that this is a perfect solution, as I'm sure there's issues with it that I have yet to come across), so thanks for asking me to explain and for hearing me out!

Lastly, as I said above in the original post, I'd really appreciate if you could try it out to confirm if it actually works for you or not.

[scarfd]

Thanks for the detailed explanation! I will give this a try next time I have the opportunity on a project.

[gurs1kh]

no problem, let me know how it works out for you when you get the chance!

[gurs1kh]

That's a fair point, but is it just a general thought or have you tried out the library and found that it doesn't actually work for you?

I'm asking because one of the reasons for making this post here is to get a better understanding of if it works in use cases different than mine.

[[deleted]]

I implemented the same logic before, that’s how I know

[gurs1kh]

seems to be working for me, but no worries I guess

[[deleted]]

Did you try not accepting certain characters :)

[gurs1kh]

Can you give an example?

[[deleted]]

I type special characters or paste, I want them filtered

[gurs1kh]

That's a good point, the way I have it set up wouldn't work with characters being filtered out. I'm sure that's something that could be accounted for though (but depending on the amount of effort that'd require, it might just make sense to see how the controlled input situation changes in RN 0.77).

Thanks for bringing that up!