@rific/resizable-input

Auto-growing, drag-resizable multiline text input for React Native.

Installation

npm install @rific/resizable-input react-native-gesture-handler react-native-reanimated

Usage

import { ResizableInput } from '@rific/resizable-input'

// Auto-grows as you type; drag the handle to resize manually
<ResizableInput
  value={notes}
  onChangeText={setNotes}
  minHeight={80}
  maxHeight={400}
/>

// Disable auto-grow, keep manual resize only
<ResizableInput value={text} onChangeText={setText} autoGrow={false} />

With react-native-paper

Pass TextInputComponent to use Paper's TextInput. The generic is inferred automatically, so Paper-specific props like mode, dense, and label are fully typed:

import { TextInput as PaperInput } from 'react-native-paper'

<ResizableInput
  TextInputComponent={PaperInput}
  mode='outlined'
  dense
  label='Notes'
  value={text}
  onChangeText={setText}
/>

Custom handle

<ResizableInput
  renderHandle={() => <MyHandleIcon />}
  value={text}
  onChangeText={setText}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | autoGrow | boolean | true | Expand height as content grows | | handleColor | string | '#9e9e9e' | Color of the default drag handle | | initialHeight | number | | Starting height in pixels | | maxHeight | number | Infinity | Maximum height in pixels | | minHeight | number | | Minimum height; defaults to natural single-line height | | onChangeText | (text: string \| null) => void | | Called with null when field is cleared | | onHeightChange | (height: number) => void | | Called when height changes | | renderHandle | () => ReactNode | | Custom resize handle; replaces the default bar | | resizable | boolean | true | Show drag handle for manual resize | | TextInputComponent | ComponentType<T> | TextInput | Input component to render; all of its props are inferred and forwarded | | value | string \| null | | Controlled value |

All other props are forwarded to the underlying input component.

Peer dependencies

• react >= 17.0.0
• react-native >= 0.70.0
• react-native-gesture-handler >= 2.0.0
• react-native-reanimated >= 3.0.0