React-native-web: TextInput: reimplement autogrow

[necolas]

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

[necolas]

@paularmstrong has offered to take this on

[necolas]

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

[paularmstrong]

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]

I'm going to remove the existing dependency for now

[natew]

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

[necolas]

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]

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

[necolas]

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]

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]

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]

The follow up is in #795