@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/settings/SettingsToggleRow.tsx

@@ -1,38 +1,53 @@
-import { View, Text } from "react-native";
+import { Pressable, View, Text } from "react-native";
 import { cn } from "../cn";
-import { textStyle, typeStyle } from "../controlStyles";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, typeStyle } from "../controlStyles";
 import { useLargerText } from "../theme";
 import { useScheme } from "../useScheme";
+import { relaxedSizeStyle } from "./relaxedSizeStyle";
 
+/**
+ * One row in a `SettingsSection` list, the web `SettingsToggleRow`: title
+ * `text-sm` medium (14 / 20 / 500), description `text-xs leading-relaxed`
+ * (12 / 19.5), muted; one step up each with larger text. The web action column
+ * is `min-h-10` (40); this one keeps the 44 touch target.
+ *
+ * With `onCheckedChange` the whole row is the switch, as `LabeledSwitchRow`
+ * (the web `<label htmlFor>`): at least 56 high, one `switch` for TalkBack
+ * named by the title, with the `action` switch hidden from it.
+ */
 export function SettingsToggleRow({
   title,
   description,
   action,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  accessibilityLabel,
   className,
 }: {
   title: React.ReactNode;
   description?: React.ReactNode;
   action: React.ReactNode;
+  /** The switch state, for the row's `switch` role. */
+  checked?: boolean;
+  /** Makes the whole row toggle `checked`. */
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** The row's name when `title` is not a string. */
+  accessibilityLabel?: string;
   className?: string;
 }) {
   const largerText = useLargerText();
   const scheme = useScheme();
-  return (
-    <View
-      className={cn(
-        "flex-row items-center justify-between gap-4 px-4 py-3",
-        largerText ? "min-h-[72px]" : "min-h-16",
-        className,
-      )}
-    >
+  const titleSize = largerText ? "text-base" : "text-sm";
+  const descriptionSize = largerText ? "text-sm" : "text-xs";
+  const content = (
+    <>
       <View className="min-w-0 flex-1">
         {typeof title === "string" ? (
           <Text
-            className={cn(
-              "font-instrument-sans-semibold",
-              largerText ? "text-xl" : "text-lg",
-            )}
-            style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+            className={cn("font-instrument-sans-medium", titleSize)}
+            style={[textStyle("foreground", scheme), sizeStyle(titleSize), typeStyle("medium")]}
           >
             {title}
           </Text>
@@ -42,11 +57,8 @@ export function SettingsToggleRow({
         {description != null ? (
           typeof description === "string" ? (
             <Text
-              className={cn(
-                "mt-1 font-instrument-sans",
-                largerText ? "text-lg" : "text-base",
-              )}
-              style={textStyle("muted", scheme)}
+              className={cn("mt-1 font-instrument-sans", descriptionSize, "leading-relaxed")}
+              style={[textStyle("muted", scheme), relaxedSizeStyle(descriptionSize)]}
             >
               {description}
             </Text>
@@ -55,9 +67,30 @@ export function SettingsToggleRow({
           )
         ) : null}
       </View>
-      <View className={cn("shrink-0 items-center justify-center", "min-h-12")}>
+      <View
+        className="shrink-0 items-center justify-center"
+        style={{ minHeight: MIN_TOUCH_TARGET }}
+        // The row is the accessible switch, so the one inside is hidden from assistive tech.
+        accessibilityElementsHidden={onCheckedChange != null}
+        importantForAccessibility={onCheckedChange ? "no-hide-descendants" : "auto"}
+      >
         {action}
       </View>
-    </View>
+    </>
+  );
+  const rowClass = "flex-row items-center justify-between gap-4 px-4 py-3";
+  if (!onCheckedChange) return <View className={cn(rowClass, className)}>{content}</View>;
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityLabel={typeof title === "string" ? title : accessibilityLabel}
+      accessibilityHint={typeof description === "string" ? description : undefined}
+      accessibilityState={{ checked: Boolean(checked), disabled }}
+      disabled={disabled}
+      onPress={() => onCheckedChange(!checked)}
+      className={cn(rowClass, "min-h-14", className)}
+    >
+      {content}
+    </Pressable>
   );
 }

package/src/settings/relaxedSizeStyle.ts

@@ -0,0 +1,11 @@
+import { sizeStyle, type TextSize } from "../controlStyles";
+
+/**
+ * `sizeStyle(size)` with the Tailwind `leading-relaxed` line height (1.625 ×
+ * the size), for the web settings descriptions (`text-xs leading-relaxed` is
+ * 12 / 19.5). Set beside the `leading-relaxed` class. Kept for the settings
+ * files; the number lives in `sizeStyle`.
+ */
+export function relaxedSizeStyle(size: TextSize) {
+  return sizeStyle(size, "relaxed");
+}

package/src/sheetDrag.ts

@@ -0,0 +1,67 @@
+/**
+ * The rules of a bottom sheet's drag to dismiss, as plain numbers, so they
+ * stay testable apart from the gesture. Distances are in points, `vy` in
+ * points per millisecond (the React Native `PanResponder` unit). Each is a
+ * worklet, so the Gesture Handler drag runs them on the UI thread.
+ */
+
+/** How far ahead (ms) the release velocity carries the sheet when deciding to close. */
+const PROJECTION_MS = 200;
+
+/** A flick down at this speed (pt/ms, so 1000 pt/s) closes the sheet however short the drag. */
+const FLICK_VELOCITY = 1;
+
+/** How far an upward pull may lift the sheet: less than the corner radius hidden below the screen. */
+export const SHEET_OVERPULL = 12;
+
+/** A drag that starts the sheet gesture: down, more vertical than sideways, past a small slop. */
+export function isSheetDragDown(dx: number, dy: number): boolean {
+  "worklet";
+  return dy > 4 && Math.abs(dy) > Math.abs(dx);
+}
+
+/**
+ * Where the sheet sits for a drag that would put it `dy` below rest (where
+ * the drag started plus the finger's travel): it follows the finger down, and
+ * past rest upward it meets growing resistance, up to `SHEET_OVERPULL`.
+ */
+export function sheetDragOffset(dy: number): number {
+  "worklet";
+  if (dy >= 0) return dy;
+  return -SHEET_OVERPULL * (1 - 1 / (1 - dy / (SHEET_OVERPULL * 4)));
+}
+
+/**
+ * The finger position (window `y`) a drag's travel counts from, so the point
+ * the finger holds stays under it: where it touched down, moved down by any
+ * scroll the same touch spent bringing the body back to its top before the
+ * sheet took over (`scrollAtDown` to `scrollNow`). Without that, the sheet
+ * would jump by the scroll when it takes over.
+ */
+export function sheetDragAnchor(downY: number, scrollAtDown: number, scrollNow: number): number {
+  "worklet";
+  return downY + Math.max(0, scrollAtDown - scrollNow);
+}
+
+/**
+ * Whether a released drag closes the sheet: a quick flick down, or a drag
+ * whose position (`dy` below rest), carried on by its speed, passes half the
+ * sheet. A slow, short drag springs back.
+ */
+export function sheetDragDismisses({ dy, vy, height }: { dy: number; vy: number; height: number }): boolean {
+  "worklet";
+  if (dy <= 0) return false;
+  if (vy >= FLICK_VELOCITY) return true;
+  return dy + Math.max(0, vy) * PROJECTION_MS > height / 2;
+}
+
+/**
+ * The velocity (pt/s) a sheet springs home with after a release at
+ * `position` (its offset from rest, up negative). Speed toward rest carries
+ * on; speed away from rest above the top is dropped, so a flick up does not
+ * lift the sheet off the bottom edge.
+ */
+export function sheetSnapVelocity(position: number, velocity: number): number {
+  "worklet";
+  return position < 0 ? Math.max(0, velocity) : velocity;
+}

package/src/swipeRow.ts

@@ -0,0 +1,169 @@
+import type { IconProps } from "@tabler/icons-react-native";
+import type { ComponentType } from "react";
+
+/**
+ * The rules of a swipeable list row (`SwipeableRow`), as plain numbers, so
+ * they stay testable apart from the gesture. The offset is in points:
+ * positive when the row moves right (it reveals the leading actions),
+ * negative when it moves left (the trailing actions). Velocities are in
+ * points per second, the Gesture Handler unit. Each rule is a worklet, so the
+ * drag runs it on the UI thread.
+ */
+
+/** One action a swipe reveals behind a row. */
+export type SwipeAction = {
+  /** Unique in the row; also the accessibility action name. */
+  key: string;
+  /** What the action does ("Archive"): the accessibility label of its button and of its row action. */
+  label: string;
+  /** A Tabler icon, drawn in the tone's foreground. */
+  icon: ComponentType<IconProps>;
+  /** The fill: `default` the primary fill, `warning` (such as Archive), `danger` for a destructive action. */
+  tone?: "default" | "warning" | "danger";
+  /**
+   * Runs the action. With `exits`, a returned promise that settles while
+   * the row is still on screen (it failed, or the row stays) brings the row
+   * back.
+   */
+  onPress: () => void | Promise<unknown>;
+  /** The action takes the row out of the list (Archive): a full swipe slides it out. Else the row springs back. */
+  exits?: boolean;
+};
+
+export type SwipeSide = "leading" | "trailing";
+
+/** The revealed widths of each side (0 for a side with no actions) and the row's width. */
+export type SwipeSides = { leading: number; trailing: number; width: number };
+
+/** The width of one revealed action button. */
+export const SWIPE_ACTION_WIDTH = 72;
+
+/** Sideways travel (pt) before the drag takes the row: a tap, or a scroll, never moves it. */
+export const SWIPE_ACTIVE_OFFSET_X = 12;
+
+/** Vertical travel (pt) that hands the touch to the list's scroll first: a small diagonal drag scrolls. */
+export const SWIPE_FAIL_OFFSET_Y = 8;
+
+/**
+ * The pan's sideways thresholds. A row takes a sideways drag past
+ * `SWIPE_ACTIVE_OFFSET_X` either way. Inside a `Pager` it takes only the
+ * directions it has actions for, and a drag the other way fails it at once,
+ * so the pager behind moves instead (a Sessions row swiped right).
+ */
+export function swipeRowActivation(
+  sides: Pick<SwipeSides, "leading" | "trailing">,
+  insidePager: boolean,
+): { activeOffsetX: number | [number, number]; failOffsetX?: number } {
+  if (!insidePager || (sides.leading > 0 && sides.trailing > 0)) {
+    return { activeOffsetX: [-SWIPE_ACTIVE_OFFSET_X, SWIPE_ACTIVE_OFFSET_X] };
+  }
+  // Left (negative) reveals the trailing actions; right the leading ones.
+  return sides.trailing > 0
+    ? { activeOffsetX: -SWIPE_ACTIVE_OFFSET_X, failOffsetX: SWIPE_ACTIVE_OFFSET_X }
+    : { activeOffsetX: SWIPE_ACTIVE_OFFSET_X, failOffsetX: -SWIPE_ACTIVE_OFFSET_X };
+}
+
+/** How far ahead (s) the release velocity carries the row when deciding where it settles. */
+const PROJECTION_S = 0.2;
+
+/** How far a row moves past its reach: less and less the further the finger goes. */
+function rubberband(overshoot: number): number {
+  "worklet";
+  const constant = 0.55;
+  return (overshoot * SWIPE_ACTION_WIDTH * constant) / (SWIPE_ACTION_WIDTH + constant * overshoot);
+}
+
+/**
+ * Where the row sits for a finger `raw` points from where the drag caught
+ * it. Toward a side with actions it follows 1:1, out to its own width; toward
+ * a side with none, and past its width, it meets growing resistance.
+ */
+export function swipeRowOffset(raw: number, sides: SwipeSides): number {
+  "worklet";
+  const reveal = raw >= 0 ? sides.leading : sides.trailing;
+  const reach = reveal > 0 ? sides.width : 0;
+  const distance = Math.abs(raw);
+  if (distance <= reach) return raw;
+  return Math.sign(raw) * (reach + rubberband(distance - reach));
+}
+
+/** How far the row must travel for a full swipe to commit the first action: half the row, and always past the revealed buttons. */
+export function swipeFullAt(reveal: number, width: number): number {
+  "worklet";
+  return Math.max(reveal + SWIPE_ACTION_WIDTH, width / 2);
+}
+
+/** The side whose first action a release here would commit (the full swipe is armed), or `null`. */
+export function swipeRowArmed(x: number, sides: SwipeSides): SwipeSide | null {
+  "worklet";
+  const side: SwipeSide = x >= 0 ? "leading" : "trailing";
+  const reveal = sides[side];
+  if (reveal === 0 || Math.abs(x) < swipeFullAt(reveal, sides.width)) return null;
+  return side;
+}
+
+export type SwipeSettle = { kind: "close" } | { kind: "open"; side: SwipeSide } | { kind: "commit"; side: SwipeSide };
+
+/**
+ * Where a released row goes, from where it is (`x`) carried on by its speed
+ * (`vx`): past the full-swipe point, with its buttons already in view, it
+ * commits the first action; past half its buttons it opens; else it closes.
+ * A flick the other way closes it however far it was.
+ */
+export function swipeRowSettle(x: number, vx: number, sides: SwipeSides): SwipeSettle {
+  "worklet";
+  if (x === 0) return { kind: "close" };
+  const side: SwipeSide = x > 0 ? "leading" : "trailing";
+  const reveal = sides[side];
+  if (reveal === 0) return { kind: "close" };
+  // The projected travel toward this side: negative after a flick back past rest.
+  const reach = Math.sign(x) * (x + vx * PROJECTION_S);
+  if (Math.abs(x) > reveal && reach >= swipeFullAt(reveal, sides.width)) return { kind: "commit", side };
+  if (reach > reveal / 2) return { kind: "open", side };
+  return { kind: "close" };
+}
+
+/** A row that can be closed from outside: the open row closes when another opens, a list scrolls or a row is tapped. */
+export type SwipeRowHandle = { close: () => void };
+
+let openRow: SwipeRowHandle | null = null;
+
+/** Marks `row` as the open row, closing the one open before: one row is open at a time. */
+export function markSwipeRowOpen(row: SwipeRowHandle) {
+  if (openRow && openRow !== row) openRow.close();
+  openRow = row;
+}
+
+/** Forgets `row` once it has closed itself. */
+export function markSwipeRowClosed(row: SwipeRowHandle) {
+  if (openRow === row) openRow = null;
+}
+
+/** Whether a row is open. A touch on any row then only closes it. */
+export function isSwipeRowOpen(): boolean {
+  return openRow !== null;
+}
+
+/** Closes the open row, if any. Pass it to a list's `onScrollBeginDrag`, so a scroll closes the row. */
+export function closeSwipeRows() {
+  const row = openRow;
+  openRow = null;
+  row?.close();
+}
+
+/**
+ * The row's actions for VoiceOver and TalkBack, which cannot swipe a row:
+ * spread on the row's main pressable, so the actions rotor (iOS) or the
+ * actions menu (Android) offers each one, with its label.
+ */
+export function swipeActionsAccessibility(actions: readonly SwipeAction[]): {
+  accessibilityActions: { name: string; label: string }[];
+  onAccessibilityAction: (event: { nativeEvent: { actionName: string } }) => void;
+} {
+  return {
+    accessibilityActions: actions.map((action) => ({ name: action.key, label: action.label })),
+    onAccessibilityAction: (event) => {
+      void actions.find((action) => action.key === event.nativeEvent.actionName)?.onPress();
+    },
+  };
+}

package/src/tabBarRoutes.ts

@@ -23,6 +23,14 @@ export type FloatingTabOptions = {
   href?: string | null;
   /** Only `display: "none"` is read: it hides the tab, as in React Navigation's own bar. */
   tabBarItemStyle?: StyleProp<ViewStyle>;
+  /**
+   * Only `display: "none"` is read: on the focused route it hides the whole
+   * bar, as in React Navigation's own bar (for example while a screen is in
+   * select mode and shows its `BulkActionBar` in the bar's place). Typed
+   * loosely: React Navigation's own type allows animated styles, any of
+   * which is an object or a falsy value.
+   */
+  tabBarStyle?: object | false | "" | null;
 };
 
 /** The `display` a style resolves to: in an array the last one set wins, as in `StyleSheet.flatten`. */
@@ -50,3 +58,13 @@ export function isTabBarRouteVisible(
 ): options is FloatingTabOptions {
   return options !== undefined && options.href !== null && displayOf(options.tabBarItemStyle) !== "none";
 }
+
+/**
+ * Whether `FloatingTabBar` hides itself: the focused route's `tabBarStyle`
+ * resolves to `display: "none"`, the React Navigation way to hide the bar
+ * from a screen (`navigation.setOptions`, or Expo Router's `<Tabs.Screen
+ * options>` inside the screen).
+ */
+export function isTabBarHidden(options: FloatingTabOptions | undefined): boolean {
+  return displayOf(options?.tabBarStyle) === "none";
+}

package/src/tabIndicator.ts

@@ -0,0 +1,71 @@
+import { cssInterop } from "nativewind";
+import { useState } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import Animated, { interpolate, interpolateColor, useAnimatedStyle, type SharedValue } from "react-native-reanimated";
+
+// The tab labels are `Animated.Text`s (their colour follows `progress`).
+// NativeWind maps `className` only for components it knows, so it is told
+// about this one, or the labels lose their font and size classes.
+cssInterop(Animated.Text, { className: "style" });
+
+/** A tab's box in its row, from its layout. */
+export type TabBox = { x: number; y: number; width: number; height: number };
+
+/**
+ * The selected fill of a tab row linked to a `Pager`'s `progress` (`PillTabs`,
+ * `TabsList`): one indicator that slides with the pages between the measured
+ * tabs. The tabs sit on one line, so it moves on x and width only; its top
+ * and height are the first tab's. Until every tab has reported its layout,
+ * `measured` is false and each tab paints its own fill, so the first frame
+ * already shows the selection. `boxes` is every tab's box once all are
+ * measured (with or without `progress`), else empty.
+ */
+export function useTabIndicator(progress: SharedValue<number> | undefined, count: number) {
+  // Each tab's box, measured on layout (not per frame).
+  const [layouts, setLayouts] = useState<ReadonlyArray<TabBox | undefined>>([]);
+  const found = layouts.slice(0, count).filter((box) => box !== undefined);
+  const boxes = found.length === count ? found : [];
+  const measured = progress !== undefined && boxes.length > 0;
+  const style = useAnimatedStyle(() => {
+    const first = boxes[0];
+    if (!progress || !measured || !first) return { opacity: 0 };
+    const pages = boxes.map((_, index) => index);
+    const at = (pick: (box: TabBox) => number) =>
+      boxes.length === 1 ? pick(first) : interpolate(progress.get(), pages, boxes.map(pick), "clamp");
+    return {
+      opacity: 1,
+      top: first.y,
+      height: first.height,
+      width: at((box) => box.width),
+      transform: [{ translateX: at((box) => box.x) }],
+    };
+  });
+  /** The `onLayout` of tab `index`. */
+  const onLayout = (index: number) => (event: LayoutChangeEvent) => {
+    const box = event.nativeEvent.layout;
+    setLayouts((current) => {
+      const next = [...current];
+      next[index] = box;
+      return next;
+    });
+  };
+  return { measured, style, boxes, onLayout };
+}
+
+/**
+ * A tab label's colour. With `progress` it blends from `muted` to `selected`
+ * as the pages reach tab `index`, so the label turns with the sliding fill
+ * under a swipe, not when the swipe settles. Without it, `fallback`.
+ */
+export function useTabLabelStyle(
+  progress: SharedValue<number> | undefined,
+  index: number,
+  colors: { selected: string; muted: string },
+  fallback: string,
+) {
+  const { selected, muted } = colors;
+  return useAnimatedStyle(() => {
+    if (!progress) return { color: fallback };
+    return { color: interpolateColor(progress.get(), [index - 1, index, index + 1], [muted, selected, muted]) };
+  });
+}

package/src/tailwind-preset.cjs

@@ -10,7 +10,8 @@
  *   };
  *
  * It nests `nativewind/preset`, so callers pass only this one. It sets
- * `darkMode`, the Instrument Sans font classes, the colour keys native-ui
+ * `darkMode`, the `font-instrument-sans*` font classes (Instrument Sans unless
+ * `font` names other families), the colour keys native-ui
  * classes use, `borderWidth.hairline` and, when asked, `borderRadius` from
  * `--radius`.
  * App colours, display fonts, keyframes and font-weight plugins stay in the
@@ -34,6 +35,7 @@ const hslVar = (name) => `hsl(var(--${name}))`;
 /** `rgb(var(--name) / <alpha-value>)`, for variables that hold `r g b` channels. Keeps opacity modifiers. */
 const rgbAlpha = (name) => `rgb(var(--${name}) / <alpha-value>)`;
 
+/** The default families of the four font classes, as `fontFamily` in `typography.ts`. */
 const INSTRUMENT_SANS = {
   regular: "InstrumentSans_400Regular",
   medium: "InstrumentSans_500Medium",
@@ -202,9 +204,14 @@ function cssVariablesPlugin(darkMode) {
  * - `injectCssVariables`: write the colour variables and `--radius` from `tokens.ts` and `palette.ts`. Default `false`.
  * - `radiusVariable`: `rounded-lg`, `-md` and `-sm` from `var(--radius)`, as vibot and Velth. Default: on with
  *   `injectCssVariables`, else off, so an app without `--radius` keeps the Tailwind radii.
+ * - `font`: `{ regular, medium, semibold, bold }` family names for `sans` and the four `font-instrument-sans*`
+ *   classes. Keys not given keep Instrument Sans. Pass the same names to `configureTheme({ font })`, which sets
+ *   the JS styles; the app loads the font files.
  */
 function nativeUiPreset(options = {}) {
   const darkMode = options.darkMode === "media" ? "media" : "class";
+  const font = { ...INSTRUMENT_SANS };
+  for (const [key, value] of Object.entries(options.font || {})) if (value !== undefined) font[key] = value;
   const inject = options.injectCssVariables === true;
   const color = options.color || (inject ? rgbAlpha : cssVar);
   const radius = options.radiusVariable ?? inject;
@@ -215,11 +222,11 @@ function nativeUiPreset(options = {}) {
       extend: {
         colors: themeColors(color),
         fontFamily: {
-          sans: [INSTRUMENT_SANS.regular],
-          "instrument-sans": [INSTRUMENT_SANS.regular],
-          "instrument-sans-medium": [INSTRUMENT_SANS.medium],
-          "instrument-sans-semibold": [INSTRUMENT_SANS.semibold],
-          "instrument-sans-bold": [INSTRUMENT_SANS.bold],
+          sans: [font.regular],
+          "instrument-sans": [font.regular],
+          "instrument-sans-medium": [font.medium],
+          "instrument-sans-semibold": [font.semibold],
+          "instrument-sans-bold": [font.bold],
         },
         borderRadius: radius
           ? {

package/src/tailwind-preset.d.cts

@@ -14,6 +14,11 @@ export interface NativeUiPresetOptions {
   injectCssVariables?: boolean;
   /** `rounded-lg`, `-md` and `-sm` from `var(--radius)`. Default: the value of `injectCssVariables`. */
   radiusVariable?: boolean;
+  /**
+   * Family names for `sans` and the four `font-instrument-sans*` classes. Keys not given keep Instrument Sans.
+   * Pass the same names to `configureTheme({ font })`; the app loads the font files.
+   */
+  font?: { regular?: string; medium?: string; semibold?: string; bold?: string };
 }
 
 export interface NativeUiPreset {

package/src/theme.tsx

@@ -1,5 +1,7 @@
-import { createContext, useContext, type ReactNode } from "react";
+import { createContext, useContext, useSyncExternalStore, type ReactNode } from "react";
+import { getThemeVersion, subscribeTheme } from "./configureTheme";
 import { tokens } from "./tokens";
+import { ThemeVersionContext } from "./useScheme";
 
 export const DEFAULT_ACCENT = "#db2777";
 
@@ -22,9 +24,11 @@ export function NativeUiProvider({
   accentColor?: string;
   children: ReactNode;
 }) {
+  // Each `configureTheme` call redraws every part below that reads the scheme.
+  const themeVersion = useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);
   return (
     <NativeUiContext.Provider value={{ largerText, accentColor }}>
-      {children}
+      <ThemeVersionContext.Provider value={themeVersion}>{children}</ThemeVersionContext.Provider>
     </NativeUiContext.Provider>
   );
 }

package/src/toastDrag.ts

@@ -0,0 +1,58 @@
+import { createContext, type ComponentType, type ReactNode } from "react";
+
+/**
+ * The rules of a toast's drag to dismiss, as plain numbers, so they stay
+ * testable apart from the gesture. A toast enters down from the top edge, so
+ * it leaves the same way: up. `dy` is the drag's travel in points (up
+ * negative) and `vy` the finger's speed in points per second (the Gesture
+ * Handler unit). Each rule is a worklet, so the drag runs it on the UI thread.
+ */
+
+/** Vertical travel (pt) before a drag takes the toast: a tap still presses it. */
+export const TOAST_DRAG_ACTIVE_OFFSET_Y = 8;
+
+/** A flick up at this speed (pt/s) dismisses the toast, however short the drag. */
+const FLICK_VELOCITY = 500;
+
+/** How far ahead (s) the release velocity carries the toast when deciding to dismiss it. */
+const PROJECTION_S = 0.2;
+
+/** How far a downward pull may move the toast: it is already as low as it goes. */
+const DOWN_REACH = 24;
+
+/**
+ * Where the toast sits for a drag of `dy`: it follows the finger up 1:1, and
+ * down it meets growing resistance, up to `DOWN_REACH`.
+ */
+export function toastDragOffset(dy: number): number {
+  "worklet";
+  if (dy <= 0) return dy;
+  return DOWN_REACH * (1 - 1 / (1 + dy / (DOWN_REACH * 2)));
+}
+
+/**
+ * Whether a released drag dismisses the toast: a quick flick up, or a drag
+ * whose position, carried on by its speed, passes half the toast's height.
+ * A slow, short drag springs back.
+ */
+export function toastDragDismisses(dy: number, vy: number, height: number): boolean {
+  "worklet";
+  if (dy >= 0) return false;
+  if (vy <= -FLICK_VELOCITY) return true;
+  return dy + Math.min(0, vy) * PROJECTION_S < -height / 2;
+}
+
+export type ToastDragProps = {
+  /** The drag dismissed the toast: it has left the screen. */
+  onDismiss: () => void;
+  /** A finger is on the toast (`true`), or has lifted: the toast's timer pauses meanwhile. */
+  onHoldChange: (held: boolean) => void;
+  children: ReactNode;
+};
+
+/**
+ * The Gesture Handler toast drag, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`; without it a toast closes on a tap only.
+ */
+export const ToastDragContext = createContext<ComponentType<ToastDragProps> | null>(null);

package/src/typography.ts

@@ -1,7 +1,24 @@
+/** The four font families: one per weight, as the app loads them. */
+export type ThemeFonts = { regular: string; medium: string; semibold: string; bold: string };
+
+/**
+ * The font family names JS styles use, Instrument Sans by default (the
+ * Expo Google Fonts names, as `INSTRUMENT_SANS` in tailwind-preset.cjs).
+ * `configureTheme({ font })` writes into this object, and components read it at
+ * render, so do not copy a value out at import.
+ */
+export const fontFamily: ThemeFonts = {
+  regular: "InstrumentSans_400Regular",
+  medium: "InstrumentSans_500Medium",
+  semibold: "InstrumentSans_600SemiBold",
+  bold: "InstrumentSans_700Bold",
+};
+
 /**
- * NativeWind classes for Instrument Sans. The app loads the font files and maps
- * these classes to them (see README). Literal strings, so Tailwind's source
- * scan generates them.
+ * NativeWind classes for the four faces (Instrument Sans by default). The app
+ * loads the font files and maps these classes to them (see README, and the
+ * preset's `font` option). Literal strings, so Tailwind's source scan
+ * generates them.
  */
 export const fontClass = {
   regular: "font-instrument-sans",

package/src/useScheme.ts

@@ -1,6 +1,15 @@
 import { useColorScheme } from "nativewind";
+import { createContext, useContext } from "react";
 
-/** Active colour scheme as a `tokens` / `palette` key. */
+/**
+ * The number of `configureTheme` calls, given by `NativeUiProvider`. A part
+ * that reads it redraws after each call, so a palette set at run time shows
+ * at once, even under a memoised parent.
+ */
+export const ThemeVersionContext = createContext(0);
+
+/** Active colour scheme as a `tokens` / `palette` key. Redraws the caller after each `configureTheme`. */
 export function useScheme(): "light" | "dark" {
+  useContext(ThemeVersionContext);
   return useColorScheme().colorScheme === "dark" ? "dark" : "light";
 }