How to create multiline textarea input field in React native? Code Example

Multiline textarea input field is required where a lengthy text needs to be entered. Some use case are About me field in profile, chat messenger box, wysiwyg editor etc.

React native provides multiline and numberOfLines props for <TextInput> component which can create a textarea.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, Text, View } from "react-native";

const MultilineTextInput = () => {
  const [text1, onChangeText1] = React.useState("");
  
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText1}
          value={text1}
          multiline={true}
          numberOfLines={6}
          textAlignVertical={'top'}
        />
      </View>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
  },
  input: {
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default MultilineTextInput;

output –

The above image is of iOS (left) and Android (right) mobiles. It shows how multiline input field looks like on both types of operating systems. In iOS the input field expands with new line but we can fix the height in Android.

In the code, you can see few things –

1. We used multiline prop in line 14 to indicate that input field will not submit the form on press of return key and new line will generate.
2. numberOfLines prop in line 15, works in Android only. This provides a predefined height to the input box.
3. textAlignVertical is another prop for Android. This is because, by default, android place the cursor at the middle of the text input. To start typing from top, we are setting this prop and providing value top.

Live Demo

Conclusion

In React Native, you can create multiline text input using multiline prop. To better utilize this prop, use it with numberOfLines prop in Android version.