@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}
/>

If every ResizableInput in your app should default to the same component, configure it once instead of passing TextInputComponent at every call site:

import { configureResizableInput } from '@rific/resizable-input'
import { TextInput as PaperInput } from 'react-native-paper'

configureResizableInput({ TextInputComponent: PaperInput })

Or mount ResizableInputProvider near your app root: it's a thin wrapper that just calls configureResizableInput() for you, for consistency with how the other @rific packages configure their own optional integrations:

import { ResizableInputProvider } from '@rific/resizable-input'
import { TextInput as PaperInput } from 'react-native-paper'

<ResizableInputProvider TextInputComponent={PaperInput}>
  {/* your app */}
</ResizableInputProvider>

Either way, this is one-time setup, not reactive state: call it once, before your first ResizableInput renders. A per-instance TextInputComponent prop always overrides the configured default.

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 >= 18.0.0
• react-native >= 0.76.0
• react-native-gesture-handler >= 2.0.0
• react-native-reanimated >= 3.0.0

No dependency on react-native-paper or any other input library: TextInputComponent (see above) is the only integration point, and it works with any component that accepts value/onChangeText. Without it, ResizableInput renders React Native's own TextInput.