React Native TextInput auto grow when multilne

Question

I want to create a TextInput which can grow automatically when it has multilines.

 <TextInput
            placeholder="Type Comment"
            value={this.state.comment.value}
            onChangeText={value => this.onChangeComment(value)}
            onPress={() => this.uploadComment()}
            multiline={true}
            maxLength={200}
            numberOfLines={5}
          />

How can I achieve this?

Answer 1

To implement auto grow multiline text input, you can adjust the height of the text input according to the content size in the textInput.

you can use onContentSizeChange prop in TextInput and call a function to increase/decrease the height of input.

Here is the quick example code

export default class YourComponent extends Component {

  constructor (props) {
    super(props);
    this.state = {
      newValue: '',
      height: 40
    }
  }

  updateSize = (height) => {
    this.setState({
      height
    });
  }

  render () {
    const {newValue, height} = this.state;

    let newStyle = {
      height
    }

    return (
    <TextInput
      placeholder="Your Placeholder"
      onChangeText={(value) => this.setState({value})}
      style={[newStyle]}
      editable
      multiline
      value={value}
      onContentSizeChange={(e) => this.updateSize(e.nativeEvent.contentSize.height)}
    />
    )
  }

}  

OR

You might want to use react-native-auto-grow-textinput

Answer 2

With React Hooks

Just to add to Shivam's answer, here is the version with hooks:

import React, { useState } from 'react'

export default function MyTextInput(props) {
    const [height, setHeight] = useState(42)
    return <TextInput
        style={styles.input, {height: height}}
        onContentSizeChange={e => setHeight(e.nativeEvent.contentSize.height)} />
}