React-native: onContentSizeChange in textinput not getting height when text height changes.

[yasicmd]

multiline={true}
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
onChangeText={(value) => {
this.setState({value});
}}
style={[{height: 40,borderWidth: 0.5,borderColor: '#0f0f0f',fontSize: 13,padding: 4,width:width-40}, {height: Math.max(40, this.state.height)}]}
defaultValue={this.state.value}
/>

[cgilson]

Getting same issue, but only on Android. Event is fired on mount, but isn't fired on text height change. Identical code works fine for iOS:

editable = {true}
multiline = {true}
[...]
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: Math.max(35, this.state.height)}}
/>

[yasicmd]

onChange={(event) => {
this.setState({
height: event.nativeEvent.contentSize.height,
});
this.props.onModalHeightChange((Math.max(40, this.state.height)>140)? 140+205: Math.max(40, this.state.height)+205)
}}

this worked for me

[yasicmd]

instead of onContentSizeChange

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[shergin]

Actually, I am working on this right now. I hope is will fix very soon.

[shergin]

Fixed! 35393524a94e2ea2668494eac7c89521f75266cf

[amanthegreatone]

@shergin is this patched into a release version?

[kesha-antonov]

@shergin @hramos Tried 0.46-stable (0.46.2).
It works! Thanks!

[ramsestom]

using react native 0.46.4 on android, I can't get contentSize from the event fired by onChange from TextInput...
the event.nativeEvent fired only has properties target, eventCountand text

[shergin]

@ramsestom That's expected behaviour. You have to use onContentSizeChange instead.

[ramsestom]

onContentSizeChange is simply never fired (I change my input in my textinput field but the event is never fired even when the number of lines increase)
As for onChange not reporting contentSize in the fired event, I don't think it is the expected behaviour as it used to be the case in previous react-native release (and many libs and source codes depends on it). So looks like a regression

EDIT: actually onContentSizeChange fire correctly
EDIT2: when the text of the textinput is right aligned, onContentSizeChange actually works until 4-6 lines and then stops working after that. Everything is fine is the text is left aligned (the default).

[shergin]

@ramsestom Yes, it was breaking change. (But this feature was never documented.) And I made it... for goods. We had really good reasons for that. Sorry for the inconvenience!

Could you please create separate issue discussing inconsistent behaviour of onContentSizeChange?

[eli-isbell-h360]

Not sure if this has been moved to another issue yet, didn't see one anywhere...

@shergin
Testing on RN 0.47.1 (IOS), same use case as OP, I find onContentSizeChange is grabbing the initial height of the TextInput and continues to fire as text is entered, but never gets changes in height.

[shergin]

@eli-isbell-h360 Interesting, could you please create a snack?

[eli-isbell-h360]

@shergin Yessir, here it is: https://snack.expo.io/SJB1E3uOb

It looks like onContentSizeChange fails to read the correct height if the placeholder is changed by onFocus and/or onEndEditing. I was using these to clear the placeholder immediately onFocus instead of waiting for the value to change. It also seems like the height changes, but not correctly when a larger fontSize is used.

[shergin]

@eli-isbell-h360
Thank you!
Why do you and reapply contentSize as height? It is unnecessary. If you need autogrowing , simply do not set height explicitly; you also can limit height specifying maxHeight.
This is true for iOS for now, but right now I am working on same feature for Android.

Besides this I will investigate this issue.

[eli-isbell-h360]

@shergin
True! I believe I was attempting to control the height more directly because of unexpected behavior I was seeing with the custom fonts and fontSizes, but maxHeight with no explicit height is what I am using now.

Thanks for working on this!