React Native TextInput auto grow when multilne - react-native

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

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

Answer 2

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 3

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 4

Use module for this
import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';
return (
<AutoGrowingTextInput
style={styles.textInput}
placeholder={'Your Message'}
value={value}
/>
)
Link: https://www.npmjs.com/package/react-native-autogrow-textinput