@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0-alpha.4

package/README.md

@@ -37,7 +37,7 @@ never makes Metro resolve its peers.
 
 ```css
 @import '@delacour/react-native-ui/styles';
-@source '../../../../packages/native-ui/src';
+@source '../../../../packages/react-native-ui/src';
 ```
 
 Use the real workspace path, not a `node_modules` one — Bun symlinks workspace

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.3",
+	"version": "0.1.0-alpha.4",
 	"description": "React Native UI components \u2014 Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/delacournz/delacour-ui.git",
-		"directory": "packages/native-ui"
+		"directory": "packages/react-native-ui"
 	},
 	"keywords": [
 		"react-native",

package/src/components/bottom-sheet/AGENTS.md

@@ -119,6 +119,16 @@ library's first overlay. Compound root plus `BottomSheet.Trigger`,
   lands in front of it and silently doubles `BOTTOM_SHEET_FOOTER_GAP`. The
   container owns the shared value because the footer and the body are siblings in
   gorhom's tree and neither can see the other.
+- **`BottomSheet.ScrollView` gives the footer's height up as its own frame, not
+  as a spacer.** A spacer inside the content leaves the scroll view running the
+  sheet's full height, so its indicator and its overscroll bounce carry on
+  underneath the footer and the bottom of the track is hidden behind the buttons.
+  So the scroll view takes the same shared value as an animated `marginBottom`,
+  ends at the footer's hairline, and its content keeps only the gap —
+  `resolveSheetScrollEndPadding`. `BottomSheet.Content` keeps the spacer: it does
+  not scroll, so there is no indicator to stop. Confirmed on a simulator by
+  `measureInWindow` — the scroll view's bottom and the footer's top land on the
+  same point.
 - **Do not put a `KeyboardStickyView` inside a sheet.** This is the one keyboard
   rule that differs from [`Screen`](../screen/AGENTS.md). gorhom's `animatedFooterPosition` already
   carries a pinned footer clear of the keyboard and the translate above gives up

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

@@ -124,9 +124,10 @@ export function BottomSheetContainer({
 	const hasStickyFooter = placement === "sticky";
 	const overlay = portal?.overlay ?? null;
 
-	// Written by the pinned footer's own onLayout, read by the body's spacer. It
-	// lives here because the two are siblings in gorhom's tree and neither can see
-	// the other — the footer is rendered outside the children this file wraps.
+	// Written by the pinned footer's own onLayout, read by the body — the
+	// content's spacer, or the scroll view's margin. It lives here because the two
+	// are siblings in gorhom's tree and neither can see the other — the footer is
+	// rendered outside the children this file wraps.
 	const footerHeight = useSharedValue(0);
 
 	const containerValue = useMemo(() => ({ footerHeight, hasStickyFooter }), [footerHeight, hasStickyFooter]);

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

@@ -64,10 +64,12 @@ export type BottomSheetFooterProps = Omit<ViewProps, "children"> & {
  * lets the body's reserve shrink with it instead of over-reserving by the height
  * of a home indicator that is no longer there.
  *
- * It publishes its measured height into the sheet, and `BottomSheet.Content` and
- * `BottomSheet.ScrollView` reserve exactly that plus a gap. The height is a
- * shared value read by an animated spacer, never content-container padding —
- * `Screen` reserves its own chrome the same way and for the same reason.
+ * It publishes its measured height into the sheet. `BottomSheet.Content` reserves
+ * exactly that plus a gap with a spacer, and `BottomSheet.ScrollView` gives it up
+ * as its own frame so its scroll indicator stops at this footer's hairline. The
+ * height is a shared value read by an animated style either way, never
+ * content-container padding — `Screen` reserves its own chrome the same way and
+ * for the same reason.
  *
  * **Do not put a `KeyboardStickyView` in here.** gorhom's `animatedFooterPosition`
  * already carries the footer clear of the keyboard; this translate only gives up

package/src/components/bottom-sheet/bottom-sheet-scroll-view.tsx

@@ -1,12 +1,12 @@
 import { BottomSheetScrollView as GorhomBottomSheetScrollView } from "@gorhom/bottom-sheet";
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { View } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useAnimatedStyle } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { withUniwind } from "uniwind";
 import { cn } from "../../lib/cn";
 import { useBottomSheetContainerContext } from "./bottom-sheet.context";
-import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants, resolveSheetBottomInset } from "./bottom-sheet.variants";
+import { bottomSheetVariants, resolveSheetScrollEndPadding } from "./bottom-sheet.variants";
 
 type GorhomScrollViewProps = ComponentProps<typeof GorhomBottomSheetScrollView>;
 
@@ -56,10 +56,16 @@ export type BottomSheetScrollViewProps = Omit<
  * *array* alongside any `contentContainerStyle`, and the two then fight over the
  * one style this component has to own — the safe-area band. One writer for it.
  *
- * A pinned footer is reserved by a spacer at the end of the content rather than
- * by gorhom's `enableFooterMarginAdjustment`, which routes the footer's measured
- * height through React state and would commit a render on every frame of the
- * keyboard animation. See `BottomSheet.Content` for the whole reasoning.
+ * **A pinned footer shortens the scroll view; it is not reserved inside it.**
+ * The footer draws over the sheet, so a scroll view that ran the sheet's full
+ * height would carry its indicator and its overscroll bounce on underneath the
+ * footer, the bottom of the track hidden behind the buttons. So the frame gives
+ * up the footer's measured height as a `marginBottom` and ends at the footer's
+ * hairline, and the content keeps only the gap
+ * ({@link resolveSheetScrollEndPadding}). The margin is an animated style off
+ * the footer's shared value, never gorhom's `enableFooterMarginAdjustment`,
+ * which routes that height through React state and would commit a render on
+ * every frame of the keyboard animation — see `BottomSheet.Content`.
  *
  * @example
  * <BottomSheet.Container enableDynamicSizing={false} snapPoints={["60%", "90%"]}>
@@ -70,6 +76,7 @@ export function BottomSheetScrollView({
 	className,
 	contentContainerClassName,
 	children,
+	style,
 	...props
 }: BottomSheetScrollViewProps): ReactElement {
 	const container = useBottomSheetContainerContext();
@@ -77,18 +84,21 @@ export function BottomSheetScrollView({
 	const hasStickyFooter = container?.hasStickyFooter ?? false;
 	const footerHeight = container?.footerHeight;
 
-	const reserve = useAnimatedStyle(() => ({
-		height: footerHeight === undefined ? 0 : footerHeight.value + BOTTOM_SHEET_FOOTER_GAP,
+	// The footer's height, band included, as the frame's own margin — so the
+	// indicator's track ends where the footer begins and follows it as the
+	// keyboard takes the band back.
+	const aboveFooter = useAnimatedStyle(() => ({
+		marginBottom: hasStickyFooter && footerHeight !== undefined ? footerHeight.value : 0,
 	}));
 
 	return (
 		<StyledScrollView
 			className={cn(className)}
-			contentContainerStyle={{ paddingBottom: resolveSheetBottomInset({ bottom, hasStickyFooter }) }}
+			contentContainerStyle={{ paddingBottom: resolveSheetScrollEndPadding({ bottom, hasStickyFooter }) }}
 			{...props}
+			style={[aboveFooter, style]}
 		>
 			<View className={bottomSheetVariants().scrollContent({ className: contentContainerClassName })}>{children}</View>
-			{hasStickyFooter ? <Animated.View style={reserve} /> : null}
 		</StyledScrollView>
 	);
 }

package/src/components/bottom-sheet/bottom-sheet.variants.test.ts

@@ -11,6 +11,7 @@ import {
 	bottomSheetVariants,
 	resolveFooterPlacement,
 	resolveSheetBottomInset,
+	resolveSheetScrollEndPadding,
 } from "./bottom-sheet.variants";
 
 const LIGHT = declaredTokens("light");
@@ -183,6 +184,22 @@ describe("resolveSheetBottomInset", () => {
 	});
 });
 
+describe("resolveSheetScrollEndPadding", () => {
+	test("gives the safe-area band to the content when nothing is pinned below it", () => {
+		expect(resolveSheetScrollEndPadding({ bottom: 34, hasStickyFooter: false })).toBe(34);
+	});
+
+	test("holds the content off a pinned footer by the gap alone", () => {
+		// The scroll view's frame already stops at the footer's top edge, so the
+		// footer's height — band included — is not the content's to reserve.
+		expect(resolveSheetScrollEndPadding({ bottom: 34, hasStickyFooter: true })).toBe(BOTTOM_SHEET_FOOTER_GAP);
+	});
+
+	test("keeps the gap on a device with no bottom inset", () => {
+		expect(resolveSheetScrollEndPadding({ bottom: 0, hasStickyFooter: true })).toBe(BOTTOM_SHEET_FOOTER_GAP);
+	});
+});
+
 describe("bottomSheetVariants slots", () => {
 	test("the title slot carries layout only, never type", () => {
 		// The type comes from the `Text.Header` the part renders. A `text-lg` here

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

@@ -197,3 +197,24 @@ export function resolveSheetBottomInset({
 }): number {
 	return hasStickyFooter ? 0 : bottom;
 }
+
+/**
+ * The padding at the end of `BottomSheet.ScrollView`'s content.
+ *
+ * A scroll view does not reserve a pinned footer the way `BottomSheet.Content`
+ * does — its FRAME stops at the footer's top edge instead, so the scroll
+ * indicator and the overscroll bounce end there too rather than running on
+ * underneath it. That leaves the content only the gap to hold it off the
+ * footer's hairline. With no pinned footer the content is the bottom-most thing
+ * in the sheet and takes the safe-area band, as {@link resolveSheetBottomInset}
+ * has it.
+ */
+export function resolveSheetScrollEndPadding({
+	hasStickyFooter,
+	bottom,
+}: {
+	hasStickyFooter: boolean;
+	bottom: number;
+}): number {
+	return hasStickyFooter ? BOTTOM_SHEET_FOOTER_GAP : resolveSheetBottomInset({ bottom, hasStickyFooter });
+}

package/src/components/chart/AGENTS.md

@@ -1,7 +1,7 @@
 # Chart
 
 Skia charts wearing the theme's five-colour series ramp — the skin over
-[`@delacour/react-native-charts`](../../../../charts/AGENTS.md), which does the drawing and
+[`@delacour/react-native-charts`](../../../../react-native-charts/AGENTS.md), which does the drawing and
 knows nothing about tokens.
 
 `import { Chart, PieChart } from "@delacour/react-native-ui/chart";`

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

@@ -32,7 +32,7 @@ const GLYPH: Record<ScreenBackButtonGlyph, typeof IconChevronLeft> = {
 /**
  * The navbar's leading control.
  *
- * Takes an `onPress` rather than calling a router itself. `native-ui` has no
+ * Takes an `onPress` rather than calling a router itself. `react-native-ui` has no
  * navigation dependency and should not gain one for a chevron — the screen
  * already knows how it was pushed, and an app on a different router still gets
  * to use this.