React Native TextInput auto grow when multilne

Question

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

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)} />
}

Answer 3

Think that the React Native team fixed it in current version (0.59) with the multiline prop.

This works for me

  <TextInput
    style={{
      width: '90%',
      borderColor: 'gray',
      borderWidth: 1,
      padding: 2,
    }}
    multiline
    onChangeText={text => this.setState({ text })}
    value={this.state.text}
  />