React Native is kind of broken (they NEED to fix this)

I can't believe they actually recommend controlled inputs. My god this is bad.

Thank you Posthog for sponsoring!!!

SOURCE

S/O Ph4seOn3 for the awesome edit 🙏

[tdotgg]

btw Posthog just added session replay to React Native and it's really dope (and still super cheap)

[wlockuz]

One of the most simple and fundamental components of UI - an input, turned into a complicated and unusable mess. Its just sad at this point.

[sdummy]

The example on React-native docs is still uncontrolled. They do not pass the text value to the value prop of the input

[rusyaidimusa]

Cool note: Resizing a TextInput on android is complete screwed in React-Native. If you enable multiline inputs, it always renders as single-line first, rerenders, then shows the multiline input.

If you dare to use a multiline TextInput with reanimated, it will always break transitions!

[olalekanadekanmbi]

6:21 can confirm react-hook-form bypasses this problem. I had this issue just yesterday and react-hook-form made it work seemlessly

[guittoplex]

Awesome framework which can't even do a damn text input. Great work, Facebook

[felipepiubello]

it is absurd we need someone like Dan to bring this to light, there are plenty of issues already open in the react-native repo since at least July 2018 but they just ignore it :)

[joaoduarteribeiro]

My favorite part about the RN TextInput is when you pass only the value without the onChange and see the chars being inputted for some milliseconds before before being deleted.

[YasinAkimura]

Thats the reason I wrapped it in my own TextInput which is using a state manager but the inputs itself do not subscribe to the state they just update it. Only the place where you need to use these values subscribes to it and that fixes most issues.

[Trucidare]

Few years back we were getting a trickle of support tickets about not being able to log in to the app. Turns out it was same class of bug (controlled inputs).. Kind of crazy cause back then no one talked about this.

[ejyption]

Handling Text Input example in React Native docs did NOT use the value prop in TextInput, they used the defaultValue prop.

[codeChuck]

COOL STUFF :D Ads are so fun! The catch should always be there! They are a little obsessed with HEDGEHOGS :D SANIC🦶💙🦔, IS THAT YOU?

[shaunhamilton]

This makes me 90% confident my banking app is built with React Native, because the inputs do this. I always wondered what would be causing that.

[truthmatters]

Never thought I'd see the day Theo vindicates Flutter, but I'm here for it!

[captainlennysub]

React Native in 2018 was the most unstable project that I’ve ever used. I mean how can it error on rendering a list, display different error every time I rebuild/ empty cache, making it impossible to debug?

Guess what, I gave up after 4 hours, rebooted and it started working again.

Never using RN since then😢

[jouebien]

I mean the bug I reported in 2019 about flutters broken label bottom padding is still broken. Actually every bug I ever reported to flutter has been not resolved and sacrificed to the auto close robot.
Honestly I'd pick Capacitor with the react or vue hat if I had to pick a JS mobile framework. My ionic builds from 2017 would still compile & run. My RN expo projects won't even start until I jump through upgrading to latest and I've had the misfortune of doing that twice.

[EvertJunior]

This is bad, having performance problems is understandable since the component rerender at every keystroke but losing the cursor position by default is definitely a severe bug and I've seen it happens in many apps, it's infuriating. I hope this gets the attention it deserves.

[robwatson]

Argh we have this problem in an app, never realised it was down to the input being controlled! At least I now know there is a workaround for it

[KPBhan]

It's fixed in today's update 0.76

[Innengelaender]

I recently got rather annoyed that I couldn't get an autocomplete-input from a library to work with a controlled input, but it had an initialValue instead

I guess now I know why that library did not allow for controlled inputs.