@delacour/react-native-bottom-sheet 0.1.0 → 0.2.0-alpha.20261020083124

package/README.md

@@ -35,8 +35,8 @@ installing.
 | Peer | Range | Why |
 | --- | --- | --- |
 | `react` | `>=19` | Ref-as-prop |
-| `react-native` | `>=0.81` | Fabric `getBoundingClientRect` |
-| `react-native-gesture-handler` | `>=2.28` | The handle and content pans |
+| `react-native` | `>=0.88` | Fabric `getBoundingClientRect` |
+| `react-native-gesture-handler` | `>=3.3` | The handle and content pans |
 | `react-native-reanimated` | `>=4` | Every animated value |
 | `react-native-worklets` | `>=0.5` | `scheduleOnRN` from the UI thread |
 | `react-native-keyboard-controller` | `>=1.18` | The only keyboard source — frame-accurate height and progress |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-bottom-sheet",
-	"version": "0.1.0",
+	"version": "0.2.0-alpha.20261020083124",
 	"description": "Headless bottom sheet engine for React Native — no tokens, no className",
 	"type": "module",
 	"license": "MIT",
@@ -38,8 +38,8 @@
 	},
 	"peerDependencies": {
 		"react": ">=19",
-		"react-native": ">=0.81",
-		"react-native-gesture-handler": ">=2.28",
+		"react-native": ">=0.88",
+		"react-native-gesture-handler": ">=3.3",
 		"react-native-keyboard-controller": ">=1.18",
 		"react-native-reanimated": ">=4",
 		"react-native-safe-area-context": ">=5",
@@ -52,6 +52,6 @@
 		"@types/bun": "^1.3.8",
 		"@types/react": "catalog:",
 		"react-native-teleport": "^1.2.2",
-		"typescript": "^5.9.3"
+		"typescript": "~6.0.3"
 	}
 }

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

@@ -1,5 +1,5 @@
 import { type ReactElement, useCallback, useMemo } from "react";
-import { type BlurEvent, type FocusEvent, TextInput } from "react-native";
+import { type BlurEvent, type FocusEvent, TextInput, type TextInputInstance } 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";
@@ -14,7 +14,7 @@ import type { BottomSheetTextInputProps } from "./bottom-sheet.types";
  */
 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 composed = useMemo(() => composeRefs<TextInputInstance | null>(ref, handlers.ref), [ref, handlers.ref]);
 
 	const handleFocus = useCallback(
 		(event: FocusEvent) => {

package/src/components/bottom-sheet.types.ts

@@ -1,5 +1,12 @@
 import type { ReactNode, Ref } from "react";
-import type { PressableProps, TextInput, TextInputProps, TextProps, View, ViewProps } from "react-native";
+import type {
+	PressableProps,
+	TextInputInstance,
+	TextInputProps,
+	TextProps,
+	ViewInstance,
+	ViewProps,
+} from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { SheetAnimation } from "../animation/animation.types";
 import type {
@@ -121,13 +128,13 @@ export type BottomSheetTriggerProps = Omit<PressableProps, "children"> & {
 	children?: ReactNode;
 	/** Hand `onPress` to the child rather than rendering a Pressable around it. */
 	asChild?: boolean;
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 };
 
 export type BottomSheetPortalProps = {
 	children?: ReactNode;
 	style?: ViewProps["style"];
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/**
 	 * Render where written — an absolute fill of the nearest positioned
 	 * ancestor — rather than teleporting to a host. A persistent drawer, a map's
@@ -145,7 +152,7 @@ export type BottomSheetPortalProps = {
 
 export type BottomSheetOverlayProps = Omit<ViewProps, "style"> & {
 	style?: ViewProps["style"];
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/** The index the scrim is fully in by. @default 0 */
 	appearsOnIndex?: number;
 	/** The index the scrim is gone by. @default -1 */
@@ -162,44 +169,44 @@ export type BottomSheetOverlayProps = Omit<ViewProps, "style"> & {
 };
 
 export type BottomSheetContainerProps = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 };
 
 export type BottomSheetBackgroundProps = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 };
 
 export type BottomSheetHandleProps = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/** Overrides the root's `enableHandlePanningGesture` for this handle. */
 	enablePanningGesture?: boolean;
 };
 
 export type BottomSheetContentProps = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/** Extra space between the content and a sticky footer. @default 0 */
 	footerGap?: number;
 };
 
 export type BottomSheetFooterProps = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/**
 	 * Stay put over the body and ride the keyboard by transform. Off, it is a
 	 * plain `View` for a footer that scrolls with the content. @default true
 	 */
 	sticky?: boolean;
-	/** Padding on the measured inner view, so it counts in the sheet's height. */
+	/** Padding on the footer's view, merged with `style`. It counts in the sheet's height. */
 	padding?: number;
 };
 
 export type BottomSheetTextInputProps = TextInputProps & {
-	ref?: Ref<TextInput>;
+	ref?: Ref<TextInputInstance>;
 };
 
 export type BottomSheetCloseProps = Omit<PressableProps, "children"> & {
 	children?: ReactNode;
 	asChild?: boolean;
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 };
 
 export type BottomSheetTitleProps = TextProps & {

package/src/gesture/use-sheet-pan.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Gesture, type GestureType, type PanGesture } from "react-native-gesture-handler";
+import { Gesture, type GestureType, type LegacyPanGesture } from "react-native-gesture-handler";
 import { KeyboardController } from "react-native-keyboard-controller";
 import { cancelAnimation, useSharedValue } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
@@ -215,7 +215,7 @@ export function useSheetPan(
 			settle(target, closed, velocity);
 		};
 
-		const attach = (pan: PanGesture, source: GestureSource, enabled: boolean): GestureType =>
+		const attach = (pan: LegacyPanGesture, source: GestureSource, enabled: boolean): GestureType =>
 			pan
 				.enabled(enabled)
 				.shouldCancelWhenOutside(false)

package/src/keyboard/use-bottom-sheet-text-input.ts

@@ -1,5 +1,5 @@
 import { type RefCallback, useCallback, useRef } from "react";
-import { findNodeHandle, TextInput } from "react-native";
+import { findNodeHandle, TextInput, type TextInputInstance } from "react-native";
 import { useOptionalBottomSheetInternal } from "../components/bottom-sheet.context";
 
 /**
@@ -10,11 +10,11 @@ import { useOptionalBottomSheetInternal } from "../components/bottom-sheet.conte
  * accepts it. One cast, in one place.
  */
 function nodeHandleOf(instance: unknown): number | null {
-	return findNodeHandle(instance as Parameters<typeof findNodeHandle>[0]);
+	return findNodeHandle(instance as Parameters<typeof findNodeHandle>[0]) ?? null;
 }
 
 export type BottomSheetTextInputHandlers = {
-	ref: RefCallback<TextInput | null>;
+	ref: RefCallback<TextInputInstance | null>;
 	onFocus: () => void;
 	onBlur: () => void;
 };
@@ -45,7 +45,7 @@ export function useBottomSheetTextInput(): BottomSheetTextInputHandlers {
 	const registry = useOptionalBottomSheetInternal()?.keyboard ?? null;
 	const registered = useRef<number | null>(null);
 
-	const ref = useCallback<RefCallback<TextInput | null>>(
+	const ref = useCallback<RefCallback<TextInputInstance | null>>(
 		(instance) => {
 			if (registry === null) return;
 			const previous = registered.current;

package/src/layout/use-container-layout.ts

@@ -1,10 +1,10 @@
 import { type RefObject, useCallback, useEffect, useRef } from "react";
-import { Dimensions, type LayoutChangeEvent, type View } from "react-native";
+import { Dimensions, type LayoutChangeEvent, type ViewInstance } from "react-native";
 import { acceptContainerLayout, UNMEASURED } from "../core";
 import type { SheetSharedState } from "../state/state.types";
 
 export type ContainerLayout = {
-	ref: RefObject<View | null>;
+	ref: RefObject<ViewInstance | null>;
 	onLayout: (event: LayoutChangeEvent) => void;
 };
 
@@ -25,7 +25,7 @@ export type ContainerLayout = {
  * `useMeasureHeight` does.
  */
 export function useContainerLayout(state: SheetSharedState): ContainerLayout {
-	const ref = useRef<View | null>(null);
+	const ref = useRef<ViewInstance | null>(null);
 	const { containerHeight, containerWidth, containerBottomOffset, keyboardHeight, keyboardProgress } = state;
 
 	useEffect(

package/src/scrollable/scrollable.types.ts

@@ -1,5 +1,12 @@
 import type { Component, ComponentType, DependencyList, EffectCallback, ReactElement, Ref, RefAttributes } from "react";
-import type { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps } from "react-native";
+import type {
+	FlatList,
+	FlatListProps,
+	ScrollViewInstance,
+	ScrollViewProps,
+	SectionList,
+	SectionListProps,
+} from "react-native";
 import type { AnimatedProps } from "react-native-reanimated";
 
 /**
@@ -46,7 +53,7 @@ export type ScrollableInnerComponent = ComponentType<ScrollableInnerProps>;
 
 export type BottomSheetScrollViewProps = ScrollViewProps &
 	BottomSheetScrollableProps & {
-		ref?: Ref<ScrollView>;
+		ref?: Ref<ScrollViewInstance>;
 	};
 
 export type BottomSheetFlatListProps<ItemT> = Omit<FlatListProps<ItemT>, "children"> & BottomSheetScrollableProps;

package/src/steps/steps.types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from "react";
-import type { View, ViewProps } from "react-native";
+import type { ViewInstance, ViewProps } from "react-native";
 import type { SheetAnimation } from "../animation/animation.types";
 import type {
 	SheetEvent,
@@ -42,7 +42,7 @@ export type UseSheetMachineOptions<S extends string, C, E extends SheetEvent> =
 
 export type BottomSheetStepsProps<S extends string, C, E extends SheetEvent> = Omit<ViewProps, "children"> & {
 	children?: ReactNode;
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	controller: SheetStepController<S, C, E>;
 	/** How one step gives way to the next. @default "crossfade" */
 	transition?: SheetStepTransition;
@@ -55,7 +55,7 @@ export type BottomSheetStepsProps<S extends string, C, E extends SheetEvent> = O
 };
 
 export type BottomSheetStepProps<S extends string = string> = ViewProps & {
-	ref?: Ref<View>;
+	ref?: Ref<ViewInstance>;
 	/** The step this body belongs to — a key of the machine's `states`. */
 	name: S;
 };