Doesn't work well if TextInput has initial value

[nickg-wix]

Hi,

I have some initial multiline content that should be displayed in TextInput once it opened. Now autogrow-text-input always starts with empty state. This could be easily fixed by setting correct state this.state = {text: this.props.value || '', height: 0}; but TextInput should also update its height on that time corresponding given content. Could you please investigate how to do it?

[sylvainbaronnet]

I have the same issue

[alcat2008]

https://github.com/alcat2008/react-native-auto-expanding-textinput/blob/master/src/index.js may help.

[artald]

Thanks guys.

I investigated and tried to solve this issue and it seems that it's not a trivial fix in the JS code. Here's why:

A multiline TextInput is backed by a native iOS UITextView. To be able to size this component properly I relied on the onChange event which is provided by RN TextInput and is called whenever the text-view native control is changed. This is the only event where RN provides the contentSize. Unfortunately, this event is called upon actual user input and not when a text is set programmatically (the way we would like to use to prefill the input).

The only way I see to solve it would be to fix the native RN code to send the same event when the text is filled without user input. I found this relevant issue: facebook/react-native#6552. Not closed yet and if I understand correctly they still haven't decided on the proper fix and how it should be implemented between iOS and Android.

While it's a pretty easy fix in the native code I don't think that another PR by me will help, especially when they already have several ideas, but if you vote for the issues it might help the RN team to prioritize it.

Your thoughts? Any other suggestions/workarounds anyone might have are welcome.

[sylvainbaronnet]

Yes it's an issue from RN, I don't see how you could fix it properly currently. I voted for the RN issue.

Thanks for your work !

[artald]

Just pushed a fix that attempt to temporarily fix this issue (until it gets fixed in RN). Please try to update and see if it works.

It requires using the some native code, see the README for installation instruction to use in your project.

[roman01la]

@artald Hello! Thanks for this module! I'm running it currently on RN 0.30 and it seems like native code fix doesn't work anymore. The component gets new height on initial value set, but it's not equal to desired height. I'm getting 30 as initial value.

[artald]

@roman01la Hey..
I think that with RN 30 this issue was actually fixed and the native "hack" might no longer be necessary if working with RN >= 30. Probably it's on this commit.
However, it seems that they added a new kind of callback called onTextInput, so it won't work unless it's supported in this component.

Since we use this component in our production code it will take some time until we upgrade to RN 30, so a fix at this point will have to back backwards compatible.
I'll see if I have time to start playing with it on RN30, though I can't promise... :).

As always, PRs are most welcome..

[amanthegreatone]

getting this issue on initial load in ios. installed and linked lib as per readme.

RN 0.44.1
iphone 6 simulator -> issue on initial load
android 6.0 device -> works fine

[AlMel3000]

@artald
Hello!
Adding
placeholder={'\n\n\n\n'}
worked for me.

I was trying your solution from ReadMe.md but it didn't

To fix the issue with the height not being set for initial values (or with other cases where the input is not set by the user typing using the keyboard) you need to add the libAutoGrowTextInput to your project. After performing npm install, locate AutoGrowTextInput.xcodeproj in YOUR_PROJECT/node_modules/react-native-autogrow-textinput/ios and drag it to your own project, then in your target's general settings, add it to the "Linked Frameworks and Libraries".

[st-patrick]

I also still have this issue where a multiline TextInput does not get initialized with its value prop's value, resulting in a flicker when navigating to the screen containing it.

The TextInput has a preset value of a long poem, but for a few milliseconds, the empty TextInput is visible, resulting in a flicker

On iPhone 12 Pro Max
the issue is not visible on Android afaik and also not in any iOS simulator