@delacour/react-native-ui 0.5.0-alpha.20261024151637 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261024151637",
+	"version": "0.5.0",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -182,8 +182,8 @@
 		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261024151637",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261024151637",
+		"@delacour/react-native-bottom-sheet": ">=0.3.0",
+		"@delacour/react-native-charts": ">=0.2.0",
 		"@legendapp/list": ">=3.3",
 		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",

package/src/components/carousel/carousel-caption.tsx

@@ -30,7 +30,7 @@ export function CarouselCaption({ className, ...props }: CarouselCaptionProps):
 	const animatedStyle = useAnimatedStyle(() => {
 		const offset = loop ? resolveWrappedOffset(index, position.value, count) : index - position.value;
 		return { opacity: resolveCaptionOpacity(offset) };
-	}, [count, index, loop]);
+	});
 
 	const slots = carouselVariants({ orientation, variant });
 

package/src/components/carousel/carousel-dots.tsx

@@ -104,12 +104,12 @@ function CarouselDot({
 		const offset = loop ? resolveWrappedOffset(index, position.value, count) : index - position.value;
 		const length = resolveDotLength(offset);
 		return isHorizontal ? { width: length } : { height: length };
-	}, [count, index, isHorizontal, loop]);
+	});
 
 	const fillStyle = useAnimatedStyle(() => {
 		const offset = loop ? resolveWrappedOffset(index, position.value, count) : index - position.value;
 		return { opacity: resolveCaptionOpacity(offset) };
-	}, [count, index, loop]);
+	});
 
 	return (
 		<Animated.View className={className} style={dotStyle}>

package/src/components/carousel/carousel-item.tsx

@@ -86,7 +86,7 @@ export function CarouselItem({
 					],
 			zIndex: Math.round(100 - distance * 10),
 		};
-	}, [count, index, isCalm, isCoverflow, isHorizontal, lengthKey, loop, turnSign, windowSize]);
+	});
 
 	const accessibility = resolveSlideAccessibility({ isActive, isPeek });
 	const itemClassName = carouselVariants({ orientation, variant }).item();

package/src/components/circular-text/circular-text-spin.ts

@@ -61,8 +61,7 @@ export function useCircularSpin({
 		() => isPaused || isPressed.value,
 		(paused) => {
 			velocity.value = withTiming(paused ? 0 : target, { duration: CIRCULAR_TEXT_EASE_MS });
-		},
-		[isPaused, target]
+		}
 	);
 
 	return rotation;

package/src/components/compare/compare.tsx

@@ -341,8 +341,7 @@ function CompareRoot({
 		(next, previous) => {
 			if (next < 0 || next === previous) return;
 			scheduleOnRN(commitLive, next);
-		},
-		[commitLive]
+		}
 	);
 
 	useUnnamedWarning(accessibilityLabel);

package/src/components/dialog/dialog-content.tsx

@@ -123,7 +123,7 @@ export function DialogContent({
 				{ scale: interpolate(progress.value, [0, 1], [DIALOG_ENTER_SCALE, 1]) },
 			],
 		};
-	}, [isReduced, topInset, windowHeight]);
+	});
 
 	if (!isPresent) return null;
 

package/src/components/drawer/drawer-content.tsx

@@ -126,8 +126,7 @@ export function DrawerContent({
 		() => progress.value * (1 - resolveDrawerDragFraction(edge, drag.value, extent)),
 		(visibility) => {
 			scrimProgress.value = visibility;
-		},
-		[edge, extent]
+		}
 	);
 
 	const panelStyle = useAnimatedStyle(() => {
@@ -139,7 +138,7 @@ export function DrawerContent({
 				{ translateY: slide.translateY + (isHorizontal ? 0 : drag.value) },
 			],
 		};
-	}, [edge, extent, isHorizontal, isReduced]);
+	});
 
 	const panel = useMemo<DrawerPanelValue>(() => ({ edge, side }), [edge, side]);
 

package/src/components/flip-card/flip-card.tsx

@@ -265,8 +265,7 @@ function FlipCardRoot(props: FlipCardProps): ReactElement {
 			if (!shouldTickFlipHaptic(hapticSide.value, next)) return;
 			hapticSide.value = next >= 90 ? 180 : 0;
 			if (haptic) playHaptic(haptic);
-		},
-		[haptic]
+		}
 	);
 
 	const isY = axis === "y";

package/src/components/image-viewer/image-viewer-chrome.tsx

@@ -50,7 +50,7 @@ export function ImageViewerChrome({
 		return {
 			opacity: fade.value * flight * chrome.value * zoomFade * resolveBackdropOpacity(dismissY.value, windowHeight),
 		};
-	}, [windowHeight]);
+	});
 
 	const pointerEvents = isVisible ? "box-none" : "none";
 

package/src/components/image-viewer/image-viewer-layer.tsx

@@ -493,15 +493,12 @@ export function ImageViewerLayer({
 		windowWidth,
 	]);
 
-	const backdropStyle = useAnimatedStyle(
-		() => ({
-			opacity:
-				fade.value *
-				(progress.value < 0 ? 0 : progress.value > 1 ? 1 : progress.value) *
-				resolveBackdropOpacity(dismissY.value, windowHeight),
-		}),
-		[windowHeight]
-	);
+	const backdropStyle = useAnimatedStyle(() => ({
+		opacity:
+			fade.value *
+			(progress.value < 0 ? 0 : progress.value > 1 ? 1 : progress.value) *
+			resolveBackdropOpacity(dismissY.value, windowHeight),
+	}));
 
 	const stageStyle = useAnimatedStyle(() => ({ opacity: fade.value }));
 

package/src/components/image-viewer/image-viewer-page.tsx

@@ -90,10 +90,7 @@ export function ImageViewerPage({
 
 	const { height: fittedHeight, width: fittedWidth, x: fittedX, y: fittedY } = fitted;
 
-	const pageStyle = useAnimatedStyle(
-		() => ({ transform: [{ translateX: (pageIndex - position.value) * pitch }] }),
-		[pageIndex, pitch]
-	);
+	const pageStyle = useAnimatedStyle(() => ({ transform: [{ translateX: (pageIndex - position.value) * pitch }] }));
 
 	const frameStyle = useAnimatedStyle(() => {
 		const rest = { height: fittedHeight, width: fittedWidth, x: fittedX, y: fittedY };
@@ -114,7 +111,7 @@ export function ImageViewerPage({
 			],
 			width: frame.width,
 		};
-	}, [fittedHeight, fittedWidth, fittedX, fittedY, isActive, windowHeight]);
+	});
 
 	const fullStyle = useAnimatedStyle(() => ({ opacity: fullOpacity.value }));
 

package/src/components/input/AGENTS.md

@@ -97,6 +97,12 @@ Root plus `Input.Group` and its parts: `Prefix`, `Suffix`, `Button`,
   [`Text.Label`](../text/AGENTS.md) and `Text.Caption` already are those, and a label defined twice is
   a type scale that can drift. `apps/playground`'s `/input/form` is what the
   trade looks like at a call site.
+- **A `Field.Label` names the field.** `resolveInputAccessibilityLabel` takes an
+  explicit `accessibilityLabel` first and the enclosing [`Field`](../field/AGENTS.md)'s
+  `field.label` second, so the documented `<Field><Field.Label>Email</Field.Label><Input /></Field>`
+  announces "Email" under VoiceOver rather than an unnamed text field. The
+  same fallback [`OtpInput`](../otp-input/AGENTS.md) makes; `Textarea` renders
+  an `Input`, so it gets it too. With neither it stays `undefined`, not `""`.
 - **`--spacing-input-*` is its own scale**, matching `--spacing-button-*` in
   value and not in name — this is the case [Sizing](../../../AGENTS.md#sizing)
   anticipated. A token test asserts the two stay level, so either can be retuned

package/src/components/input/index.ts

@@ -28,6 +28,7 @@ export {
 	resolveGroupButtonClass,
 	resolveGroupButtonSize,
 	resolveGroupSegments,
+	resolveInputAccessibilityLabel,
 	resolveInputFieldClass,
 	resolveInputGroupClass,
 	resolveInputGroupRowClass,

package/src/components/input/input.tsx

@@ -8,6 +8,7 @@ import { useInputGroupContext } from "./input.context";
 import {
 	type InputSize,
 	type InputVariant,
+	resolveInputAccessibilityLabel,
 	resolveInputFieldClass,
 	resolvePlaceholderAccentClass,
 	resolveSelectionAccentClass,
@@ -60,6 +61,7 @@ function InputRoot({
 	className,
 	placeholderColorClassName,
 	selectionColorClassName,
+	accessibilityLabel,
 	editable,
 	multiline,
 	onBlur,
@@ -148,6 +150,7 @@ function InputRoot({
 			selectionColorClassName={selectionAccent}
 			textAlignVertical={multiline ? "top" : undefined}
 			{...props}
+			accessibilityLabel={resolveInputAccessibilityLabel(accessibilityLabel, field?.label)}
 			editable={resolved.isDisabled ? false : editable}
 			onBlur={handleBlur}
 			onFocus={handleFocus}
@@ -179,6 +182,10 @@ function InputRoot({
  * Wrap it in an `Input.Group` to put an icon, an affix or a control inside the
  * field's own box.
  *
+ * Inside a `Field`, the text of its `Field.Label` becomes the field's accessible
+ * name when no `accessibilityLabel` is given, so a screen reader announces
+ * which value the editor wants.
+ *
  * @example
  * <Input onChangeText={setEmail} placeholder="Email" value={email} />
  *

package/src/components/input/input.variants.test.ts

@@ -19,6 +19,7 @@ import {
 	resolveGroupButtonClass,
 	resolveGroupButtonSize,
 	resolveGroupSegments,
+	resolveInputAccessibilityLabel,
 	resolveInputFieldClass,
 	resolveInputGroupClass,
 	resolveInputGroupRowClass,
@@ -658,3 +659,22 @@ describe("resolveGroupSegments", () => {
 		expect(resolveGroupSegments([])).toEqual([]);
 	});
 });
+
+describe("resolveInputAccessibilityLabel", () => {
+	test("an explicit label wins over the enclosing Field.Label", () => {
+		expect(resolveInputAccessibilityLabel("Work email", "Email")).toBe("Work email");
+	});
+
+	test("falls back to the enclosing Field.Label's text", () => {
+		expect(resolveInputAccessibilityLabel(undefined, "Email")).toBe("Email");
+	});
+
+	test("names nothing outside a Field, or under a label with no text", () => {
+		expect(resolveInputAccessibilityLabel(undefined, null)).toBeUndefined();
+		expect(resolveInputAccessibilityLabel(undefined, undefined)).toBeUndefined();
+	});
+
+	test("an explicit label still wins when no Field is enclosing", () => {
+		expect(resolveInputAccessibilityLabel("Search", null)).toBe("Search");
+	});
+});

package/src/components/input/input.variants.ts

@@ -511,4 +511,23 @@ export function resolveSelectionAccentClass({
 	return cn(isInvalid ? INPUT_INVALID_SELECTION_ACCENT_CLASS : INPUT_SELECTION_ACCENT_CLASS, className);
 }
 
+/**
+ * The accessible name a screen reader announces when the field takes focus.
+ *
+ * The caller's `accessibilityLabel` wins; otherwise the text an enclosing
+ * `Field.Label` registered with the field's context, so
+ * `<Field><Field.Label>Email</Field.Label><Input /></Field>` reads "Email"
+ * rather than an unnamed text field. React Native has no `<label for>`; this is
+ * that association, the same way `OtpInput` makes it. With neither there is no
+ * name, and `undefined` leaves the native default rather than an empty string.
+ *
+ * Pure, so it is unit-testable. See AGENTS.md.
+ */
+export function resolveInputAccessibilityLabel(
+	own: string | undefined,
+	fieldLabel: string | null | undefined
+): string | undefined {
+	return own ?? fieldLabel ?? undefined;
+}
+
 export type InputVariantProps = VariantProps<typeof inputVariants>;

package/src/components/marquee/marquee-track.tsx

@@ -87,8 +87,7 @@ export function MarqueeTrack({
 				easeMs > 0
 					? withTiming(next, { duration: easeMs, easing: Easing.out(Easing.quad), reduceMotion: ReduceMotion.Never })
 					: next;
-		},
-		[pause, target, easeMs]
+		}
 	);
 
 	useFrameCallback((frame) => {

package/src/components/message-scroller/use-message-scroller-state.ts

@@ -99,8 +99,7 @@ export function useMessageScrollerState({
 				isAtEndValue.value = atEnd;
 				scheduleOnRN(setIsAtEnd, atEnd);
 			}
-		},
-		[stickThreshold]
+		}
 	);
 
 	useEffect(() => {

package/src/components/page-header/page-header-cover.tsx

@@ -123,7 +123,7 @@ export function PageHeaderCover({
 			height: resolvePageHeaderCoverHeight({ variant, height, topInset: inset, isInsetAware }),
 			marginTop: resolvePageHeaderCoverOffset({ variant, isInsetAware, isInScreen, topInset: inset }),
 		};
-	}, [navbar, top, variant, height, isInsetAware, isInScreen]);
+	});
 
 	const overlayStyle = useAnimatedStyle(() => {
 		const inset = navbar
@@ -136,7 +136,7 @@ export function PageHeaderCover({
 		return {
 			top: resolvePageHeaderCoverHeight({ variant, height, topInset: inset, isInsetAware }) - Math.max(0, height),
 		};
-	}, [navbar, top, variant, height, isInsetAware]);
+	});
 
 	const isDescribed = accessibilityLabel !== undefined;
 

package/src/components/screen/screen-footer-background.tsx

@@ -35,17 +35,14 @@ export const ScreenFooterBackground = memo(function ScreenFooterBackground({
 	const debug = useScreenDebug();
 	const slots = screenVariants({ placement });
 
-	const borderStyle = useAnimatedStyle(
-		() => ({
-			opacity: resolveFooterBorderOpacity({
-				contentHeight: contentHeight.value,
-				fadeOnScroll,
-				layoutHeight: layoutHeight.value,
-				scrollY: scrollY.value,
-			}),
+	const borderStyle = useAnimatedStyle(() => ({
+		opacity: resolveFooterBorderOpacity({
+			contentHeight: contentHeight.value,
+			fadeOnScroll,
+			layoutHeight: layoutHeight.value,
+			scrollY: scrollY.value,
 		}),
-		[fadeOnScroll]
-	);
+	}));
 
 	return (
 		<View

package/src/components/screen/screen-navbar-background.tsx

@@ -31,10 +31,7 @@ export const ScreenNavbarBackground = memo(function ScreenNavbarBackground({
 }: ScreenNavbarBackgroundProps): ReactElement {
 	const { scrollY } = useScreenPart("Screen.Navbar");
 
-	const borderStyle = useAnimatedStyle(
-		() => ({ opacity: resolveNavbarBorderOpacity(scrollY.value, fadeOnScroll) }),
-		[fadeOnScroll]
-	);
+	const borderStyle = useAnimatedStyle(() => ({ opacity: resolveNavbarBorderOpacity(scrollY.value, fadeOnScroll) }));
 
 	return (
 		<View className={screenVariants().navbarBackground({ className })} pointerEvents="none">

package/src/components/screen/screen-view.tsx

@@ -46,7 +46,7 @@ export function ScreenView({ className, style, children, ...props }: ScreenViewP
 			safeAreaBottom: bottom,
 			safeAreaTop: top,
 		});
-	}, [top, bottom]);
+	});
 
 	return (
 		<Animated.View className="flex-1" style={animatedStyle}>

package/src/components/screen/use-screen-scroll-insets.ts

@@ -43,8 +43,7 @@ function useFooterBaselineHeight(estimatedHeight = 0): number {
 		(current, previous) => {
 			if (current <= 0 || current === previous) return;
 			scheduleOnRN(setMeasured, current);
-		},
-		[]
+		}
 	);
 
 	return measured;
@@ -83,8 +82,7 @@ export function useChatComposerInset(): DerivedValue<number> {
 	const { bottom } = useSafeAreaInsets();
 
 	return useDerivedValue(
-		() => footerOccupancy(footer.height.value, bottom) + footer.overlayHeight.value + CHAT_COMPOSER_GAP,
-		[bottom]
+		() => footerOccupancy(footer.height.value, bottom) + footer.overlayHeight.value + CHAT_COMPOSER_GAP
 	);
 }
 
@@ -98,8 +96,7 @@ export function useChatComposerGrowthPadding(): DerivedValue<number> {
 	const { footer } = useScreenPart("useChatComposerGrowthPadding");
 
 	return useDerivedValue(
-		() => Math.max(0, footer.height.value - footer.initialHeight.value) + footer.overlayHeight.value,
-		[]
+		() => Math.max(0, footer.height.value - footer.initialHeight.value) + footer.overlayHeight.value
 	);
 }
 
@@ -177,29 +174,26 @@ export function useScreenScrollInsets(mode: ScreenScrollInsetMode, onScroll?: Sc
 	const caller = classifyScrollHandler(onScroll);
 	const callerCallback = caller.kind === "js" ? caller.handler : undefined;
 
-	const trackingHandler = useAnimatedScrollHandler(
-		{
-			onScroll: (event) => {
-				scrollY.value = event.contentOffset.y;
-
-				if (event.contentSize.height !== contentHeight.value) {
-					contentHeight.value = event.contentSize.height;
-				}
-
-				if (event.layoutMeasurement.height !== layoutHeight.value) {
-					layoutHeight.value = event.layoutMeasurement.height;
-				}
-
-				// Only `nativeEvent` is real: a worklet sees the native payload, not
-				// React Native's synthetic wrapper, so `persist()` and the rest of the
-				// wrapper do not exist. A caller needing more passes a worklet handler.
-				if (callerCallback) {
-					scheduleOnRN(callerCallback, { nativeEvent: event } as unknown as NativeSyntheticEvent<NativeScrollEvent>);
-				}
-			},
+	const trackingHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			scrollY.value = event.contentOffset.y;
+
+			if (event.contentSize.height !== contentHeight.value) {
+				contentHeight.value = event.contentSize.height;
+			}
+
+			if (event.layoutMeasurement.height !== layoutHeight.value) {
+				layoutHeight.value = event.layoutMeasurement.height;
+			}
+
+			// Only `nativeEvent` is real: a worklet sees the native payload, not
+			// React Native's synthetic wrapper, so `persist()` and the rest of the
+			// wrapper do not exist. A caller needing more passes a worklet handler.
+			if (callerCallback) {
+				scheduleOnRN(callerCallback, { nativeEvent: event } as unknown as NativeSyntheticEvent<NativeScrollEvent>);
+			}
 		},
-		[callerCallback]
-	);
+	});
 
 	// A caller's `useAnimatedScrollHandler` runs beside the tracking on the UI
 	// thread rather than replacing it — one `onScroll` prop, two worklets.
@@ -216,7 +210,7 @@ export function useScreenScrollInsets(mode: ScreenScrollInsetMode, onScroll?: Sc
 				safeAreaTop: top,
 			}),
 		};
-	}, [top]);
+	});
 
 	const insetBottomAnimatedStyle = useAnimatedStyle(() => {
 		return {
@@ -229,7 +223,7 @@ export function useScreenScrollInsets(mode: ScreenScrollInsetMode, onScroll?: Sc
 				safeAreaBottom: bottom,
 			}),
 		};
-	}, [mode, bottom]);
+	});
 
 	return { insetBottomAnimatedStyle, insetTopAnimatedStyle, scrollHandler };
 }

package/src/components/scroll-canvas/use-frame-progress.ts

@@ -106,8 +106,7 @@ export function useFrameProgress(options: UseFrameProgressOptions): FrameProgres
 		() => (contentSize ? contentSize.value : 0),
 		(next, previous) => {
 			if (scroller && previous !== null && next !== previous) scheduleOnRN(measure);
-		},
-		[contentSize, scroller, measure]
+		}
 	);
 
 	const resting = resolveStaticProgress(effect);

package/src/components/scroll-fade/AGENTS.md

@@ -13,8 +13,8 @@ none of them; it reads them:
 | Module | What ScrollFade takes from it |
 | --- | --- |
 | `src/hooks/use-scroll-source.tsx` | `useResolvedScrollSource` and the `ScrollSource` type |
-| `src/lib/scroll-maths.ts` | `scrollEdgeOpacity`, the per-edge opacity worklet |
-| `src/lib/scroll-edges.ts` | `SCROLL_EDGES`, `resolveFadeEdges`, `resolveFadeBand`, `resolveFadeGradient` |
+| `src/lib/scroll-maths.ts` | `scrollEdgeOpacity`, the per-edge opacity worklet, and its `coveredEnd` |
+| `src/lib/scroll-edges.ts` | `SCROLL_EDGES`, `resolveFadeEdges`, `resolveFadeBand`, `resolveFadeGradient`, `resolveKeyboardLift` |
 
 Their rules and tests live with them. Nothing here keeps a copy.
 
@@ -24,7 +24,7 @@ Their rules and tests live with them. Nothing here keeps a copy.
 | --- | --- |
 | `index.ts` | → `@delacour/react-native-ui/scroll-fade` |
 | `scroll-fade.tsx` | `ScrollFade` — resolves the source and the colour, mounts the edges |
-| `scroll-fade-edge.tsx` | One animated edge band — internal, memoised |
+| `scroll-fade-edge.tsx` | One animated edge band, and its keyboard-aware wrapper — internal, memoised |
 | `scroll-fade.variants.ts` | Pure `tv()` slots, the defaults, and `SCROLL_FADE_EDGES` — `lib/scroll-edges`' union under ScrollFade's name |
 | `scroll-fade.variants.test.ts` | |
 
@@ -76,6 +76,20 @@ Their rules and tests live with them. Nothing here keeps a copy.
 - **`insetStart` / `insetEnd` hold a band in from its edge** — under a bar this
   component cannot see. It is not `Screen.ScrollShadow`'s `coverTop`: there is no
   solid band here.
+- **`keyboardAware` lifts the end band above an open keyboard.** A keyboard
+  covers a scrollable without resizing it, so a band pinned to the bottom of its
+  box sits under the keyboard. It is not only hidden there:
+  `KeyboardAwareScrollView` makes room with a content inset (its default
+  `insets` mode), and a scroll event leaves an inset out of `contentSize`, so a
+  form that fits the whole frame reads as too short to scroll and the end clears
+  for good. The lift is the keyboard less the bottom safe-area inset —
+  `resolveKeyboardLift`, the same distance a sticky `Screen.Footer` moves — and
+  one animated style spends it twice: as the band's `translateY`, and as
+  `coveredEnd`, so the opacity measures against the frame still visible. Off by
+  default; only a vertical end band moves. Only a keyboard-aware end edge
+  (`ScrollFadeKeyboardEdge`) calls keyboard-controller's hook, so a fade outside
+  a `KeyboardProvider` — a card row, a sheet — keeps working without its
+  warning.
 - **`enabled={false}` draws nothing without unmounting**, so the scrollable keeps
   its position and state when a fade is toggled.
 

package/src/components/scroll-fade/scroll-fade-edge.tsx

@@ -1,9 +1,11 @@
 import { LinearGradient } from "expo-linear-gradient";
 import { memo, type ReactElement } from "react";
 import { StyleSheet } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import Animated, { type SharedValue, useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { ScrollSource } from "../../hooks/use-scroll-source";
-import { resolveFadeBand, resolveFadeGradient } from "../../lib/scroll-edges";
+import { resolveFadeBand, resolveFadeGradient, resolveKeyboardLift } from "../../lib/scroll-edges";
 import { type ScrollEdge, scrollEdgeOpacity } from "../../lib/scroll-maths";
 import { scrollFadeVariants } from "./scroll-fade.variants";
 
@@ -19,6 +21,8 @@ export type ScrollFadeEdgeProps = {
 	color: string;
 	/** The same colour at zero alpha, for the far stop — never the `transparent` keyword. */
 	faded: string;
+	/** Points the band rises by, and the frame's end it treats as covered. See `resolveKeyboardLift`. */
+	lift?: SharedValue<number>;
 };
 
 /**
@@ -39,21 +43,25 @@ export const ScrollFadeEdge = memo(function ScrollFadeEdge({
 	fadeInDistance,
 	color,
 	faded,
+	lift,
 }: ScrollFadeEdgeProps): ReactElement {
 	const { offset, contentSize, layoutSize, orientation } = source;
 
-	const opacityStyle = useAnimatedStyle(
-		() => ({
+	// One value spent twice, so the band's position and its opacity cannot disagree.
+	const opacityStyle = useAnimatedStyle(() => {
+		const covered = lift === undefined ? 0 : lift.value;
+		return {
 			opacity: scrollEdgeOpacity({
 				edge,
 				offset: offset.value,
 				contentSize: contentSize.value,
 				layoutSize: layoutSize.value,
 				fadeInDistance,
+				coveredEnd: covered,
 			}),
-		}),
-		[edge, fadeInDistance]
-	);
+			transform: [{ translateY: -covered }],
+		};
+	});
 
 	const band = resolveFadeBand({ orientation, edge, size, inset });
 	const { start, end } = resolveFadeGradient({ orientation, edge });
@@ -71,3 +79,25 @@ export const ScrollFadeEdge = memo(function ScrollFadeEdge({
 	);
 });
 ScrollFadeEdge.displayName = "DelacourUI.ScrollFade.Edge";
+
+/**
+ * An edge band that rises above an open keyboard.
+ *
+ * A separate component so the keyboard is read only where it is wanted. A plain
+ * edge never touches keyboard-controller, so a fade outside a
+ * `KeyboardProvider` — a card row, a sheet — keeps working without its warning.
+ */
+export const ScrollFadeKeyboardEdge = memo(function ScrollFadeKeyboardEdge(
+	props: Omit<ScrollFadeEdgeProps, "lift">
+): ReactElement {
+	const { edge, source } = props;
+	const { orientation } = source;
+	const keyboard = useReanimatedKeyboardAnimation();
+	const { bottom: safeAreaBottom } = useSafeAreaInsets();
+	const lift = useDerivedValue(() =>
+		resolveKeyboardLift({ orientation, edge, keyboardHeight: keyboard.height.value, safeAreaBottom })
+	);
+
+	return <ScrollFadeEdge {...props} lift={lift} />;
+});
+ScrollFadeKeyboardEdge.displayName = "DelacourUI.ScrollFade.KeyboardEdge";

package/src/components/scroll-fade/scroll-fade.tsx

@@ -10,7 +10,7 @@ import {
 	type ScrollFadeEdges,
 	scrollFadeVariants,
 } from "./scroll-fade.variants";
-import { ScrollFadeEdge } from "./scroll-fade-edge";
+import { ScrollFadeEdge, ScrollFadeKeyboardEdge } from "./scroll-fade-edge";
 
 export type ScrollFadeProps = Omit<ViewProps, "pointerEvents"> & {
 	/** The scrollable (and anything else) the fade overlays. Fades paint after it, so they sit on top. */
@@ -33,6 +33,14 @@ export type ScrollFadeProps = Omit<ViewProps, "pointerEvents"> & {
 	insetEnd?: number;
 	/** Explicit source; otherwise the nearest `ScrollSourceProvider` / the enclosing `Screen`. */
 	scrollSource?: ScrollSource;
+	/**
+	 * Lift the end fade above an open keyboard. A keyboard covers the
+	 * scrollable without resizing it, so without this the end fade sits under
+	 * the keyboard. Turn it on over a keyboard-aware scrollable with a sticky
+	 * `Screen.Footer`; the fade rises by the same distance the footer does.
+	 * @default false
+	 */
+	keyboardAware?: boolean;
 	/** Draw nothing without unmounting. @default true */
 	enabled?: boolean;
 	className?: string;
@@ -83,6 +91,7 @@ export function ScrollFade({
 	insetStart = 0,
 	insetEnd = 0,
 	scrollSource,
+	keyboardAware = false,
 	enabled = true,
 	className,
 	...props
@@ -95,6 +104,8 @@ export function ScrollFade({
 	// Without a colour to fade from there is no honest gradient, and the keyword
 	// `transparent` is no substitute — so the content renders alone.
 	const canDraw = paint !== undefined && faded !== undefined;
+	// Only a keyboard-aware end reads the keyboard; see `ScrollFadeKeyboardEdge`.
+	const EndEdge = keyboardAware ? ScrollFadeKeyboardEdge : ScrollFadeEdge;
 
 	return (
 		<View className={scrollFadeVariants().root({ className })} {...props}>
@@ -111,7 +122,7 @@ export function ScrollFade({
 				/>
 			) : null}
 			{canDraw && draw.end ? (
-				<ScrollFadeEdge
+				<EndEdge
 					color={paint}
 					edge="end"
 					fadeInDistance={fadeInDistance}

package/src/components/scroll-header/scroll-header-root.tsx

@@ -91,8 +91,7 @@ export function ScrollHeaderRoot({
 			if (target === null) return;
 			scrollTo(scrollRef, 0, target, !isCalm);
 			snapTarget.value = null;
-		},
-		[isCalm, scrollRef]
+		}
 	);
 
 	const handleCollapsedChange = useCallback(
@@ -111,16 +110,14 @@ export function ScrollHeaderRoot({
 			if (next === previous) return;
 			if (previous === null && !next) return;
 			scheduleOnRN(handleCollapsedChange, next);
-		},
-		[handleCollapsedChange]
+		}
 	);
 
 	useAnimatedReaction(
 		() => progress.value,
 		(value) => {
 			if (progressOutput) progressOutput.value = value;
-		},
-		[progressOutput]
+		}
 	);
 
 	const registerLarge = useCallback(() => {

package/src/components/scroll-header/use-scroll-header-scroll-props.ts

@@ -42,14 +42,11 @@ export function useScrollHeaderScrollProps(
 	const forward = callerFunction ?? noop;
 	const hasFunction = callerFunction !== null;
 
-	const forwarder = useAnimatedScrollHandler(
-		{
-			onScroll: (event) => {
-				if (hasFunction) scheduleOnRN(forward, event as NativeScrollEvent);
-			},
+	const forwarder = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			if (hasFunction) scheduleOnRN(forward, event as NativeScrollEvent);
 		},
-		[hasFunction, forward]
-	);
+	});
 
 	const composed = useComposedEventHandler([scrollProps.onScroll, callerHandler, hasFunction ? forwarder : null]);
 

package/src/components/scroll-text/scroll-text-source.ts

@@ -93,8 +93,7 @@ export function useScrollTextProgress({
 		},
 		(next) => {
 			if (next >= 0) own.value = next;
-		},
-		[isLive, start, end, windowHeight, viewport]
+		}
 	);
 
 	const remeasure = (): void => {

package/src/components/section-progress/section-progress.tsx

@@ -169,8 +169,7 @@ function SectionProgressRoot(props: SectionProgressProps): ReactElement {
 			} else {
 				ringProgress.value = withTiming(next, RING_SETTLE);
 			}
-		},
-		[source]
+		}
 	);
 
 	const scrollY = scroll?.scrollY;
@@ -179,8 +178,7 @@ function SectionProgressRoot(props: SectionProgressProps): ReactElement {
 		() => (scrollY === undefined ? true : resolveRevealed(scrollY.value, revealAt, false)),
 		(now, was) => {
 			if (now && was !== true) scheduleOnRN(setRevealed, true);
-		},
-		[scrollY, revealAt]
+		}
 	);
 
 	// The percent only crosses to React while a screen reader is listening; with
@@ -196,8 +194,7 @@ function SectionProgressRoot(props: SectionProgressProps): ReactElement {
 		() => (isScreenReaderOn ? resolveProgressPercent(source.value) : -1),
 		(next, previous) => {
 			if (next >= 0 && next !== previous) scheduleOnRN(setPercent, next);
-		},
-		[isScreenReaderOn, source]
+		}
 	);
 
 	const lastValue = useRef(value);

package/src/components/slider/slider-track.tsx

@@ -214,8 +214,7 @@ export function SliderTrack({ children, className, ...props }: SliderTrackProps)
 				if (!changed) return;
 			}
 			scheduleOnRN(commitValues, [...current]);
-		},
-		[commitValues]
+		}
 	);
 
 	const slots = sliderVariants({ color, isDisabled, isInvalid, orientation, size });

package/src/components/sortable/sortable-item.tsx

@@ -77,8 +77,7 @@ export function SortableItem({
 		() => activeId.value === id,
 		(next, previous) => {
 			if (previous !== null && next !== previous) scheduleOnRN(setLifted, next);
-		},
-		[id]
+		}
 	);
 
 	const shift = useSharedValue(0);
@@ -88,8 +87,7 @@ export function SortableItem({
 			if (next === previous) return;
 			if (phase.value === 0 || isReducedMotion) shift.value = next;
 			else shift.value = withSpring(next, SORTABLE_SHIFT_SPRING);
-		},
-		[id, isReducedMotion]
+		}
 	);
 
 	const animatedStyle = useAnimatedStyle(() => {

package/src/components/tabs/tabs-scroll-view.tsx

@@ -144,8 +144,7 @@ export function TabsScrollView({
 				// on top of it would be two easing curves fighting for the same pixels.
 				false
 			);
-		},
-		[scrollAlign]
+		}
 	);
 
 	const slots = tabsVariants({ isScrollable: true, size, variant });

package/src/components/tabs/tabs-separator.tsx

@@ -54,10 +54,7 @@ export function TabsSeparator({
 		);
 	}
 
-	const fadeStyle = useAnimatedStyle(
-		() => ({ opacity: resolveSeparatorOpacity(position.value, left, right) }),
-		[left, right]
-	);
+	const fadeStyle = useAnimatedStyle(() => ({ opacity: resolveSeparatorOpacity(position.value, left, right) }));
 
 	const slots = tabsVariants({ size, variant });
 

package/src/components/tabs/tabs.tsx

@@ -274,8 +274,7 @@ function TabsRoot({
 			if (current === previous) return;
 			visual.value = current;
 			scheduleOnRN(setVisualIndex, current);
-		},
-		[count]
+		}
 	);
 
 	const context = useMemo<TabsContextValue>(

package/src/components/text-animation/text-animation-typing.tsx

@@ -216,8 +216,7 @@ export function TextAnimationTyping({
 			if (previous !== null && previous.phase === "typing" && current.phase !== "typing") {
 				scheduleOnRN(handleTyped, previous.phraseIndex, runKey);
 			}
-		},
-		[runKey, handlePhrase, handleTyped]
+		}
 	);
 
 	useEffect(() => {

package/src/components/timeline/timeline-title.tsx

@@ -72,8 +72,7 @@ function ReadingEdgeTitle({
 			const isFirstRun = previous === null;
 			progress.value =
 				isFirstRun || isReducedMotion ? target : withTiming(target, { duration: TIMELINE_READING_EDGE_MS });
-		},
-		[step, isReducedMotion]
+		}
 	);
 
 	const colorStyle = useAnimatedStyle(() => ({

package/src/components/timeline/use-timeline-reading-edge.ts

@@ -37,18 +37,15 @@ export function useTimelineReadingEdge({
 		[onColumnChange]
 	);
 
-	const scrollHandler = useAnimatedScrollHandler(
-		{
-			onScroll: (event) => {
-				const next = resolveColumnAtOffset(offsets, event.contentOffset.x);
-				if (next === activeColumn.value) return;
-				activeColumn.value = next;
-				if (haptic) playHaptic("selection");
-				if (hasListener) scheduleOnRN(notify, next);
-			},
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			const next = resolveColumnAtOffset(offsets, event.contentOffset.x);
+			if (next === activeColumn.value) return;
+			activeColumn.value = next;
+			if (haptic) playHaptic("selection");
+			if (hasListener) scheduleOnRN(notify, next);
 		},
-		[offsets, haptic, hasListener, notify]
-	);
+	});
 
 	return { activeColumn, scrollHandler };
 }

package/src/hooks/use-scroll-source.tsx

@@ -80,33 +80,30 @@ export function useScrollSource(options: UseScrollSourceOptions = {}): UseScroll
 	const contentSize = useSharedValue(0);
 	const layoutSize = useSharedValue(0);
 
-	const onScroll = useAnimatedScrollHandler(
-		{
-			onScroll: (event) => {
-				const reading = readScrollEvent(event, orientation);
-				offset.value = reading.offset;
-				if (reading.contentSize !== contentSize.value) contentSize.value = reading.contentSize;
-				if (reading.layoutSize !== layoutSize.value) layoutSize.value = reading.layoutSize;
-			},
-			onBeginDrag: (event) => {
-				offset.value = readScrollEvent(event, orientation).offset;
-				onBeginDrag?.(event);
-			},
-			onEndDrag: (event) => {
-				offset.value = readScrollEvent(event, orientation).offset;
-				onEndDrag?.(event);
-			},
-			onMomentumBegin: (event) => {
-				offset.value = readScrollEvent(event, orientation).offset;
-				onMomentumBegin?.(event);
-			},
-			onMomentumEnd: (event) => {
-				offset.value = readScrollEvent(event, orientation).offset;
-				onMomentumEnd?.(event);
-			},
+	const onScroll = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			const reading = readScrollEvent(event, orientation);
+			offset.value = reading.offset;
+			if (reading.contentSize !== contentSize.value) contentSize.value = reading.contentSize;
+			if (reading.layoutSize !== layoutSize.value) layoutSize.value = reading.layoutSize;
 		},
-		[orientation, onBeginDrag, onEndDrag, onMomentumBegin, onMomentumEnd]
-	);
+		onBeginDrag: (event) => {
+			offset.value = readScrollEvent(event, orientation).offset;
+			onBeginDrag?.(event);
+		},
+		onEndDrag: (event) => {
+			offset.value = readScrollEvent(event, orientation).offset;
+			onEndDrag?.(event);
+		},
+		onMomentumBegin: (event) => {
+			offset.value = readScrollEvent(event, orientation).offset;
+			onMomentumBegin?.(event);
+		},
+		onMomentumEnd: (event) => {
+			offset.value = readScrollEvent(event, orientation).offset;
+			onMomentumEnd?.(event);
+		},
+	});
 
 	const onLayout = useCallback(
 		(event: LayoutChangeEvent) => {

package/src/lib/scroll-edges.test.ts

@@ -1,5 +1,12 @@
 import { describe, expect, test } from "bun:test";
-import { resolveFadeBand, resolveFadeEdges, resolveFadeGradient, SCROLL_EDGES, type ScrollEdges } from "./scroll-edges";
+import {
+	resolveFadeBand,
+	resolveFadeEdges,
+	resolveFadeGradient,
+	resolveKeyboardLift,
+	SCROLL_EDGES,
+	type ScrollEdges,
+} from "./scroll-edges";
 
 describe("resolveFadeEdges", () => {
 	const EXPECTED: Record<ScrollEdges, { start: boolean; end: boolean }> = {
@@ -75,3 +82,31 @@ describe("resolveFadeGradient", () => {
 		});
 	});
 });
+
+describe("resolveKeyboardLift", () => {
+	const open = { orientation: "vertical", edge: "end", safeAreaBottom: 34 } as const;
+
+	test("lifts a vertical end band by the keyboard less the safe-area band it covers", () => {
+		expect(resolveKeyboardLift({ ...open, keyboardHeight: 336 })).toBe(302);
+	});
+
+	test("reads keyboard-controller's negative height the same as a positive one", () => {
+		expect(resolveKeyboardLift({ ...open, keyboardHeight: -336 })).toBe(302);
+	});
+
+	test("does not lift with the keyboard closed", () => {
+		expect(resolveKeyboardLift({ ...open, keyboardHeight: 0 })).toBe(0);
+	});
+
+	test("never lifts below zero while the keyboard is shorter than the safe area", () => {
+		expect(resolveKeyboardLift({ ...open, keyboardHeight: 20 })).toBe(0);
+	});
+
+	test("leaves a start band in place", () => {
+		expect(resolveKeyboardLift({ ...open, edge: "start", keyboardHeight: 336 })).toBe(0);
+	});
+
+	test("leaves a horizontal band in place", () => {
+		expect(resolveKeyboardLift({ ...open, orientation: "horizontal", keyboardHeight: 336 })).toBe(0);
+	});
+});

package/src/lib/scroll-edges.ts

@@ -79,3 +79,26 @@ export function resolveFadeGradient({
 
 	return { start: { x: near, y: 0 }, end: { x: far, y: 0 } };
 }
+
+export type KeyboardLiftInput = {
+	orientation: ScrollOrientation;
+	edge: ScrollEdge;
+	/** The keyboard's height. keyboard-controller reports it negative while open; either sign reads the same. */
+	keyboardHeight: number;
+	/** The bottom safe-area inset, which an open keyboard covers. */
+	safeAreaBottom: number;
+};
+
+/**
+ * How far a band rises to stay above an open keyboard.
+ *
+ * A keyboard covers the scrollable without resizing it, so a band pinned to
+ * the bottom of its box ends up underneath. Only a vertical end band is
+ * there. It rises by the keyboard less the safe-area band, the same distance
+ * a sticky `Screen.Footer` moves, so the band stays on the footer's top edge.
+ */
+export function resolveKeyboardLift({ orientation, edge, keyboardHeight, safeAreaBottom }: KeyboardLiftInput): number {
+	"worklet";
+	if (orientation !== "vertical" || edge !== "end") return 0;
+	return Math.max(0, Math.abs(keyboardHeight) - safeAreaBottom);
+}

package/src/lib/scroll-maths.test.ts

@@ -147,3 +147,30 @@ describe("readScrollEvent", () => {
 		expect(readScrollEvent(bounce, "horizontal").offset).toBe(-40);
 	});
 });
+
+describe("scrollEdgeOpacity with a covered end", () => {
+	// A 600pt frame holding 500pt of form, with 300pt of keyboard over its end.
+	// KeyboardAwareScrollView makes room with a content inset, which the scroll
+	// event leaves out of contentSize.
+	const base = { edge: "end", contentSize: 500, layoutSize: 600, fadeInDistance: 24 } as const;
+
+	test("clears the end of content that fits the uncovered frame", () => {
+		expect(scrollEdgeOpacity({ ...base, offset: 0 })).toBe(0);
+	});
+
+	test("draws the end while content runs on under the covered band", () => {
+		expect(scrollEdgeOpacity({ ...base, offset: 0, coveredEnd: 300 })).toBe(1);
+	});
+
+	test("clears the end once the last content is scrolled above the covered band", () => {
+		expect(scrollEdgeOpacity({ ...base, offset: 200, coveredEnd: 300 })).toBe(0);
+	});
+
+	test("fades the end over the last fadeInDistance points above the covered band", () => {
+		expect(scrollEdgeOpacity({ ...base, offset: 188, coveredEnd: 300 })).toBe(0.5);
+	});
+
+	test("leaves the start edge reading the offset alone", () => {
+		expect(scrollEdgeOpacity({ ...base, edge: "start", offset: 12, coveredEnd: 300 })).toBe(0.5);
+	});
+});

package/src/lib/scroll-maths.ts

@@ -59,6 +59,14 @@ export type ScrollEdgeState = {
 	layoutSize: number;
 	/** Points of travel from fully clear to fully in. 0 makes it a step. */
 	fadeInDistance: number;
+	/**
+	 * Points at the end of the frame covered by something drawn over it — an
+	 * open keyboard. `KeyboardAwareScrollView` makes room for the keyboard with
+	 * a content inset, which the scroll event leaves out of `contentSize`, so
+	 * content that fits the whole frame can still run on under the cover.
+	 * @default 0
+	 */
+	coveredEnd?: number;
 };
 
 /**
@@ -77,9 +85,10 @@ export type ScrollEdgeState = {
  */
 export function scrollEdgeOpacity(state: ScrollEdgeState): number {
 	"worklet";
-	const { edge, offset, contentSize, layoutSize, fadeInDistance } = state;
+	const { edge, offset, contentSize, layoutSize, fadeInDistance, coveredEnd = 0 } = state;
 	const isMeasured = contentSize > 0 && layoutSize > 0;
-	const maxScroll = contentSize - layoutSize;
+	// Measured against the part of the frame that is still visible.
+	const maxScroll = contentSize - (layoutSize - coveredEnd);
 
 	if (isMeasured && maxScroll <= 0) return 0;