Creating Multi-Line Text Inputs

In this lesson, you will learn how to configure the standard TextInput component to support multi-line text entry for comments and long-form descriptions.

Expanding the Input Surface

By default, a React Native TextInput is a single-line element. If a user types beyond the visible width, the text simply scrolls horizontally, which is frustrating for users writing paragraphs. To enable multi-line support, we use two specific props: multiline and numberOfLines.

Setting multiline={true} allows the text to wrap automatically to the next line once it hits the edge of the container.

Implementation Example

When building a comment box, you should also apply some specific styling to ensure the text starts at the top-left rather than being vertically centered.

<TextInput
  style={{
    height: 100, // Define a base height
    textAlignVertical: 'top', // Critical for Android to align text to top
    borderWidth: 1,
    padding: 10,
  }}
  multiline={true}
  numberOfLines={4} // Suggests the initial visual size
  placeholder="Enter your comment here..."
/>

Critical Considerations

1. Vertical Alignment: On Android, the textAlignVertical property is essential. Without it, your multi-line input may center the text vertically, which looks strange as the user begins typing.
2. Height Management: While numberOfLines provides a visual hint for the initial height, it does not strictly limit the input. If you want a fixed-height box that scrolls internally, ensure you provide a fixed height (as seen in the example). If you want the box to grow as the user types, you would typically manage the height via state in response to the onContentSizeChange event.
3. Keyboard Handling: Since multi-line inputs often take up significant screen real estate, remember your training on "Handling Soft Keyboard Overlap" to ensure the user can still see what they are typing when the keyboard appears.

By combining multiline={true} with explicit height styling and vertical alignment, you provide a professional, user-friendly experience for longer text inputs.

Key Takeaway: Enable multiline={true} on your TextInput and use textAlignVertical: 'top' to ensure your text area behaves like a standard paragraph input field.