Text Area in React Native

What is a text area in React Native?

A text area is a multi-line text field for longer input — a bio, a note, a message. In React Native you create it by passing the multiline prop to TextInput. There’s no dedicated TextArea element like the web has; the same component handles both single-line and multi-line input depending on that one prop.

Basic example

A fixed-height multiline input:

import { TextInput } from 'react-native';

function TextArea({ value, onChangeText }) {
  return (
    <TextInput
      value={value}
      onChangeText={onChangeText}
      multiline                 // this makes it a text area
      numberOfLines={4}         // Android initial height hint
      placeholder="Write something…"
      textAlignVertical="top"   // Android: start text at the top
      style={{
        minHeight: 96,
        borderWidth: 1,
        borderColor: '#e5e7eb',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
      }}
    />
  );
}

Auto-growing example

To grow the field as the user types, track height with onContentSizeChange:

import { useState } from 'react';
import { TextInput } from 'react-native';

function AutoGrowTextArea() {
  const [value, setValue] = useState('');
  const [height, setHeight] = useState(96);

  return (
    <TextInput
      value={value}
      onChangeText={setValue}
      multiline
      onContentSizeChange={(e) =>
        setHeight(Math.max(96, e.nativeEvent.contentSize.height))
      }
      style={{
        height,                 // grows with content
        borderWidth: 1,
        borderColor: '#e5e7eb',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
      }}
      textAlignVertical="top"
    />
  );
}

Props

The props that matter most for a text area (all passed to TextInput):

Common patterns

Character counter: pair maxLength with a Text showing {value.length}/280 below the field.

Inside a scroll view: wrap the screen in a KeyboardAvoidingViewso the keyboard doesn’t cover the field, and disable the text area’s own scroll to avoid nested-scroll jank.

Gotchas

• On Android, text starts vertically centered. Set textAlignVertical="top" or the cursor sits in the middle of an empty box.
• numberOfLines only sets initial height on Android and is ignored on iOS — use minHeight in style for consistent cross-platform sizing.
• Auto-grow + inner scroll fight each other. When you drive height from onContentSizeChange, set scrollEnabled={false} so the outer view scrolls instead.
• The keyboard covers the field on small screens. Wrap in KeyboardAvoidingView (behavior "padding" on iOS).
• onContentSizeChange can loop if you set height without a Math.max floor — clamp to a minimum to keep it stable.

FAQ

How do I make a text area in React Native? Add the multiline prop to a TextInput and give it a minHeight. That’s the whole thing.

How do I make the text area grow with content? Track onContentSizeChangeand set the input’s height from it, clamped to a minimum (see the auto-grow example).

Why is my text centered vertically on Android? Set textAlignVertical="top" — Android centers multiline text by default.

Related components