@delacour/react-native-bottom-sheet 0.1.0-alpha.0

package/src/components/bottom-sheet-close.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement, useCallback } from "react";
+import { type GestureResponderEvent, Pressable } from "react-native";
+import { Slot } from "../lib/slot";
+import { useBottomSheet } from "./bottom-sheet.context";
+import type { BottomSheetCloseProps } from "./bottom-sheet.types";
+
+/**
+ * The dismiss control. A `Pressable` on its own; with `asChild` it hands
+ * `onPress` to the child, the way `Trigger` does and for the same reason.
+ *
+ * Closing goes through the same path a swipe-down and an overlay press do, so
+ * a caller has one `onOpenChange` to watch rather than three.
+ */
+export function BottomSheetClose({
+	asChild = false,
+	children,
+	onPress,
+	accessibilityLabel = "Close",
+	...props
+}: BottomSheetCloseProps): ReactElement {
+	const { close } = useBottomSheet();
+
+	const handlePress = useCallback(
+		(event: GestureResponderEvent) => {
+			close();
+			onPress?.(event);
+		},
+		[close, onPress]
+	);
+
+	if (asChild) {
+		return (
+			<Slot accessibilityLabel={accessibilityLabel} onPress={handlePress} {...props}>
+				{children}
+			</Slot>
+		);
+	}
+
+	return (
+		<Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="button" onPress={handlePress} {...props}>
+			{children}
+		</Pressable>
+	);
+}
+BottomSheetClose.displayName = "DelacourBottomSheet.BottomSheet.Close";

package/src/components/bottom-sheet-container.tsx

@@ -0,0 +1,79 @@
+import { type ReactElement, useEffect } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { detachedFrame } from "../core";
+import { useBottomSheet, useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetContainerProps } from "./bottom-sheet.types";
+
+/**
+ * The panel — the surface that moves.
+ *
+ * It fills the frame and is translated down by the geometry's `position`, so
+ * `height` pixels of it show above the resting bottom line; over-dragged past
+ * the top it never uncovers its own bottom edge, because it is as tall as the
+ * frame. `Background`, `Handle` and `Content` are written inside it in flow
+ * order; the background is an absolute fill, the handle and the body stack.
+ *
+ * **It is not `accessible`.** An accessible container collapses its whole
+ * subtree into one element on iOS, and every field, button and line of copy
+ * inside becomes unreachable to VoiceOver. Instead the panel is a modal view
+ * while open under an overlay, so a screen reader stays inside it, and its
+ * descendants are hidden while it is closed, so the app behind it is what a
+ * screen reader finds. The title labels it.
+ *
+ * A container written without a `Handle` reports a handle height of zero on
+ * mount, so a handle-less sheet is not a sheet that never becomes ready.
+ */
+export function BottomSheetContainer({ children, style, ref, ...props }: BottomSheetContainerProps): ReactElement {
+	const { geometry, state, hasOverlay, handleMounted, titleId, detached } = useBottomSheetInternal();
+	const { isOpen } = useBottomSheet();
+	const position = geometry.position;
+	const containerWidth = state.containerWidth;
+	const config = state.config;
+
+	useEffect(() => {
+		if (!handleMounted.current && state.handleHeight.value < 0) state.handleHeight.value = 0;
+	}, [handleMounted, state]);
+
+	// A detached card is inset from the frame's sides by `detachedFrame`; an
+	// attached panel spans it. Both on the UI thread, off the measured width,
+	// so a rotation re-derives the inset with no render. The panel stays as
+	// tall as the frame either way, so it is `box-none` when detached: the
+	// surface, the handle and the body take their touches, and a touch in the
+	// gap under the card — where only the transparent panel is — falls through
+	// to the overlay behind it.
+	const animatedStyle = useAnimatedStyle(() => {
+		const options = config.value.detached;
+		if (options === null || !(containerWidth.value > 0)) {
+			return { left: 0, right: 0, width: undefined, transform: [{ translateY: position.value }] };
+		}
+		const frame = detachedFrame({
+			containerWidth: containerWidth.value,
+			horizontalMargin: options.horizontalMargin,
+			bottomOffset: options.bottomOffset,
+			bottomInset: config.value.bottomInset,
+		});
+		return { left: frame.left, right: undefined, width: frame.width, transform: [{ translateY: position.value }] };
+	});
+
+	return (
+		<Animated.View
+			accessibilityElementsHidden={!isOpen}
+			accessibilityLabelledBy={titleId}
+			accessibilityViewIsModal={isOpen && hasOverlay}
+			importantForAccessibility={isOpen ? "auto" : "no-hide-descendants"}
+			pointerEvents={detached === null ? "auto" : "box-none"}
+			ref={ref}
+			style={[styles.panel, detached === null ? null : styles.detached, style, animatedStyle]}
+			{...props}
+		>
+			{children}
+		</Animated.View>
+	);
+}
+BottomSheetContainer.displayName = "DelacourBottomSheet.BottomSheet.Container";
+
+const styles = StyleSheet.create({
+	panel: { bottom: 0, flexDirection: "column", left: 0, position: "absolute", right: 0, top: 0 },
+	detached: { overflow: "visible" },
+});

package/src/components/bottom-sheet-content.tsx

@@ -0,0 +1,102 @@
+import { type ReactElement, useCallback } from "react";
+import { type LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useMeasureHeight } from "../layout/use-measure-height";
+import { useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetContentProps } from "./bottom-sheet.types";
+
+/**
+ * Before the first layout there is no content area to clamp to, and a
+ * `maxHeight` of zero would clip the body while it measures itself. Tall
+ * enough that no sheet reaches it.
+ */
+const UNCLAMPED = 100_000;
+
+/**
+ * The static body — what a caller writes the title, the copy and the controls
+ * into.
+ *
+ * Three boxes. The outermost is the content pan's detector and the clip: its
+ * `maxHeight` follows the geometry's `bodyClip` on the UI thread, so under a
+ * sticky footer nothing of the body is drawn below the footer's top edge, at
+ * rest or while the sheet is dragged below its detent and the footer holds
+ * the screen's bottom. The middle box is the layout: `contentArea` plus the
+ * `bodyInset` the body reserves at its end, which reaches the sheet's bottom
+ * line, and it never reflows during a snap between detents. The innermost is
+ * the caller's — it takes the `style` — and its measured height is what a
+ * sheet sized to its content grows to. Yoga lays the inner box out at its
+ * natural height whatever the outer clamps say, which is what makes the
+ * measurement honest.
+ *
+ * A trailing spacer the height of the body's inset — the sticky footer, band
+ * included, or the band alone — keeps the last line of content above either,
+ * and `footerGap` adds to it above a footer.
+ */
+export function BottomSheetContent({
+	children,
+	style,
+	ref,
+	footerGap = 0,
+	...props
+}: BottomSheetContentProps): ReactElement {
+	const { state, geometry, pans, detached, contentHeightSource } = useBottomSheetInternal();
+	const measure = useMeasureHeight(state.contentHeight);
+	// A `Steps` body drives `contentHeight` itself; its layout events here
+	// would be the stack mid-animation, a frame stale.
+	const onLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			if (contentHeightSource.current === "steps") return;
+			measure(event);
+		},
+		[contentHeightSource, measure]
+	);
+	const { contentArea, bodyInset, bodyClip, layoutReady, surfaceHeight } = geometry;
+	const isDetached = detached !== null;
+
+	// A detached card's surface is only as tall as the sheet, so its body is
+	// also held to what the surface shows, or the opening animation would draw
+	// the body under the card. The surface keeps its detent's height while the
+	// card slides closed, so the body slides with it, unchanged.
+	const clip = useAnimatedStyle(() => {
+		if (!layoutReady.value) return { maxHeight: UNCLAMPED };
+		let height = bodyClip.value;
+		if (isDetached) {
+			const shown = surfaceHeight.value - state.handleHeight.value;
+			height = Math.min(height, shown > 0 ? shown : 0);
+		}
+		return { maxHeight: height };
+	});
+
+	// A ceiling, so the body keeps its natural height under it — except under
+	// `fillParent`, where the body is the space above the keyboard and a flex
+	// child inside it is meant to shrink to fit.
+	const layout = useAnimatedStyle(() => {
+		const area = layoutReady.value ? contentArea.value + bodyInset.value : UNCLAMPED;
+		return state.config.value.keyboardBehavior === "fillParent" && layoutReady.value
+			? { height: area, maxHeight: area }
+			: { height: undefined, maxHeight: area };
+	});
+
+	const spacer = useAnimatedStyle(() => ({
+		height: bodyInset.value + (state.config.value.hasFooter ? footerGap : 0),
+	}));
+
+	return (
+		<GestureDetector gesture={pans.content}>
+			<Animated.View style={[styles.clip, clip]}>
+				<Animated.View style={layout}>
+					<View onLayout={onLayout} ref={ref} style={style} {...props}>
+						{children}
+					</View>
+					<Animated.View style={spacer} />
+				</Animated.View>
+			</Animated.View>
+		</GestureDetector>
+	);
+}
+BottomSheetContent.displayName = "DelacourBottomSheet.BottomSheet.Content";
+
+const styles = StyleSheet.create({
+	clip: { overflow: "hidden" },
+});

package/src/components/bottom-sheet-description.tsx

@@ -0,0 +1,33 @@
+import type { ReactElement } from "react";
+import { Text } from "react-native";
+import { Slot } from "../lib/slot";
+import { useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetDescriptionProps } from "./bottom-sheet.types";
+
+/**
+ * Supporting copy under the title. Publishes a `nativeID` for the same reason
+ * `Title` does, so a skin can describe the panel by it. A `Text` on its own;
+ * with `asChild`, the id lands on the child.
+ */
+export function BottomSheetDescription({
+	asChild = false,
+	children,
+	...props
+}: BottomSheetDescriptionProps): ReactElement {
+	const { descriptionId } = useBottomSheetInternal();
+
+	if (asChild) {
+		return (
+			<Slot nativeID={descriptionId} {...props}>
+				{children}
+			</Slot>
+		);
+	}
+
+	return (
+		<Text nativeID={descriptionId} {...props}>
+			{children}
+		</Text>
+	);
+}
+BottomSheetDescription.displayName = "DelacourBottomSheet.BottomSheet.Description";

package/src/components/bottom-sheet-footer.tsx

@@ -0,0 +1,97 @@
+import { type ReactElement, useLayoutEffect, useMemo } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { bottomBand } from "../core";
+import { useMeasureHeight } from "../layout/use-measure-height";
+import { useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetFooterProps } from "./bottom-sheet.types";
+
+/**
+ * The footer — a row that stays put while the body scrolls and rides the
+ * keyboard up by transform.
+ *
+ * Sticky (the default), it is absolutely positioned at the top of the panel
+ * and translated to the geometry's `footerTop`, which the core proves is
+ * constant for the whole of a keyboard animation: the keyboard's pixels come
+ * off the lift in step with `progress`, so the footer's bottom lands on the
+ * keyboard's top edge without ever moving. Its one view — the one that takes
+ * `style` and `padding` — pads through the resting safe-area band as well, so
+ * the surface a caller styles reaches the sheet's bottom line and its
+ * background covers the band: while the sheet is dragged below its detent the
+ * footer holds the screen's bottom edge and the body slides down behind it,
+ * and a transparent band would show every line that passed. The box is
+ * measured less the band into `footerContentHeight`, which the dynamic detent
+ * counts. The band is constant on purpose — the footer's translate does the
+ * collapsing, and padding that shrank as well would move the footer twice.
+ *
+ * The bottom padding is composed on the JS side from the flattened style, so a
+ * `paddingBottom`, `paddingVertical` or `padding` a caller writes still
+ * applies above the band; one given as a string cannot be added to and is
+ * read as zero.
+ *
+ * Mounting tells the root there is a footer — synchronously, so the flag is
+ * in the config before any measurement lands — and the layout then waits
+ * for the footer's own measurement before the first open, while the body
+ * reserves a trailing space its height. Written inside `Container`, after
+ * the body.
+ *
+ * `sticky={false}` is a plain `View` for a footer that should scroll with
+ * the content; write it inside the body then.
+ */
+export function BottomSheetFooter({
+	children,
+	style,
+	ref,
+	sticky = true,
+	padding,
+	...props
+}: BottomSheetFooterProps): ReactElement {
+	const { state, geometry, setHasFooter, detached, bottomInset } = useBottomSheetInternal();
+	const band = bottomBand(detached !== null, bottomInset);
+	const onLayout = useMeasureHeight(state.footerContentHeight, band);
+	const { footerTop } = geometry;
+
+	// A layout effect, not a passive one: the flag has to reach the root's
+	// config before the handle and the content report their heights, or the
+	// first open resolves on a detent with no footer in it and the mount
+	// animation, already running, keeps the corrected list from applying.
+	useLayoutEffect(() => {
+		if (!sticky) return;
+		setHasFooter(true);
+		return () => setHasFooter(false);
+	}, [sticky, setHasFooter]);
+
+	const translate = useAnimatedStyle(() => ({
+		transform: [{ translateY: footerTop.value }],
+	}));
+
+	const inner = useMemo<ViewStyle>(() => {
+		const flat = StyleSheet.flatten([padding === undefined ? null : { padding }, style]) ?? {};
+		return flat;
+	}, [padding, style]);
+	const surface = useMemo<ViewStyle>(() => {
+		if (!sticky) return inner;
+		const own = inner.paddingBottom ?? inner.paddingVertical ?? inner.padding ?? 0;
+		return { ...inner, paddingBottom: (typeof own === "number" ? own : 0) + band };
+	}, [inner, sticky, band]);
+
+	if (!sticky) {
+		return (
+			<View ref={ref} style={surface} {...props}>
+				{children}
+			</View>
+		);
+	}
+	return (
+		<Animated.View pointerEvents="box-none" style={[styles.sticky, translate]}>
+			<View onLayout={onLayout} ref={ref} style={surface} {...props}>
+				{children}
+			</View>
+		</Animated.View>
+	);
+}
+BottomSheetFooter.displayName = "DelacourBottomSheet.BottomSheet.Footer";
+
+const styles = StyleSheet.create({
+	sticky: { left: 0, position: "absolute", right: 0, top: 0, zIndex: 1 },
+});

package/src/components/bottom-sheet-handle.tsx

@@ -0,0 +1,72 @@
+import { type ReactElement, useCallback, useEffect } from "react";
+import { type AccessibilityActionEvent, View } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import { useMeasureHeight } from "../layout/use-measure-height";
+import { useBottomSheet, useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetHandleProps } from "./bottom-sheet.types";
+
+const ACTIONS = [{ name: "increment" }, { name: "decrement" }, { name: "escape" }] as const;
+
+/**
+ * The grabber's row, and the sheet's one adjustable accessibility element.
+ *
+ * It draws nothing of its own — the skin puts the pill inside it — but it
+ * owns the handle pan and reports its height into the layout, so a sheet
+ * sized to its content counts it. A handle that is never written is a handle
+ * of height zero; see `Container`.
+ *
+ * For a screen reader it is the sheet: `adjustable`, with the detent as its
+ * value, increment and decrement moving one detent either way, and the escape
+ * gesture closing. Nothing else in the sheet has to know about detents.
+ */
+export function BottomSheetHandle({
+	style,
+	ref,
+	enablePanningGesture,
+	accessibilityLabel = "Bottom sheet",
+	...props
+}: BottomSheetHandleProps): ReactElement {
+	const { state, pans, handleMounted, enableHandlePanningGesture } = useBottomSheetInternal();
+	const { index, detentCount: count, snapToIndex, close } = useBottomSheet();
+	const onLayout = useMeasureHeight(state.handleHeight);
+
+	useEffect(() => {
+		handleMounted.current = true;
+		return () => {
+			handleMounted.current = false;
+		};
+	}, [handleMounted]);
+
+	const onAccessibilityAction = useCallback(
+		(event: AccessibilityActionEvent) => {
+			const action = event.nativeEvent.actionName;
+			if (action === "increment") snapToIndex(index + 1);
+			else if (action === "decrement") snapToIndex(index - 1);
+			else if (action === "escape") close();
+		},
+		[index, snapToIndex, close]
+	);
+
+	// The pan is shared with every handle written in this sheet, and a gesture
+	// builder mutates in place, so a per-handle opt-out leaves the detector out
+	// rather than flipping a flag on the shared object.
+	const enabled = enablePanningGesture ?? enableHandlePanningGesture;
+	const row = (
+		<View
+			accessibilityActions={ACTIONS}
+			accessibilityLabel={accessibilityLabel}
+			accessibilityRole="adjustable"
+			accessibilityValue={{ text: index < 0 ? "Closed" : `Detent ${index + 1} of ${count}` }}
+			accessible
+			onAccessibilityAction={onAccessibilityAction}
+			onAccessibilityEscape={close}
+			onLayout={onLayout}
+			ref={ref}
+			style={style}
+			{...props}
+		/>
+	);
+	if (!enabled) return row;
+	return <GestureDetector gesture={pans.handle}>{row}</GestureDetector>;
+}
+BottomSheetHandle.displayName = "DelacourBottomSheet.BottomSheet.Handle";

package/src/components/bottom-sheet-overlay.tsx

@@ -0,0 +1,91 @@
+import { type ReactElement, useCallback, useEffect } from "react";
+import { Pressable, StyleSheet, type ViewProps } from "react-native";
+import Animated, { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
+import { backdropInteractive, backdropOpacity } from "../core";
+import { useBottomSheet, useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetOverlayProps } from "./bottom-sheet.types";
+
+/**
+ * The scrim over the app behind the sheet.
+ *
+ * Its opacity follows the keyboard-free index on the UI thread, so a keyboard
+ * lift never dims the app and a higher detent is no darker. Omit it and the
+ * sheet has no scrim at all.
+ *
+ * **It is a React Native `Pressable`, never a Gesture Handler tap, and it is
+ * written before the panel.** Gesture Handler resolves a touch between
+ * competing gestures, so a full-screen tap gesture behind the sheet wins a
+ * touch on a `TextInput`, which has no gesture of its own, and the field never
+ * focuses. Native hit-testing resolves a touch by view order instead: the
+ * panel is the later sibling, so a touch on it never reaches this view, and a
+ * touch beside it does. Nothing here has to know where the sheet is.
+ *
+ * While the index is at or below `disappearsOnIndex` the view takes no
+ * touches and is hidden from assistive technology, so a closed sheet's scrim
+ * is not a transparent wall over the app.
+ */
+export function BottomSheetOverlay({
+	appearsOnIndex = 0,
+	disappearsOnIndex = -1,
+	opacity = 1,
+	pressBehavior = "close",
+	enableTouchThrough = false,
+	accessibilityLabel = "Close",
+	onPress,
+	style,
+	ref,
+	...props
+}: BottomSheetOverlayProps): ReactElement {
+	const { geometry, setHasOverlay, stepOverride } = useBottomSheetInternal();
+	const { isOpen, close, collapse, snapToIndex } = useBottomSheet();
+	const index = geometry.index;
+
+	useEffect(() => {
+		setHasOverlay(true);
+		return () => setHasOverlay(false);
+	}, [setHasOverlay]);
+
+	const animatedStyle = useAnimatedStyle(() => ({
+		opacity: backdropOpacity(index.value, disappearsOnIndex, appearsOnIndex, opacity),
+	}));
+
+	const animatedProps = useAnimatedProps<ViewProps>(() => ({
+		pointerEvents: !enableTouchThrough && backdropInteractive(index.value, disappearsOnIndex) ? "auto" : "none",
+	}));
+
+	// A step that is not dismissible takes the press away for as long as it is current.
+	const behavior = stepOverride?.dismissible === false ? "none" : pressBehavior;
+	const handlePress = useCallback(() => {
+		onPress?.();
+		if (behavior === "close") close();
+		else if (behavior === "collapse") collapse();
+		else if (typeof behavior === "number") snapToIndex(behavior);
+	}, [onPress, behavior, close, collapse, snapToIndex]);
+
+	const pressable = behavior !== "none";
+
+	return (
+		<Animated.View
+			accessibilityElementsHidden={!isOpen}
+			animatedProps={animatedProps}
+			importantForAccessibility={isOpen ? "auto" : "no-hide-descendants"}
+			ref={ref}
+			style={[StyleSheet.absoluteFill, style, animatedStyle]}
+			{...props}
+		>
+			<Pressable
+				accessibilityLabel={accessibilityLabel}
+				accessibilityRole={pressable ? "button" : undefined}
+				accessible={pressable}
+				disabled={!pressable}
+				onPress={handlePress}
+				style={styles.fill}
+			/>
+		</Animated.View>
+	);
+}
+BottomSheetOverlay.displayName = "DelacourBottomSheet.BottomSheet.Overlay";
+
+const styles = StyleSheet.create({
+	fill: { flex: 1 },
+});

package/src/components/bottom-sheet-portal.tsx

@@ -0,0 +1,96 @@
+import { type ReactElement, useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Portal } from "react-native-teleport";
+import { composeRefs } from "../lib/compose-refs";
+import { useOptionalBottomSheetHostName } from "../portal/host.context";
+import { zIndexOf } from "../portal/sheet-registry";
+import { useOptionalSheetRegistry } from "../portal/sheet-registry.context";
+import { useBottomSheetInternal } from "./bottom-sheet.context";
+import type { BottomSheetPortalProps } from "./bottom-sheet.types";
+
+/**
+ * Everything drawn over the app once the sheet is open, inside the frame the
+ * sheet measures itself against.
+ *
+ * **One implementation, two destinations.** With a `BottomSheetProvider`
+ * above and no `inline`, the frame is written inside a teleport `Portal`
+ * bound to the nearest `BottomSheet.Host` — `root` under a bare provider, or
+ * the host a native modal screen wrote last — and the native view moves
+ * there while the React tree stays put, so every context the trigger's
+ * screen provides still reaches the sheet. Without a provider, or with
+ * `inline`, the frame renders where it is written: an absolute fill of the
+ * nearest positioned ancestor.
+ *
+ * The frame is `box-none`: it takes no touch of its own, so a closed sheet
+ * leaves the app under it fully interactive. `overflow: hidden` keeps a
+ * closed panel — translated to the frame's full height — from drawing under
+ * the parent's edge; a detached frame is `overflow: visible`, so nothing of a
+ * card sliding out through the gap is cut at any line but the screen's own. The `zIndex` comes from the registry: sheets in one host
+ * are siblings, and the later open is the later number.
+ *
+ * Children mount while the sheet is presented, and stay mounted with
+ * `keepMounted` or with `unmountOnClose` off — which is the default for an
+ * inline sheet, a persistent drawer. While presented the sheet is in the
+ * registry, in its host, and `stackBehavior: "replace"` closes the others
+ * there.
+ */
+export function BottomSheetPortal({
+	children,
+	style,
+	ref,
+	inline = false,
+	hostName,
+	unmountOnClose,
+}: BottomSheetPortalProps): ReactElement | null {
+	const { presented, keepMounted, topInset, containerLayout, sheetId, stackBehavior, detached } =
+		useBottomSheetInternal();
+	const registry = useOptionalSheetRegistry();
+	const nearest = useOptionalBottomSheetHostName();
+	const frameRef = useMemo(() => composeRefs(containerLayout.ref, ref), [containerLayout.ref, ref]);
+
+	const teleported = !inline && nearest !== null;
+	const host = hostName ?? nearest ?? "root";
+	// An inline sheet is a host of its own: nothing replaces it, and it is always its own top.
+	const hostKey = teleported ? host : `inline:${sheetId}`;
+	const unmount = keepMounted ? false : (unmountOnClose ?? teleported);
+	const mounted = presented || !unmount;
+
+	// Keyed on the two stable callbacks, never on the registry object: its
+	// identity carries the state that `present` itself changes, and an effect
+	// keyed on it would present, re-render, dismiss and present without end.
+	const present = registry?.present;
+	const dismissed = registry?.dismissed;
+	useEffect(() => {
+		if (!presented || present === undefined || dismissed === undefined) return;
+		present(sheetId, hostKey, stackBehavior);
+		return () => dismissed(sheetId);
+	}, [presented, present, dismissed, sheetId, hostKey, stackBehavior]);
+
+	const zIndex = registry === null ? 0 : zIndexOf(registry.state, sheetId);
+
+	if (!mounted) return null;
+
+	const frame = (
+		<View
+			onLayout={containerLayout.onLayout}
+			pointerEvents="box-none"
+			ref={frameRef}
+			style={[styles.frame, detached === null ? null : styles.frameDetached, { top: topInset, zIndex }, style]}
+		>
+			{children}
+		</View>
+	);
+	if (!teleported) return frame;
+
+	return (
+		<Portal hostName={host} style={[StyleSheet.absoluteFill, { zIndex }]}>
+			{frame}
+		</Portal>
+	);
+}
+BottomSheetPortal.displayName = "DelacourBottomSheet.BottomSheet.Portal";
+
+const styles = StyleSheet.create({
+	frame: { bottom: 0, left: 0, overflow: "hidden", position: "absolute", right: 0 },
+	frameDetached: { overflow: "visible" },
+});

package/src/components/bottom-sheet-text-input.tsx

@@ -0,0 +1,36 @@
+import { type ReactElement, useCallback, useMemo } from "react";
+import { type BlurEvent, type FocusEvent, TextInput } from "react-native";
+import { useBottomSheetTextInput } from "../keyboard/use-bottom-sheet-text-input";
+import { composeRefs } from "../lib/compose-refs";
+import type { BottomSheetTextInputProps } from "./bottom-sheet.types";
+
+/**
+ * React Native's `TextInput`, registered with the sheet.
+ *
+ * `useBottomSheetTextInput` over a plain `TextInput`, for the case with no
+ * skin in front of it: the keyboard it raises is the sheet's under any
+ * `keyboardScope`, including `registered`. A field of your own takes the
+ * hook instead and keeps its component.
+ */
+export function BottomSheetTextInput({ ref, onFocus, onBlur, ...props }: BottomSheetTextInputProps): ReactElement {
+	const handlers = useBottomSheetTextInput();
+	const composed = useMemo(() => composeRefs<TextInput | null>(ref, handlers.ref), [ref, handlers.ref]);
+
+	const handleFocus = useCallback(
+		(event: FocusEvent) => {
+			handlers.onFocus();
+			onFocus?.(event);
+		},
+		[handlers.onFocus, onFocus]
+	);
+	const handleBlur = useCallback(
+		(event: BlurEvent) => {
+			handlers.onBlur();
+			onBlur?.(event);
+		},
+		[handlers.onBlur, onBlur]
+	);
+
+	return <TextInput onBlur={handleBlur} onFocus={handleFocus} ref={composed} {...props} />;
+}
+BottomSheetTextInput.displayName = "DelacourBottomSheet.BottomSheet.TextInput";