Expandable Input
A compact field that morphs into a full-screen editor, shared-element style, with the App Store card curve.
Prerequisites
npx expo install expo-haptics expo-blur expo-glass-effect react-native-reanimated react-native-safe-area-context react-native-css @hugeicons/react-native @hugeicons/core-free-icons
Install
npx @rslab/cli add expandable-input
Usage
Tap the field and it morphs into the page, shared-element style: it measures itself with measureInWindow, then a transparent Modal mounts a clone at those exact coordinates and one progress value interpolates position, size and borderRadius to full screen with the same calm curve as Card Expand (bezier(0.32, 0.72, 0, 1)). The keyboard rises during the morph, not after it.
import { ExpandableInput } from '@/components/ui/ExpandableInput';
const [notes, setNotes] = useState('');
<ExpandableInput
label="Notes"
placeholder="Add delivery notes"
value={notes}
onChangeText={setNotes}
maxLength={280}
/>;The editor edits a local draft: Done commits it through onChangeText, Cancel discards it. The collapsed field previews up to two lines of the value.
Props
label?string-Heading above the field and title of the sheet.
placeholder?string'Write something'Shown collapsed when empty and in the editor.
valuestring-Controlled text, committed on Done.
onChangeText(text: string) => void-maxLength?number-Forwarded to the editor.
className?string-Extends the outer wrapper.
Tuning
-
OPEN_TIMING/CLOSE_TIMING: the morph curve and durations -
The
0.25/0.55breakpoints: when the preview dies and the editor is born -
numberOfLines={2}: the collapsed preview length