How to add a text area in React Native?

Sometimes, we want to add a text area in React Native.

In this article, we’ll look at how to add a text area in React Native.

How to add a text area in React Native?

To add a text area in React Native, we can use a TextInput with the multiline and the numberOfLines props.

For instance, we write:

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

export default function App() {
  const [text, setText] = React.useState();

  return (
    <View style={{ flex: 1 }}>
      <TextInput
        multiline
        numberOfLines={4}
        onChangeText={(text) => setText(text)}
        value={text}
      />
      <Text>{text}</Text>
    </View>
  );
}

to add a TextInput with the multiline prop to add a text area.

Then we set numberOfLines to 4 to make the text input line 4 lines tall.

We set the onChangeText prop to a function that sets the text state to the input value.

And we set the value prop to text to show the input value.

Conclusion

To add a text area in React Native, we can use a TextInput with the multiline and the numberOfLines props.