How to grow height of TextInput upon text wrapping with React Native?

Sometimes, we want to grow height of TextInput upon text wrapping with React Native.

In this article, we’ll look at how to grow height of TextInput upon text wrapping with React Native.

How to grow height of TextInput upon text wrapping with React Native?

To grow height of TextInput upon text wrapping with React Native, we can set the height of the TextInput to the content’s height when the content size changes.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  const [height, setHeight] = React.useState(30);

  return (
    <View>
      <TextInput
        multiline
        style={{ height }}
        onContentSizeChange={(event) => {
          setHeight(event.nativeEvent.contentSize.height);
        }}
      />
    </View>
  );
}

to set the onContentSizeChange prop to a function that calls setHeight with event.nativeEvent.contentSize.height to set height to event.nativeEvent.contentSize.height.

Then we set the height style of the TextInput to height.

Now as we type, the TextInput will change size to fit the input value.

Conclusion

To grow height of TextInput upon text wrapping with React Native, we can set the height of the TextInput to the content’s height when the content size changes.