Search code examples
javascriptreact-nativereact-native-iostextinput

React Native TextInput doesn't increase height at correct content length

I am trying to implement a multiline expanding text input using react native elements and react native but I can't seem to get it to function properly. The behavior is shown in the following screenshots:

As you can see here, the text has is clearly more than one line, but the text input has not expanded.

enter image description here

Whenever I enter a few more characters, it expands a little bit but it expands down into the keyboard.

enter image description here

Adding another line doesn't expand the keyboard:

enter image description here

Not until I add a few more characters until the newest line is half the width of the text input does the input expand

enter image description here

Here is the code I am using for the text input:

<View style={{flexDirection:'row', backgroundColor: 'transparent', height: Math.max(45, this.state.viewHeight)}}>
<Input
          containerStyle={{marginVertical: 0, width:300, marginLeft: 10}}
          inputStyle={[styles.textInput, {height: Math.max(35, this.state.height)}]}
          multiline
          enablesReturnKeyAutomatically={true}
          keyboardAppearance="dark"
          placeholder=""          
          onContentSizeChange={(event) => {
            if (this.state.height <= (35*6)){
            this.setState({
               height: event.nativeEvent.contentSize.height,
              viewHeight: event.nativeEvent.contentSize.height })
            }
          }}
          onChangeText={(message) => { this.setState({message})
        }}

Here's the code for my text input style:

textInput: {
      paddingHorizontal: 12,
      width: 100,
      backgroundColor: '#F0F0F0',
      borderStyle: 'solid',
      marginLeft: -4,
      overflow: 'hidden',
      marginTop: 5,
      borderWidth: 1,
      borderColor: 'lightgrey',
      borderRadius: 25,
    },

It seems to be that that the content size change event is triggering at the wrong time, is there any way I could set it to only trigger when a new line is a specific length and expand up instead of down into the keyboard?

Solution

  • I finally got it working, I had to update to the expo 0.55 React Native sdk as I think they implemented the autogrow input after .54. I then had to switch from using a react native elements input to just the react native text input as the RNE one doesn't appear to have autogrow implemented. Lastly I had to change my height settings, if you set a definite height like I did height: {35} it won't grow, so instead I had to use minheight for both the input and the view that the input was in so that they could grow together.