[TextInput] Add auto-grow support for multiline TextInput components.

[dhrrgn]

This adds a new autoGrow property to the TextInput component, which automatically adjusts the height of the input depending on the height of the text. It respects the initial height of the input, and will never get smaller than that height.

I wasn't sure what the best property name would be. I think perhaps something like automaticallyAdjustHeight may be better (similar convention to automaticallyAdjustContentInsets on the ScrollView). I am open to suggestions here, and have no problem changing it.

Note: This is iOS only at the moment. I don't have the skill set currently to add this for Android.

Here is a GIF of it working in UIExplorer:

[montogeek]

+1

[PhilippKrone]

@dhrrgn I just applied your PR locally and it's basically working but there is quite some flickering in such a way that the textinput always becomes larger in height and then immediately smaller, although the height should not change in that situation at all. Do you have any idea why that happens?

UPDATE: This only happens if the textinput has one line (its changing its height between 20px (thats my standard) and 44,5px and back to 20px. Once the textinput has two lines, its working fine.

[dhrrgn]

@PhilippKrone I actually just noticed that as well, I am looking into it. I believe it has to do with my last commit.

[dhrrgn]

@PhilippKrone I have removed a portion of my last commit. It no longer handles resizing to fit the placeholder. This added a lot of overhead and other issues (which could probably be fixed TBH). Let me know how it works for you.

[facebook-github-bot]

@dhrrgn updated the pull request.

[kinhunt]

＋1

[PhilippKrone]

@ide Do you know who the right person for checking and importing this PR is?

[ide]

cc @nicklockwood and @javache

That said multiline auto-growing text fields are hard to get right. Is this being used in products (ideally a messenger -- it's my go-to litmus test) somewhere so we can see if it's doing the right thing?

[dhrrgn]

@ide We are using it in our app (in production). You can see it in action here: http://cl.ly/image/3x0c1u083F2S

The app is here: https://itunes.apple.com/app/id1043626975

[ide]

@dhrrgn awesome -- checking it out right now!

[ide]

@dhrrgn Gave your app a try and the text view is quite nicely done in my eyes.

Regarding your diff -- support for maxHeight landed in master (2244a86) and it'd be really nice to be able to use that style field instead of a separate prop -- do you think you could unify the APIs?

Also, could you verify this works with onLayout and add a little demo of that to the UIExplorer (perhaps printing the current height below the auto-sized text field as it shrinks and grows)?

[ide]

cc @nicklockwood @javache you will probably want to take a look at this PR and #3209. The latter does text layout on the shadow thred which I lean towards, but is also much more complex.

[nicklockwood]

I like this, but can we do away with the "autoGrow" property and simple make auto-growing be the default behaviour if no explicit height is set? This should work well with the new minHeight and maxHeight props.

[dhrrgn]

@nicklockwood Currently a TextInput can have no height set, but can have flex: 1 on it, which will stretch it, your proposed behaviour would conflict with the way that currently works...

I would gladly make this work with minHeight/maxHeight... as soon as I figure out how.......

[nicklockwood]

@dhrrgn well, we could say that it has auto-growing height if neither height nor flex is set :-)

[christopherdro]

@dhrrgn Any chance we can get this PR updated based on the comments, rebased to master and have the commits squashed down to 1?

I'm sure a lot of people, including me, would like to see this get merged in.

[eyaleizenberg]

@dhrrgn Any chance to get this merged?

P.S - Did anybody get this working on RN 0.17 ?

[dhrrgn]

Sorry for the delay here, the holidays have been keeping me quite busy. I will be working on this over the next few days. Once everything is up to snuff, I will rebase and squash this all down to one commit.

[ahanriat]

@dhrrgn \o/

[ahanriat]

@dhrrgn Any update ? :)

[nicklockwood]

I tried merging this, but after resolving the conflicts it didn't seem to work. I'm guessing I screwed something up in the merge process, but the code in TextInput.js has diverged sufficiently to make it unclear what that might be.

I'd suggest holding off on any further work on this for the time being though. The new functionality added to RCTTextView since this was first suggested has opened up the possibility of implementing this as a pure JS solution, which I've got a working POC for. I'm just running it by the internal team for review.

[ahanriat]

@nicklockwood thanks for the update !

[dhrrgn]

@nicklockwood Ya, have been working on/off over the past week or so on this, as it basically requires a rewrite. However, if this can be done in pure JS, that would be a huge win.

[nicklockwood]

Closing in favor of 481f560

[YasirSherzad]

Hi, I am using 0.48 , I can see in Docs that there is autoGrow props in the TextInput for android, but its not working

<TextInput
         style={{backgroundColor: '#f0f1f1', 
               borderWidth:1, 
               borderColor:'#d0d2d3',
               paddingLeft:12,
               paddingRight:12,
               paddingTop:0,
               paddingBottom:0,
               marginBottom:12,
               fontSize: 14
            }}
         autoGrow = {true}
         multiline={true}
         placeholder='Bio'
         returnKeyType= 'next'
         underlineColorAndroid='transparent'
/>

[gabimoncha]

Hello, I am using version 0.56 and looks like autoGrow prop is not here anymore 👎 I believe this feature is a necessity and should not disappear

[yuvraj24]

For auto-resizing of multiline TextInput use ,

flexGrow:1

Found this working on both iOS & Android devices.