search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.66k stars 1.79k forks source link

TextInput: reimplement autogrow #287

Closed necolas closed 7 years ago

necolas commented 7 years ago

Remove the dependency on react-textarea-autosize and ape the implementation in Polymer or Material UI

necolas commented 7 years ago

@paularmstrong has offered to take this on

necolas commented 7 years ago

https://github.com/paularmstrong/react-native-web/tree/paularmstrong/textarea-autosize

paularmstrong commented 7 years ago

Just need to find some more time to finish things up. I'll work on adding/using minNumberOfLines and maxNumberOfLines as we discussed in chat. Also still need to fix things to not remove margins.

There's still an alternative solution that avoids adding all the extra markup and instead adds a mirror textarea. The only issue there is that we have to read all of the computed style values on every keyPress event and calculate the height manually. I'm avoiding that solution because it doesn't seem very maintainable and also has some performance impacts. (this is how react-textarea-autosize works)

necolas commented 7 years ago

I'm going to remove the existing dependency for now

natew commented 7 years ago

Just a heads up actually this is broken in the demos. Autoexpanding text input doesn't expand for me on Chrome 57

necolas commented 7 years ago

Yeah the demos haven't been updated in a while…but it will still be broken as we haven't implemented the events RN emits. It's quite hard to do that given how textarea works in browsers

natew commented 7 years ago

Oh didn't realize it was using textarea! We need a clean room implementation or something

necolas commented 7 years ago

Going to close this as autogrow isn't baked into React Native and the mechanism by which autogrowing TextInput is currently implemented in user space is with event data. Not sure what the best way forward is

rxb commented 6 years ago

In case anyone comes across this issue looking for auto-expanding, here's a snippet to add to your TextInput:

onChange={(event) => {
    this.setState({height: event.nativeEvent.srcElement.scrollHeight});
}}

Then set minHeight style to this.state.height.

petrbela commented 4 years ago

Perhaps this should be reopened and implemented (possibly using @rxb's solution although it doesn't seem to handle shrinking) since TextInput autogrow functionality has been part of RN since at least 0.60

nowadays <TextInput> component is always autoexpandable (on both iOS and Android)

Sharcoux commented 3 years ago

The follow up is in #795