@delacour/react-native-ui 0.1.0-alpha.20260925053522

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

@@ -0,0 +1,26 @@
+import type { ReactElement, ReactNode } from "react";
+import type { TextProps } from "react-native";
+import { Text } from "../text";
+import { screenVariants } from "./screen.variants";
+
+export type ScreenNavbarSubtitleProps = Omit<TextProps, "children"> & {
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * The navbar's secondary line — a step down in scale, on the muted token.
+ *
+ * Follows `Screen.Navbar.Title`'s rule: a string child is wrapped in a `Text`,
+ * any other node passes straight through.
+ */
+export function ScreenNavbarSubtitle({ className, children, ...props }: ScreenNavbarSubtitleProps): ReactElement {
+	if (typeof children !== "string") return <>{children}</>;
+
+	return (
+		<Text className={screenVariants().navbarSubtitle({ className })} numberOfLines={1} {...props}>
+			{children}
+		</Text>
+	);
+}
+ScreenNavbarSubtitle.displayName = "DelacourUI.Screen.Navbar.Subtitle";

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

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+import type { TextProps } from "react-native";
+import { Text } from "../text";
+import { screenVariants } from "./screen.variants";
+
+export type ScreenNavbarTitleProps = Omit<TextProps, "children"> & {
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * The navbar's primary line.
+ *
+ * A string child is wrapped in a `Text`; any other node is passed straight
+ * through, so a title can be an avatar row or a dropdown trigger without this
+ * component second-guessing it. React Native crashes on bare text outside a
+ * `<Text>`, which is why the string case cannot simply be forwarded too — the
+ * same rule `Button` and `ListGroup.Item` follow.
+ *
+ * Carries its own colour: a `View` does not cascade one to a `Text` descendant.
+ */
+export function ScreenNavbarTitle({ className, children, ...props }: ScreenNavbarTitleProps): ReactElement {
+	if (typeof children !== "string") return <>{children}</>;
+
+	return (
+		<Text className={screenVariants().navbarTitle({ className })} numberOfLines={1} {...props}>
+			{children}
+		</Text>
+	);
+}
+ScreenNavbarTitle.displayName = "DelacourUI.Screen.Navbar.Title";

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

@@ -0,0 +1,154 @@
+import { type ReactElement, type ReactNode, useCallback, useEffect } from "react";
+import { type LayoutChangeEvent, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useScreenPart } from "./screen.context";
+import type { ScreenPlacementProps } from "./screen.types";
+import { screenVariants } from "./screen.variants";
+import { ScreenNavbarBackButton } from "./screen-navbar-back-button";
+import { ScreenNavbarBackground } from "./screen-navbar-background";
+import { ScreenNavbarSubtitle } from "./screen-navbar-subtitle";
+import { ScreenNavbarTitle } from "./screen-navbar-title";
+
+export type ScreenNavbarProps = ScreenPlacementProps & {
+	/** Leading content — a back button, a title, an avatar row. */
+	children?: ReactNode;
+	/** Trailing content, laid out in a row against the right edge. */
+	actions?: ReactNode;
+	/**
+	 * Content centred across the full width, independent of what the leading and
+	 * trailing slots take. Absolutely positioned, so a long title on one side
+	 * cannot push it off centre.
+	 */
+	center?: ReactNode;
+	/** Classes for the navbar's opaque backing, to tint or blur it. */
+	backgroundClassName?: string;
+	/**
+	 * Ramp the bottom hairline in as the screen scrolls, instead of drawing it at
+	 * rest.
+	 *
+	 * Off by default: a screen whose content starts flush against the bar wants
+	 * the line from the first frame. Turn it on for a header that should read as
+	 * undivided until the content moves — which only says anything on a screen
+	 * that scrolls, since the value it reads is published by the scrollable.
+	 *
+	 * @default false
+	 */
+	fadeBorderOnScroll?: boolean;
+};
+
+/**
+ * The bar pinned to the top of a screen.
+ *
+ * Measures its own height — safe-area band included — into the screen context,
+ * so every scrollable reserves exactly what it covers rather than each screen
+ * guessing a number. That measurement is the reason this cannot be a standalone
+ * component: it only means anything inside a `<Screen>`.
+ *
+ * `overlay` by default, so content scrolls under it and the hairline appearing
+ * on scroll says there is more above. `placement="static"` puts it in the flow
+ * instead, for a screen whose content should never pass beneath it.
+ *
+ * The bottom hairline is drawn at rest. `fadeBorderOnScroll` ramps it in with
+ * the content instead, for a header that should read as undivided until the
+ * screen moves.
+ *
+ * Every layout box is `pointerEvents="box-none"`, so the bar itself never
+ * swallows a tap meant for the content beneath — only its actual controls do.
+ * The centre slot in particular spans the full width and would otherwise block
+ * both the leading and trailing controls.
+ *
+ * Actions are composed rather than configured: pass whatever the screen needs.
+ * A `Button` already covers the icon-button case, so there is no `Navbar.Action`
+ * restating its loading, sizing and haptics vocabulary.
+ *
+ * @example
+ * <Screen.Navbar>
+ *   <Screen.Navbar.BackButton onPress={() => router.back()}>
+ *     <Screen.Navbar.Title>Settings</Screen.Navbar.Title>
+ *   </Screen.Navbar.BackButton>
+ * </Screen.Navbar>
+ *
+ * @example
+ * <Screen.Navbar
+ *   actions={
+ *     <Button accessibilityLabel="Search" size="icon-sm" variant="secondary" onPress={search}>
+ *       <Icon icon={IconSearch} />
+ *     </Button>
+ *   }
+ *   center={<Screen.Navbar.Title>Inbox</Screen.Navbar.Title>}
+ *   placement="static"
+ * />
+ */
+function ScreenNavbarRoot({
+	placement = "overlay",
+	className,
+	backgroundClassName,
+	fadeBorderOnScroll = false,
+	children,
+	actions,
+	center,
+	onLayout,
+	...props
+}: ScreenNavbarProps): ReactElement {
+	const { navbar } = useScreenPart("Screen.Navbar");
+	// Not uniwind's `pt-safe`: that compiles to env(safe-area-inset-top), which
+	// resolves to zero on React Native and would silently draw the bar over the
+	// status bar. The hook is also what the footer reads, so the two agree.
+	const { top } = useSafeAreaInsets();
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			onLayout?.(event);
+			navbar.height.value = event.nativeEvent.layout.height;
+		},
+		[navbar, onLayout]
+	);
+
+	useEffect(() => {
+		navbar.placement.value = placement;
+	}, [placement, navbar.placement]);
+
+	return (
+		<View
+			className={screenVariants({ placement }).navbar({ className })}
+			onLayout={handleLayout}
+			pointerEvents="box-none"
+			{...props}
+		>
+			<ScreenNavbarBackground className={backgroundClassName} fadeOnScroll={fadeBorderOnScroll} />
+			<View pointerEvents="box-none" style={{ paddingTop: top }}>
+				<View className={screenVariants().navbarRow()} pointerEvents="box-none">
+					<View className={screenVariants().navbarStart()} pointerEvents="box-none">
+						{children}
+					</View>
+					{actions ? (
+						<View className={screenVariants().navbarActions()} pointerEvents="box-none">
+							{actions}
+						</View>
+					) : null}
+					{center ? (
+						<View className={screenVariants().navbarCenter()} pointerEvents="box-none">
+							{center}
+						</View>
+					) : null}
+				</View>
+			</View>
+		</View>
+	);
+}
+
+/**
+ * The bar pinned to the top of a screen, with its title and back button slots.
+ *
+ * Reached as `Screen.Navbar`; see {@link ScreenNavbarRoot} for the layout and
+ * the measurement it publishes.
+ */
+export const ScreenNavbar = Object.assign(ScreenNavbarRoot, {
+	/** The primary line. A string child is wrapped in a `Text`; any other node passes through. */
+	Title: ScreenNavbarTitle,
+	/** The secondary line, a step down in scale and on the muted token. */
+	Subtitle: ScreenNavbarSubtitle,
+	/** The leading control. Takes an `onPress` — this library wires no router of its own. */
+	BackButton: ScreenNavbarBackButton,
+	displayName: "DelacourUI.Screen.Navbar",
+});

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

@@ -0,0 +1,38 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { ScreenProvider, useScreenContext } from "./screen.context";
+import { screenVariants } from "./screen.variants";
+
+export type ScreenRootProps = ViewProps & {
+	/**
+	 * Paint the screen's layout layers in debug colours — the footer's bands, a
+	 * scrollable's spacers, a chat list's composer clearance.
+	 *
+	 * Opt-in per screen and not gated behind `__DEV__`, so a layout can still be
+	 * inspected on a release build where a reserve only goes wrong.
+	 */
+	debug?: boolean;
+	className?: string;
+};
+
+/**
+ * The root box of a screen, and the provider its parts measure themselves into.
+ *
+ * Lives in its own module rather than in `screen.tsx` because `Screen.Loading`
+ * and `Screen.Error` are whole screens — they render this — and importing
+ * `./screen` from either would close a cycle through the `Object.assign` that
+ * names them. See AGENTS.md rule 3.
+ */
+export function ScreenRoot({ debug = false, className, children, ...props }: ScreenRootProps): ReactElement {
+	// A nested screen keeps reporting to the outer one rather than starting a
+	// second, unread set of measurements.
+	const parentContext = useScreenContext();
+
+	return (
+		<ScreenProvider debug={debug} parentContext={parentContext}>
+			<View className={screenVariants().root({ className })} {...props}>
+				{children}
+			</View>
+		</ScreenProvider>
+	);
+}

package/src/components/screen/screen-scroll-area.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, type ReactElement, type Ref } from "react";
+import type { ScrollViewProps } from "react-native";
+import { KeyboardAwareScrollView, type KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
+import Animated from "react-native-reanimated";
+import { withUniwind } from "uniwind";
+import { cn } from "../../lib/cn";
+import type { ScreenScrollableProps, ScreenScrollViewRef } from "./screen.types";
+import { screenVariants } from "./screen.variants";
+import { useScreenFooterKeyboardClearance, useScreenScrollInsets } from "./use-screen-scroll-insets";
+
+// `contentContainerClassName` only resolves on a uniwind-wrapped component, and
+// the wrapper has to be built at module scope — in render it would mint a new
+// component type every frame and remount the whole scroll view.
+const StyledKeyboardAwareScrollView = withUniwind(KeyboardAwareScrollView);
+
+export type ScreenScrollAreaProps = ScrollViewProps &
+	ScreenScrollableProps & {
+		/**
+		 * Scroll the focused `TextInput` clear of the keyboard, rather than only
+		 * reserving space for it. Turn this on for form screens. Off by default —
+		 * it costs a second scroll driver that a read-only screen never needs.
+		 */
+		keyboardAware?: boolean;
+	};
+
+/**
+ * A scrolling region that keeps its content clear of the screen's chrome.
+ *
+ * The navbar and footer reserves are spacer views at either end of the content
+ * rather than padding on the content container, so both can animate on the UI
+ * thread as the chrome measures itself and the keyboard moves.
+ *
+ * The ref is a `ScreenScrollViewRef`, for a caller that has to move the scroll
+ * view — jumping to an offset, or driving it from a gesture on the UI thread.
+ * One type covers both engines: `keyboardAware` swaps in
+ * `KeyboardAwareScrollView`, whose ref is a SUPERSET of this one — it adds
+ * `assureFocusedInputVisible` to the same scroll view instance — so what a
+ * caller receives always satisfies what it declared.
+ *
+ * @example
+ * <Screen.ScrollArea contentContainerClassName="gap-4 px-5">
+ *   {rows}
+ * </Screen.ScrollArea>
+ *
+ * @example
+ * <Screen.ScrollArea keyboardAware contentContainerClassName="gap-4 px-5">
+ *   <Form />
+ * </Screen.ScrollArea>
+ */
+export const ScreenScrollArea = forwardRef<ScreenScrollViewRef, ScreenScrollAreaProps>(function ScreenScrollAreaRender(
+	{ header, className, contentContainerClassName, keyboardAware = false, children, ...props },
+	ref
+): ReactElement {
+	const { scrollHandler, insetTopAnimatedStyle, insetBottomAnimatedStyle } = useScreenScrollInsets(
+		keyboardAware ? "keyboard-aware" : "standard"
+	);
+	// A sticky footer rides the keyboard, so the focused field has to clear the
+	// footer too — not just the keyboard. Deliberately not the chat list's
+	// occupancy: the footer's safe-area band is parked behind the keyboard by the
+	// sticky shift, so counting it here would overshoot.
+	const footerClearance = useScreenFooterKeyboardClearance();
+
+	const content = (
+		<>
+			<Animated.View style={insetTopAnimatedStyle} />
+			{header}
+			{children}
+			<Animated.View style={insetBottomAnimatedStyle} />
+		</>
+	);
+	const contentContainer = cn(screenVariants().scrollContent({ className: "py-0" }), contentContainerClassName);
+
+	// Two branches rather than one `keyboardAware ? A : B` component variable.
+	// A variable holding either component types its `ref` as the two refs'
+	// intersection, which is neither of them, so `forwardRef` could not name a
+	// single instance type at all — and the branch is what lets each engine
+	// receive the ref that is actually its own.
+	//
+	// The cast in that branch is variance, not a guess: `RefObject.current` is
+	// mutable and therefore invariant, so TypeScript rejects the narrower ref
+	// even though the value flowing back into it is a `KeyboardAwareScrollViewRef`
+	// — which IS a `ScreenScrollViewRef` plus one method.
+	if (keyboardAware) {
+		return (
+			<StyledKeyboardAwareScrollView
+				className={className}
+				keyboardShouldPersistTaps="handled"
+				onScroll={scrollHandler}
+				showsHorizontalScrollIndicator={false}
+				showsVerticalScrollIndicator={false}
+				bottomOffset={footerClearance}
+				{...props}
+				ref={ref as Ref<KeyboardAwareScrollViewRef>}
+				contentContainerClassName={contentContainer}
+			>
+				{content}
+			</StyledKeyboardAwareScrollView>
+		);
+	}
+
+	return (
+		<Animated.ScrollView
+			className={className}
+			keyboardShouldPersistTaps="handled"
+			onScroll={scrollHandler}
+			showsHorizontalScrollIndicator={false}
+			showsVerticalScrollIndicator={false}
+			{...props}
+			ref={ref}
+			contentContainerClassName={contentContainer}
+		>
+			{content}
+		</Animated.ScrollView>
+	);
+});
+ScreenScrollArea.displayName = "DelacourUI.Screen.ScrollArea";

package/src/components/screen/screen-scroll-shadow.tsx

@@ -0,0 +1,186 @@
+import { LinearGradient } from "expo-linear-gradient";
+import type { ReactElement } from "react";
+import { StyleSheet, View, type ViewProps } from "react-native";
+import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { transparentOf } from "../../lib/color";
+import { useScreenPart } from "./screen.context";
+
+/** How tall the fade is, in points, when a caller names no size. */
+const SCROLL_SHADOW_SIZE = 28;
+/**
+ * How far the scrollable travels before a fade is fully in, as a share of `size`.
+ *
+ * A quarter, so the fade arrives while the first row is still leaving rather
+ * than trailing it: matching the ramp to the fade's own height reads as the
+ * shadow lagging the finger.
+ */
+const SCROLL_SHADOW_RAMP = 0.25;
+
+/** Which ends of the scrollable fade. */
+export const SCROLL_SHADOW_EDGES = ["top", "bottom", "both"] as const;
+export type ScreenScrollShadowEdge = (typeof SCROLL_SHADOW_EDGES)[number];
+
+/** What the fade measures its position from. */
+export const SCROLL_SHADOW_ANCHORS = ["screen", "parent"] as const;
+export type ScreenScrollShadowAnchor = (typeof SCROLL_SHADOW_ANCHORS)[number];
+
+export type ScreenScrollShadowProps = Omit<ViewProps, "children" | "pointerEvents"> & {
+	/** How tall the fade is, in points. @default SCROLL_SHADOW_SIZE */
+	size?: number;
+	/** Which ends fade. @default "both" */
+	edges?: ScreenScrollShadowEdge;
+	/**
+	 * What the fade positions itself against.
+	 *
+	 * `screen` measures from the navbar and footer, which is right whenever this
+	 * is a sibling of the body. `parent` pins it to its container instead, for a
+	 * caller that has already placed it — chrome drawing this behind itself,
+	 * because paint order is source order and nothing outside a navigator can
+	 * slot between the pages it renders and the bar it renders over them.
+	 *
+	 * @default "screen"
+	 */
+	anchor?: ScreenScrollShadowAnchor;
+	/**
+	 * The colour the content fades into.
+	 *
+	 * Defaults to the `background` token, which is what a screen paints. Name
+	 * another when the shadow sits over a different surface — a `card`, say —
+	 * because a fade into the wrong colour reads as a grey band rather than as
+	 * the content running out.
+	 */
+	color?: string;
+	/**
+	 * Points of SOLID colour above the gradient, for chrome floating over the body.
+	 *
+	 * Not an offset — the fade still begins at the navbar. This is the band the
+	 * floating chrome occupies, painted opaque so content is already gone by the
+	 * time it reaches the chrome, with the gradient below it doing the dissolving.
+	 * Offsetting the fade past the chrome instead leaves content crisp behind
+	 * whatever parts of it are transparent, and then cuts abruptly where the fade
+	 * finally starts — which is the whole artefact this is here to avoid.
+	 */
+	coverTop?: number;
+	/** Points of solid colour below the gradient, for chrome floating at the end. */
+	coverBottom?: number;
+	className?: string;
+};
+
+/**
+ * A fade at each end of the screen's scrollable, for content that runs past it.
+ *
+ * The problem it solves is that a scrollable with a hard edge looks finished. A
+ * row cut exactly in half by the bottom of the viewport reads as a layout bug;
+ * the same row fading out reads as more to come. That signal matters most under
+ * chrome that floats over the content, where the cut lands mid-component and
+ * there is no bar edge to explain it.
+ *
+ * **It is a sibling of the scrollable, not a wrapper around it.** The screen
+ * context already publishes `scrollY`, `contentHeight` and `layoutHeight` from
+ * whichever body is mounted, so this reads the numbers rather than intercepting
+ * them. Wrapping would mean cloning the child to attach an `onScroll`, and every
+ * scrollable this package ships already has one of its own — the reserve
+ * animations in `use-screen-scroll-insets` are driven by it — so a second writer
+ * would take a handler that is already spoken for.
+ *
+ * It follows that this works over any of them: `ScrollArea`, `FlatList`,
+ * `SectionList`, `LegendList` and `ChatList` all publish to the same context.
+ *
+ * **It places itself against the screen's own chrome.** The top fade starts at
+ * the navbar's measured height and the bottom above the footer's, both read from
+ * the same context, so it is correct under either placement without a caller
+ * measuring anything.
+ *
+ * **`coverTop` extends the band, it does not move it.** Chrome floating between
+ * the navbar and the body — a tab bar, say — wants the content already gone
+ * where it passes behind, so the band is solid for those points and only then
+ * begins to fade. Pushing the whole fade below the chrome instead leaves content
+ * crisp behind whatever parts of it are transparent, and cuts abruptly where the
+ * fade finally starts.
+ *
+ * **Each end fades only when there is something past it.** The top is out at
+ * rest and arrives over the first `size` points of travel; the bottom is there
+ * from the start and leaves over the last `size`. Content shorter than its
+ * viewport never scrolls, so `maxScroll` is zero and both stay out — a fade over
+ * a short page would be an edge that promises content that does not exist.
+ *
+ * **The far stop is the near colour at zero alpha, never `transparent`.** The
+ * keyword is transparent BLACK, so interpolating toward it drags every stop
+ * between through grey — a dark bloom over a light ground and a milky one over
+ * a dark. `transparentOf` takes the alpha off the colour instead, and this
+ * declines to draw at all rather than fall back to the keyword.
+ *
+ * @example
+ * <Screen>
+ *   <Screen.ScrollArea>{rows}</Screen.ScrollArea>
+ *   <Screen.ScrollShadow />
+ * </Screen>
+ *
+ * @example
+ * // Under a bar floating over the content.
+ * <Screen.ScrollShadow insetTop={barHeight} />
+ */
+export function ScreenScrollShadow({
+	size = SCROLL_SHADOW_SIZE,
+	edges = "both",
+	anchor = "screen",
+	color,
+	coverTop = 0,
+	coverBottom = 0,
+	className,
+	style,
+	...props
+}: ScreenScrollShadowProps): ReactElement {
+	const { scrollY, contentHeight, layoutHeight, navbar, footer } = useScreenPart("Screen.ScrollShadow");
+	const background = useThemeColor("background");
+	const paint = color ?? background;
+	const faded = transparentOf(paint);
+	const ramp = size * SCROLL_SHADOW_RAMP;
+
+	// The chrome's height is part of the position, not something a caller adds.
+	// This fills the whole screen, so a fade placed at zero would sit behind the
+	// navbar under a static one and under an overlay one alike — visible in
+	// neither, which is a component that silently does nothing.
+	const topStyle = useAnimatedStyle(() => ({
+		opacity: interpolate(scrollY.value, [0, ramp], [0, 1], "clamp"),
+		top: anchor === "parent" ? 0 : navbar.height.value,
+	}));
+
+	const bottomStyle = useAnimatedStyle(() => {
+		const maxScroll = contentHeight.value - layoutHeight.value;
+		const bottom = anchor === "parent" ? 0 : footer.height.value + footer.overlayHeight.value;
+		if (maxScroll <= 0) return { bottom, opacity: 0 };
+
+		return { bottom, opacity: interpolate(scrollY.value, [maxScroll - ramp, maxScroll], [1, 0], "clamp") };
+	});
+
+	// Without a colour to fade from there is no honest gradient to draw, and the
+	// keyword `transparent` is not a substitute — see `transparentOf`.
+	if (!(paint && faded)) return <View />;
+
+	return (
+		<View className={className} pointerEvents="none" style={[StyleSheet.absoluteFill, style]} {...props}>
+			{edges === "bottom" ? null : (
+				<Animated.View style={[{ height: coverTop + size, left: 0, position: "absolute", right: 0 }, topStyle]}>
+					<LinearGradient
+						colors={[paint, paint, faded]}
+						locations={[0, coverTop / (coverTop + size), 1]}
+						style={StyleSheet.absoluteFill}
+					/>
+				</Animated.View>
+			)}
+
+			{edges === "top" ? null : (
+				<Animated.View style={[{ height: coverBottom + size, left: 0, position: "absolute", right: 0 }, bottomStyle]}>
+					<LinearGradient
+						colors={[faded, paint, paint]}
+						locations={[0, size / (coverBottom + size), 1]}
+						style={StyleSheet.absoluteFill}
+					/>
+				</Animated.View>
+			)}
+		</View>
+	);
+}
+ScreenScrollShadow.displayName = "DelacourUI.Screen.ScrollShadow";

package/src/components/screen/screen-section-list.tsx

@@ -0,0 +1,81 @@
+import { type ForwardedRef, forwardRef, type ReactElement, type RefAttributes, useMemo } from "react";
+import { type DefaultSectionT, SectionList, type SectionListProps, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { cn } from "../../lib/cn";
+import type { ScreenScrollableProps } from "./screen.types";
+import { screenVariants } from "./screen.variants";
+import { resolveListComponent } from "./screen-list-component";
+import { useScreenScrollInsets } from "./use-screen-scroll-insets";
+
+// `Animated.createAnimatedComponent` erases the generic parameters; the recast
+// puts them back so `sections` and `renderItem` still check against each other.
+const AnimatedSectionList = Animated.createAnimatedComponent(SectionList) as unknown as typeof SectionList;
+
+export type ScreenSectionListProps<ItemT, SectionT = DefaultSectionT> = Omit<
+	SectionListProps<ItemT, SectionT>,
+	"children"
+> &
+	ScreenScrollableProps;
+
+/**
+ * The component's own type, restated so the generics survive `forwardRef`.
+ *
+ * Same reasoning as `ScreenFlatListComponent`: `forwardRef` erases type
+ * parameters, so `sections` and `renderItem` would check against `unknown`.
+ */
+type ScreenSectionListComponent = (<ItemT, SectionT = DefaultSectionT>(
+	props: ScreenSectionListProps<ItemT, SectionT> & RefAttributes<SectionList<ItemT, SectionT>>
+) => ReactElement) & { displayName?: string };
+
+/**
+ * A sectioned virtualised list that keeps its content clear of the screen's
+ * chrome. `Screen.FlatList`'s behaviour, with sticky section headers.
+ *
+ * The ref is the list itself, for `scrollToLocation` and the rest.
+ */
+export const ScreenSectionList = forwardRef(function ScreenSectionListRender<ItemT, SectionT = DefaultSectionT>(
+	{
+		header,
+		contentContainerClassName,
+		ListHeaderComponent: ListHeaderComponentProp,
+		ListFooterComponent: ListFooterComponentProp,
+		...props
+	}: ScreenSectionListProps<ItemT, SectionT>,
+	ref: ForwardedRef<SectionList<ItemT, SectionT>>
+): ReactElement {
+	const { scrollHandler, insetTopAnimatedStyle, insetBottomAnimatedStyle } = useScreenScrollInsets("standard");
+
+	const ListHeaderComponent = useMemo<ReactElement>(
+		() => (
+			<>
+				<Animated.View style={insetTopAnimatedStyle} />
+				{header}
+				{resolveListComponent(ListHeaderComponentProp)}
+			</>
+		),
+		[header, ListHeaderComponentProp, insetTopAnimatedStyle]
+	);
+
+	const ListFooterComponent = useMemo<ReactElement>(
+		() => (
+			<View>
+				{resolveListComponent(ListFooterComponentProp)}
+				<Animated.View style={insetBottomAnimatedStyle} />
+			</View>
+		),
+		[ListFooterComponentProp, insetBottomAnimatedStyle]
+	);
+
+	return (
+		<AnimatedSectionList
+			showsVerticalScrollIndicator={false}
+			{...props}
+			contentContainerClassName={cn(screenVariants().scrollContent(), contentContainerClassName)}
+			ListFooterComponent={ListFooterComponent}
+			ListHeaderComponent={ListHeaderComponent}
+			onScroll={scrollHandler}
+			ref={ref}
+		/>
+	);
+}) as unknown as ScreenSectionListComponent;
+ScreenSectionList.displayName = "DelacourUI.Screen.SectionList";