Revision history [back]

You can use the onContentSizeChange prop of <TextInput> to handle the height increase.

Here's an example code snippet in React Native:

import React, { useState } from "react";
import { TextInput } from "react-native";

const MultilineInput = () => {
  const [height, setHeight] = useState(40);
  const [text, setText] = useState("");

  const handleContentSizeChange = (event) => {
    setHeight(event.nativeEvent.contentSize.height);
  };

  return (
    <TextInput
      multiline
      onContentSizeChange={handleContentSizeChange}
      style={{ height }}
      value={text}
      onChangeText={setText}
    />
  );
};

export default MultilineInput;

In this example, we use the useState hook to manage the height state and the text state of the input. We also define a handleContentSizeChange function that gets called whenever the size of the content inside the input changes.

We pass this function to the onContentSizeChange prop of the <TextInput> component. Inside the function, we set the new height of the input to the height of the content by accessing the nativeEvent property of the event object.

Finally, we set the height of the input as a style property with the height state variable.

With this implementation, the height of the input will increase automatically as the text wraps.