React Native Auto Height Input

A robust, auto-height TextInput component for React Native that handles edge cases like paste overflow and large text deletions.

Features

• ✨ Auto-growing height - Expands as user types
• 📱 Cross-platform - Works on iOS, Android, and Web
• 🛡️ Paste overflow protection - Native maxLength prevents height inflation
• 🗑️ Large deletion handling - No infinite loops when deleting lots of text
• ♿ Accessible - Preserves all TextInput accessibility props
• 📏 Smart height clamping - Min/max height with >1px diff threshold
• 🎯 Zero dependencies - Uses only React Native APIs

Installation

npm install react-native-auto-height-input
# or
yarn add react-native-auto-height-input

Usage

import { AutoHeightTextInput } from 'react-native-auto-height-input';

function MyComponent() {
  const [text, setText] = useState('');

  return (
    <AutoHeightTextInput
      value={text}
      onChangeText={setText}
      minHeight={40}
      maxHeight={200}
      maxLength={500}
      placeholder="Type here..."
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | required | Current text value | | onChangeText | (text: string) => void | required | Text change callback | | minHeight | number | 40 | Minimum height in pixels | | maxHeight | number | 600 | Maximum height in pixels | | maxLength | number | 500 | Maximum character length | | largeDeletionThreshold | number | 200 | Char deletion threshold for height reset |

All other React Native TextInput props are supported.

How It Works

Paste Overflow Protection

When you paste text exceeding maxLength, the native TextInput truncates it immediately, so onContentSizeChange reports the correct height for the truncated content - no height inflation.

Large Deletion Handling

Deleting >200 characters at once can cause render loops. We detect this and temporarily reset height to minHeight, then let it grow back naturally on the next content size change.

License

MIT