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

package/src/state/state.types.ts

@@ -0,0 +1,134 @@
+import type { SharedValue } from "react-native-reanimated";
+import type {
+	AnimationSource,
+	DetachedOptions,
+	DetentSpec,
+	GestureSource,
+	KeyboardBehavior,
+	KeyboardBlurBehavior,
+	KeyboardScope,
+	ScrollableType,
+	SheetIntent,
+	SheetState,
+} from "../core";
+
+/** Whether an animation is running. Numeric so the UI thread never serialises a string. */
+export const ANIM_STATUS = {
+	IDLE: 0,
+	RUNNING: 1,
+} as const;
+
+export type AnimStatus = (typeof ANIM_STATUS)[keyof typeof ANIM_STATUS];
+
+/**
+ * The root's props as the UI thread needs them, mirrored into one shared value
+ * so a worklet reads a snapshot rather than a dozen captured primitives that
+ * would each rebuild the closure when they change.
+ */
+export type SheetWorkletConfig = {
+	dynamicSizing: boolean;
+	maxDynamicContentSize: number | undefined;
+	hasFooter: boolean;
+	bottomInset: number;
+	detached: DetachedOptions | null;
+	enablePanDownToClose: boolean;
+	enableOverDrag: boolean;
+	overDragResistanceFactor: number;
+	initialIndex: number;
+	animateOnMount: boolean;
+	keyboardBehavior: KeyboardBehavior;
+	keyboardBlurBehavior: KeyboardBlurBehavior;
+	keyboardScope: KeyboardScope;
+	enableBlurKeyboardOnGesture: boolean;
+};
+
+/**
+ * Every raw shared value the sheet owns.
+ *
+ * Measurements start at `UNMEASURED` (`-1`); `base` is the only animated
+ * value; everything else is written by a gesture, a layout callback or the JS
+ * thread, and read by the derived geometry.
+ */
+export type SheetSharedState = {
+	/** The frame the sheet lives in, `top: topInset` to the host's bottom. */
+	containerHeight: SharedValue<number>;
+	containerWidth: SharedValue<number>;
+	/** Window bottom minus frame bottom — what a keyboard has to clear before it overlaps. */
+	containerBottomOffset: SharedValue<number>;
+	handleHeight: SharedValue<number>;
+	contentHeight: SharedValue<number>;
+	footerContentHeight: SharedValue<number>;
+	/** The keyboard-free height. The only value an animation writes. */
+	base: SharedValue<number>;
+	/** The settled index, `-1` closed. Written on settle, never mid-flight. */
+	currentIndex: SharedValue<number>;
+	animStatus: SharedValue<AnimStatus>;
+	animSource: SharedValue<AnimationSource>;
+	animTarget: SharedValue<number>;
+	gestureSource: SharedValue<GestureSource>;
+	/** The scrollable's live offset, written by its scroll handler; negative while bounced past the top. */
+	scrollOffsetY: SharedValue<number>;
+	/** Where the scrollable is held while the sheet is below its highest detent. */
+	scrollLockedAt: SharedValue<number>;
+	/** Which scrollable is the body, `NONE` for static content. Set by `createBottomSheetScrollable` on focus. */
+	scrollableType: SharedValue<ScrollableType>;
+	keyboardOwned: SharedValue<boolean>;
+	/** keyboard-controller's `progress`, `0` until BSHEET-3 wires the keyboard. */
+	keyboardProgress: SharedValue<number>;
+	/** The keyboard's height inside the container, positive, `0` until BSHEET-3. */
+	keyboardHeight: SharedValue<number>;
+	/** The pending request from the JS thread, `null` once resolved. */
+	intent: SharedValue<SheetIntent | null>;
+	/** Whether the next open is the mount open — reported as `"mount"` and skipped by `animateOnMount: false`. */
+	mountPending: SharedValue<boolean>;
+	/** The `snapPoints` prop, string-keyed so identity churn is harmless. */
+	detentSpec: SharedValue<readonly DetentSpec[]>;
+	config: SharedValue<SheetWorkletConfig>;
+};
+
+/**
+ * Every number derived from the raw state, each a `useDerivedValue` over the
+ * core's pure functions. Consumers read; nothing writes.
+ */
+export type SheetGeometry = {
+	restingBottom: SharedValue<number>;
+	closedHeight: SharedValue<number>;
+	/** The height the sheet may occupy; what a `%` detent resolves against. */
+	maxHeight: SharedValue<number>;
+	/** The safe-area band an attached sheet reserves. */
+	band: SharedValue<number>;
+	bandNow: SharedValue<number>;
+	/** Ascending, unique, the dynamic detent included when sizing to content. */
+	detents: SharedValue<readonly number[]>;
+	/** The last detent, or the closed height when there is none yet. */
+	highest: SharedValue<number>;
+	keyboardLift: SharedValue<number>;
+	/** `base + keyboardLift`, clamped. What the view shows. */
+	height: SharedValue<number>;
+	/** `translateY` for the panel. */
+	position: SharedValue<number>;
+	/** Continuous index over `base`, `-1` closed. The overlay follows this. */
+	index: SharedValue<number>;
+	sheetState: SharedValue<SheetState>;
+	layoutReady: SharedValue<boolean>;
+	/** What the body may fill above the footer or the band, sized against its detent. */
+	contentArea: SharedValue<number>;
+	footerHeight: SharedValue<number>;
+	footerTop: SharedValue<number>;
+	/** What trails the body: the footer, band included, or the band alone. The body reserves it at its end. */
+	bodyInset: SharedValue<number>;
+	/**
+	 * How tall the body's clipping box is: `contentArea + bodyInset` — the body
+	 * is laid out to the sheet's bottom line — held under a sticky footer to
+	 * the footer's live top edge, so nothing of the body shows below it while
+	 * the sheet is lower than its detent.
+	 */
+	bodyClip: SharedValue<number>;
+	/**
+	 * How tall a detached card's surface is: `height` between the detents, the
+	 * first detent's height below them and the last's above, so a close, a
+	 * rubber-band and an over-drag move the card as a rigid body. Equal to
+	 * `height` when attached.
+	 */
+	surfaceHeight: SharedValue<number>;
+};

package/src/state/use-detents.ts

@@ -0,0 +1,43 @@
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import { dynamicDetent, normalizeDetents } from "../core";
+import type { SheetSharedState } from "./state.types";
+
+/**
+ * The ascending, unique detents, recomputed on the UI thread whenever the spec,
+ * the container or a measurement changes.
+ *
+ * The dynamic detent joins the list only once the handle and the content have
+ * both reported — before that a sheet sized to its content has no detent at
+ * all, and `layoutReady` keeps an open intent waiting rather than animating to
+ * a guess. An explicit detent equal to the dynamic one is one detent, not two.
+ */
+export function useDetents(
+	state: SheetSharedState,
+	maxHeight: SharedValue<number>,
+	band: SharedValue<number>
+): SharedValue<readonly number[]> {
+	return useDerivedValue<readonly number[]>(() => {
+		const available = maxHeight.value;
+		const config = state.config.value;
+		const detents = normalizeDetents(state.detentSpec.value, available);
+
+		if (!config.dynamicSizing || available <= 0) return detents;
+		if (state.handleHeight.value < 0 || state.contentHeight.value < 0) return detents;
+		if (config.hasFooter && state.footerContentHeight.value < 0) return detents;
+
+		const dynamic = dynamicDetent({
+			handleHeight: state.handleHeight.value,
+			contentHeight: state.contentHeight.value,
+			footerContentHeight: state.footerContentHeight.value,
+			band: band.value,
+			hasFooter: config.hasFooter,
+			available,
+			maxDynamicContentSize: config.maxDynamicContentSize,
+		});
+		if (detents.indexOf(dynamic) !== -1) return detents;
+
+		const merged = [...detents, dynamic];
+		merged.sort((a, b) => a - b);
+		return merged;
+	});
+}

package/src/state/use-sheet-geometry.ts

@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import {
+	availableHeight,
+	bandNow,
+	bodyClip,
+	bodyInset,
+	bottomBand,
+	clampHeight,
+	closedHeight,
+	contentArea,
+	footerHeight,
+	footerTop,
+	indexForHeight,
+	isLayoutReady,
+	keyboardLift,
+	positionFor,
+	restingBottom,
+	sheetState,
+	surfaceHeight,
+} from "../core";
+import type { SheetGeometry, SheetSharedState } from "./state.types";
+import { useDetents } from "./use-detents";
+
+/**
+ * Where an unmeasured panel goes: far enough down that no frame of it shows
+ * before the container has reported a height.
+ */
+const OFFSCREEN = 100_000;
+
+/**
+ * Every derived number, as `useDerivedValue`s over the core's pure functions.
+ *
+ * Each hook is one formula from `core/AGENTS.md`, in dependency order, and none
+ * of them writes anything: a gesture, an animation or a layout callback writes
+ * the raw state and this re-derives. The keyboard values are real derivations
+ * over `keyboardHeight` and `keyboardProgress`, which BSHEET-3 writes; until
+ * then both are `0` and every keyboard term is inert.
+ */
+export function useSheetGeometry(state: SheetSharedState): SheetGeometry {
+	const resting = useDerivedValue(() => {
+		const detached = state.config.value.detached;
+		return restingBottom(detached !== null, detached?.bottomOffset ?? 0, state.config.value.bottomInset);
+	});
+	const closed = useDerivedValue(() => closedHeight(resting.value));
+	const maxHeight = useDerivedValue(() => availableHeight(state.containerHeight.value, resting.value));
+	const band = useDerivedValue(() => bottomBand(state.config.value.detached !== null, state.config.value.bottomInset));
+	const bandCurrent = useDerivedValue(() => bandNow(band.value, state.keyboardProgress.value));
+	const detents = useDetents(state, maxHeight, band);
+	const highest = useDerivedValue(() => {
+		const list = detents.value;
+		return list.length > 0 ? (list[list.length - 1] as number) : closed.value;
+	});
+	// The keyboard the sheet answers to: owned, and under a behaviour that does
+	// anything about it. `none` neither lifts nor shrinks the body.
+	const keyboardEffective = useDerivedValue(() =>
+		state.keyboardOwned.value && state.config.value.keyboardBehavior !== "none" ? state.keyboardHeight.value : 0
+	);
+	const lift = useDerivedValue(() =>
+		keyboardLift({
+			keyboardHeight: keyboardEffective.value,
+			progress: state.keyboardProgress.value,
+			band: band.value,
+			behavior: state.config.value.keyboardBehavior,
+			gapBelow: resting.value,
+		})
+	);
+	const height = useDerivedValue(() => clampHeight(state.base.value + lift.value, closed.value, maxHeight.value));
+	const position = useDerivedValue(() => {
+		const container = state.containerHeight.value;
+		if (!(container > 0)) return OFFSCREEN;
+		return positionFor(container, resting.value, height.value);
+	});
+	const index = useDerivedValue(() => indexForHeight(state.base.value, detents.value, closed.value));
+	const sheetStateValue = useDerivedValue(() =>
+		sheetState(state.base.value, height.value, detents.value, closed.value, maxHeight.value)
+	);
+	const layoutReady = useDerivedValue(() =>
+		isLayoutReady({
+			containerHeight: state.containerHeight.value,
+			handleHeight: state.handleHeight.value,
+			contentHeight: state.contentHeight.value,
+			footerContentHeight: state.footerContentHeight.value,
+			dynamicSizing: state.config.value.dynamicSizing,
+			hasFooter: state.config.value.hasFooter,
+		})
+	);
+	const footer = useDerivedValue(() =>
+		footerHeight(state.config.value.hasFooter, state.footerContentHeight.value, bandCurrent.value)
+	);
+	// The body is sized against the highest detent rather than `base`, so it
+	// never reflows during a snap between detents — but a `fillParent` snap
+	// takes `base` above every detent, and the body follows it up.
+	const area = useDerivedValue(() => {
+		const sheetHeight = Math.min(maxHeight.value, Math.max(highest.value, state.base.value) + lift.value);
+		return contentArea({
+			sheetHeight,
+			handleHeight: state.handleHeight.value,
+			footerHeight: footer.value,
+			keyboardHeight: keyboardEffective.value,
+			trailingBand: state.config.value.hasFooter ? 0 : bandCurrent.value,
+		});
+	});
+	const top = useDerivedValue(() =>
+		footerTop({
+			sheetHeight: height.value,
+			keyboardHeight: keyboardEffective.value,
+			footerContentHeight: state.footerContentHeight.value,
+			band: bandCurrent.value,
+		})
+	);
+	// The body is laid out to the sheet's bottom line and reserves `inset` at
+	// its end; the clip is what of it may show — under a footer, only what is
+	// above the footer's live top edge.
+	const inset = useDerivedValue(() => bodyInset(state.config.value.hasFooter, footer.value, bandCurrent.value));
+	const clip = useDerivedValue(() =>
+		bodyClip({
+			contentArea: area.value,
+			inset: inset.value,
+			hasFooter: state.config.value.hasFooter,
+			sheetHeight: height.value,
+			handleHeight: state.handleHeight.value,
+			keyboardHeight: keyboardEffective.value,
+		})
+	);
+
+	const surface = useDerivedValue(() => {
+		if (state.config.value.detached === null) return height.value;
+		const list = detents.value;
+		const lowest = list.length > 0 ? (list[0] as number) : 0;
+		return surfaceHeight(height.value, lowest, highest.value);
+	});
+
+	return useMemo<SheetGeometry>(
+		() => ({
+			restingBottom: resting,
+			closedHeight: closed,
+			maxHeight,
+			band,
+			bandNow: bandCurrent,
+			detents,
+			highest,
+			keyboardLift: lift,
+			height,
+			position,
+			index,
+			sheetState: sheetStateValue,
+			layoutReady,
+			contentArea: area,
+			footerHeight: footer,
+			footerTop: top,
+			bodyInset: inset,
+			bodyClip: clip,
+			surfaceHeight: surface,
+		}),
+		[
+			resting,
+			closed,
+			maxHeight,
+			band,
+			bandCurrent,
+			detents,
+			highest,
+			lift,
+			height,
+			position,
+			index,
+			sheetStateValue,
+			layoutReady,
+			area,
+			footer,
+			top,
+			inset,
+			clip,
+			surface,
+		]
+	);
+}

package/src/state/use-sheet-intents.ts

@@ -0,0 +1,144 @@
+import { useCallback, useMemo, useRef } from "react";
+import { useAnimatedReaction } from "react-native-reanimated";
+import type { AnimateTo, JumpTo } from "../animation/animation.types";
+import { GESTURE_SOURCE, heightForIndex, indexForHeight, resolveIntent, type SheetIntent } from "../core";
+import { ANIM_STATUS, type SheetGeometry, type SheetSharedState } from "./state.types";
+
+/** `Omit` over each member of a union, rather than over the union's common keys. */
+type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;
+
+/** Every request the JS thread can make, minus the `id` the dispatcher stamps on it. */
+export type IntentRequest = DistributiveOmit<SheetIntent, "id">;
+
+export type SheetIntentDispatch = (request: IntentRequest) => void;
+
+/**
+ * The JS thread's handle on the queue.
+ *
+ * `lastKind` is the kind of the most recent request, tracked on the JS side.
+ * A JS write to a shared value is queued to the UI thread, so reading
+ * `state.intent.value` straight after a `dispatch` still returns what was
+ * there before — the root once read `null` that way, queued an `open` on top
+ * of a ref's `expand`, and the sheet landed on the wrong detent. `clear`
+ * writes `null` in order after whatever was queued, which is what a controlled
+ * `isOpen: false` needs to cancel an open still waiting on layout.
+ */
+export type SheetIntents = {
+	dispatch: SheetIntentDispatch;
+	clear: () => void;
+	lastKind: () => IntentRequest["kind"] | null;
+};
+
+/**
+ * Intents replace present/dismiss.
+ *
+ * The JS thread never animates. It writes a request into `state.intent`, and a
+ * reaction keyed on the request's `id` and on `layoutReady` runs
+ * `resolveIntent` on the UI thread: a close while closed is nothing, an open
+ * before the first layout stays queued until the measurements land, a
+ * `forceClose` jumps. Two identical requests in a row both run, because each
+ * carries a fresh `id`.
+ *
+ * The first open a sheet resolves is its mount: reported as `"mount"`, and a
+ * jump rather than an animation when `animateOnMount` is off. `mountPending`
+ * is the flag, and it clears on that first resolution whatever kind it was.
+ *
+ * A second reaction handles the detents moving under a settled sheet — dynamic
+ * content growing, a `snapPoints` change — by animating to the same index in
+ * the new list, and a container resize by jumping there instead. Neither runs
+ * while a gesture or an animation owns `base`.
+ */
+export function useSheetIntents(
+	state: SheetSharedState,
+	geometry: SheetGeometry,
+	animateTo: AnimateTo,
+	jumpTo: JumpTo
+): SheetIntents {
+	const nextId = useRef(0);
+	const last = useRef<IntentRequest["kind"] | null>(null);
+
+	const dispatch = useCallback<SheetIntentDispatch>(
+		(request) => {
+			nextId.current += 1;
+			last.current = request.kind;
+			state.intent.value = { ...request, id: nextId.current } as SheetIntent;
+		},
+		[state]
+	);
+
+	const clear = useCallback(() => {
+		last.current = null;
+		state.intent.value = null;
+	}, [state]);
+
+	const lastKind = useCallback(() => last.current, []);
+
+	useAnimatedReaction(
+		() => ({ id: state.intent.value?.id ?? 0, ready: geometry.layoutReady.value }),
+		(current, previous) => {
+			if (previous !== null && current.id === previous.id && current.ready === previous.ready) return;
+			const intent = state.intent.value;
+			if (intent === null) return;
+
+			// Mid-animation the sheet is where it is going, not where it settled:
+			// a close during the open animation has to see an open sheet.
+			const effectiveIndex =
+				state.animStatus.value === ANIM_STATUS.RUNNING
+					? Math.round(indexForHeight(state.animTarget.value, geometry.detents.value, geometry.closedHeight.value))
+					: state.currentIndex.value;
+			const resolution = resolveIntent(
+				{
+					currentIndex: effectiveIndex,
+					base: state.base.value,
+					layoutReady: current.ready,
+					detents: geometry.detents.value,
+					closedHeight: geometry.closedHeight.value,
+					maxHeight: geometry.maxHeight.value,
+					initialIndex: state.config.value.initialIndex,
+				},
+				intent
+			);
+
+			if (resolution === null) {
+				state.intent.value = null;
+				return;
+			}
+			if (resolution.action === "wait") return;
+			state.intent.value = null;
+
+			const mounting = state.mountPending.value && intent.kind === "open";
+			state.mountPending.value = false;
+			const source = mounting ? "mount" : "user";
+			const jump = resolution.action === "jump" || (mounting && !state.config.value.animateOnMount);
+			if (jump) jumpTo(resolution.target, source);
+			else animateTo(resolution.target, source, 0);
+		},
+		[state, geometry, animateTo, jumpTo]
+	);
+
+	useAnimatedReaction(
+		() => ({ detents: geometry.detents.value.join(","), container: state.containerHeight.value }),
+		(current, previous) => {
+			if (previous === null || (current.detents === previous.detents && current.container === previous.container)) {
+				return;
+			}
+			const busy = state.animStatus.value !== ANIM_STATUS.IDLE || state.gestureSource.value !== GESTURE_SOURCE.NONE;
+			const index = state.currentIndex.value;
+			if (busy || index < 0) return;
+
+			const detents = geometry.detents.value;
+			if (detents.length === 0) return;
+			const target = heightForIndex(Math.min(index, detents.length - 1), detents, geometry.closedHeight.value);
+			if (Math.abs(target - state.base.value) < 0.5) return;
+
+			if (current.container !== previous.container) {
+				jumpTo(target, "container");
+				return;
+			}
+			animateTo(target, "snapPoints", 0);
+		},
+		[state, geometry, animateTo, jumpTo]
+	);
+
+	return useMemo<SheetIntents>(() => ({ dispatch, clear, lastKind }), [dispatch, clear, lastKind]);
+}

package/src/state/use-sheet-state.ts

@@ -0,0 +1,157 @@
+import { useEffect, useMemo } from "react";
+import { useSharedValue } from "react-native-reanimated";
+import {
+	type AnimationSource,
+	CLOSED_INDEX,
+	type DetentSpec,
+	GESTURE_SOURCE,
+	SCROLLABLE_TYPE,
+	type ScrollableType,
+	type SheetIntent,
+	UNMEASURED,
+} from "../core";
+import { ANIM_STATUS, type AnimStatus, type SheetSharedState, type SheetWorkletConfig } from "./state.types";
+
+/**
+ * Allocates the raw shared values, once per sheet, and keeps `detentSpec` and
+ * `config` in step with the props.
+ *
+ * `detentSpec` is written when its **serialisation** changes, not its identity,
+ * so a `snapPoints={["40%", "85%"]}` literal in a render body costs nothing —
+ * the array identity churn that made the library this replaces re-derive on
+ * every render is simply not observed.
+ */
+export function useSheetState(snapPoints: readonly DetentSpec[], config: SheetWorkletConfig): SheetSharedState {
+	const containerHeight = useSharedValue(UNMEASURED);
+	const containerWidth = useSharedValue(UNMEASURED);
+	const containerBottomOffset = useSharedValue(0);
+	const handleHeight = useSharedValue(UNMEASURED);
+	const contentHeight = useSharedValue(UNMEASURED);
+	const footerContentHeight = useSharedValue(UNMEASURED);
+	const base = useSharedValue(0);
+	const currentIndex = useSharedValue(CLOSED_INDEX);
+	const animStatus = useSharedValue<AnimStatus>(ANIM_STATUS.IDLE);
+	const animSource = useSharedValue<AnimationSource>("mount");
+	const animTarget = useSharedValue(0);
+	const gestureSource = useSharedValue<(typeof GESTURE_SOURCE)[keyof typeof GESTURE_SOURCE]>(GESTURE_SOURCE.NONE);
+	const scrollOffsetY = useSharedValue(0);
+	const scrollLockedAt = useSharedValue(0);
+	const scrollableType = useSharedValue<ScrollableType>(SCROLLABLE_TYPE.NONE);
+	const keyboardOwned = useSharedValue(false);
+	const keyboardProgress = useSharedValue(0);
+	const keyboardHeight = useSharedValue(0);
+	const intent = useSharedValue<SheetIntent | null>(null);
+	const mountPending = useSharedValue(true);
+	const detentSpec = useSharedValue<readonly DetentSpec[]>(snapPoints);
+	const configValue = useSharedValue<SheetWorkletConfig>(config);
+
+	const specKey = snapPoints.join("|");
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the serialisation on purpose; the array is only read when it changes
+	useEffect(() => {
+		detentSpec.value = snapPoints;
+	}, [specKey, detentSpec]);
+
+	const {
+		dynamicSizing,
+		maxDynamicContentSize,
+		hasFooter,
+		bottomInset,
+		detached,
+		enablePanDownToClose,
+		enableOverDrag,
+		overDragResistanceFactor,
+		initialIndex,
+		animateOnMount,
+		keyboardBehavior,
+		keyboardBlurBehavior,
+		keyboardScope,
+		enableBlurKeyboardOnGesture,
+	} = config;
+	const detachedKey = detached === null ? "" : `${detached.horizontalMargin}/${detached.bottomOffset}`;
+	// biome-ignore lint/correctness/useExhaustiveDependencies: `detached` is keyed by its two numbers, not its identity
+	useEffect(() => {
+		configValue.value = {
+			dynamicSizing,
+			maxDynamicContentSize,
+			hasFooter,
+			bottomInset,
+			detached,
+			enablePanDownToClose,
+			enableOverDrag,
+			overDragResistanceFactor,
+			initialIndex,
+			animateOnMount,
+			keyboardBehavior,
+			keyboardBlurBehavior,
+			keyboardScope,
+			enableBlurKeyboardOnGesture,
+		};
+	}, [
+		configValue,
+		dynamicSizing,
+		maxDynamicContentSize,
+		hasFooter,
+		bottomInset,
+		detachedKey,
+		enablePanDownToClose,
+		enableOverDrag,
+		overDragResistanceFactor,
+		initialIndex,
+		animateOnMount,
+		keyboardBehavior,
+		keyboardBlurBehavior,
+		keyboardScope,
+		enableBlurKeyboardOnGesture,
+	]);
+
+	return useMemo<SheetSharedState>(
+		() => ({
+			containerHeight,
+			containerWidth,
+			containerBottomOffset,
+			handleHeight,
+			contentHeight,
+			footerContentHeight,
+			base,
+			currentIndex,
+			animStatus,
+			animSource,
+			animTarget,
+			gestureSource,
+			scrollOffsetY,
+			scrollLockedAt,
+			scrollableType,
+			keyboardOwned,
+			keyboardProgress,
+			keyboardHeight,
+			intent,
+			mountPending,
+			detentSpec,
+			config: configValue,
+		}),
+		[
+			containerHeight,
+			containerWidth,
+			containerBottomOffset,
+			handleHeight,
+			contentHeight,
+			footerContentHeight,
+			base,
+			currentIndex,
+			animStatus,
+			animSource,
+			animTarget,
+			gestureSource,
+			scrollOffsetY,
+			scrollLockedAt,
+			scrollableType,
+			keyboardOwned,
+			keyboardProgress,
+			keyboardHeight,
+			intent,
+			mountPending,
+			detentSpec,
+			configValue,
+		]
+	);
+}