@vvedantb/native-ui 0.17.1 → 0.17.2

package/README.md

@@ -59,6 +59,20 @@ To hide a tab, give its screen Expo Router's `href: null`. From 0.3.9 `FloatingT
 
 From 0.3.16 the focused tab sits on a rounded pill with the `TabsTrigger` pills outline, with the foreground label and icon; the other tabs are muted. From 0.3.17 the pill fill is `floatingTabPillColors(scheme)`: the muted `palette.default` (`--default`, `#ebebeb`) in light, so it shows on the near-white glass bar, and `palette.tabBarPill` (`#474747`, the kit `--segment`) in dark. `palette.tabBarPill` is its own key, so an app that themes `segment` (the segmented `Tabs` thumb) keeps a pill that shows on the dark glass bar. On the web the `--segment` pill sits on a `--default` track; here the bar is the raised surface, so the light pill takes the track fill. A route's `tabBarActiveTintColor` and `tabBarInactiveTintColor` still override the label and icon colours. The pill is one tab wide, inset 4 from the bar on every side, and slides to a newly focused tab over the web `--tabs-dur` (200 ms) and `--tabs-ease`. It counts only the tabs drawn, and there is none while a hidden route is focused.
 
+## Gallery, Maestro and CI
+
+`apps/native-gallery` (at the repository root) is an Expo SDK 57 app that renders every component from every entry point, with a layering stress screen (a tab bar over glass, with dropdowns, selects, sheets, dialogs and toasts over it) and a keyboard screen (`PromptInput`, inline and stacked). Clerk is mocked there, so it needs no keys. Run it:
+
+```sh
+pnpm install
+pnpm --filter native-gallery start
+# or cd apps/native-gallery && npx expo start
+```
+
+`tests/galleryRegistry.test.ts` fails when a React component export has no entry in `apps/native-gallery/src/galleryRegistry.ts`. Maestro flows in `apps/native-gallery/.maestro/` drive the dropdown, composer, sheets and select. The `native-ui-gallery-android` GitHub Actions job builds the gallery, boots an API 34 emulator and runs them for pull requests that touch this package or the gallery. A new or changed component needs a gallery entry, a Maestro flow and a hand test on an Android emulator.
+
+The `Select` note stays: mount one `<PortalHost />` from `@rn-primitives/portal` at the app root, outside any `Modal`. The gallery does so in `app/_layout.tsx`.
+
 ## Entry points
 
 The root entry exports everything. It still imports `BottomSheetContainer` and `DateTimeField`, so Metro resolves `@gorhom/bottom-sheet`, `@react-native-community/datetimepicker` and `dayjs` for any import from it. Apps without those peers, such as V Store, should import from the smaller entries below. Between them, they export every name the root exports.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",

package/src/AmbientBackground.tsx

@@ -33,7 +33,7 @@ export function AmbientBackground({
         <View
           pointerEvents="none"
           style={{
-            ...StyleSheet.absoluteFillObject,
+            ...StyleSheet.absoluteFill,
             backgroundColor: tokens.color.background[scheme],
           }}
         />

package/src/BottomSheetContainer.tsx

@@ -1,18 +1,76 @@
-import {
+import BottomSheet, {
   BottomSheetBackdrop,
-  BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
-import { View, Text, TouchableOpacity } from "react-native";
-import { useRef, useEffect, useCallback, JSX } from "react";
+import type { BottomSheetDefaultBackdropProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types";
+import { IconX } from "@tabler/icons-react-native";
+import React, { useCallback } from "react";
+import {
+  Platform,
+  Text,
+  TouchableOpacity,
+  View,
+  type ViewProps,
+} from "react-native";
 import { Colors } from "./colors";
 import { textStyle, typeStyle } from "./controlStyles";
-import { IconX } from "@tabler/icons-react-native";
-import { BottomSheetDefaultBackdropProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types";
+import { floatingSolidFill } from "./floating";
 import { GlassSheetBackground } from "./LiquidGlass";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
+// One snap point, set explicitly. With dynamic sizing the sheet can measure to
+// height 0 on Android and never appear.
+const SNAP_POINTS = ["40%"];
+const SHEET_RADIUS = 20;
+
+/**
+ * Opaque sheet chrome for Android. The glass background needs a measured blur
+ * target, which is not reliable once an RN `Modal` has been dismissed.
+ */
+function SolidSheetBackground({
+  style,
+  pointerEvents,
+}: {
+  style?: ViewProps["style"];
+  pointerEvents?: ViewProps["pointerEvents"];
+}) {
+  const scheme = useScheme();
+  return (
+    <View
+      pointerEvents={pointerEvents}
+      style={[
+        style,
+        {
+          backgroundColor: floatingSolidFill[scheme],
+          borderTopLeftRadius: SHEET_RADIUS,
+          borderTopRightRadius: SHEET_RADIUS,
+        },
+      ]}
+    />
+  );
+}
+
+function SheetBackdrop(props: BottomSheetDefaultBackdropProps) {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      opacity={0.5}
+    />
+  );
+}
+
+/**
+ * A controlled bottom sheet over the screen, built on gorhom's default-export
+ * `BottomSheet` (the named `BottomSheet` export is undefined).
+ *
+ * It renders nothing while `visible` is false. A closed gorhom sheet still lays
+ * out an absolute-fill host that can cover the triggers beneath it, and
+ * `BottomSheetModal.present()` did nothing after an RN `Modal` had been
+ * dismissed on Android.
+ */
 export function BottomSheetContainer({
   visible,
   onClose,
@@ -26,53 +84,43 @@ export function BottomSheetContainer({
   children: React.ReactNode;
   closeTestID?: string;
 }) {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const largerText = useLargerText();
-  const colorScheme = useScheme();
-
-  useEffect(() => {
-    if (visible) {
-      bottomSheetModalRef.current?.present();
-    } else {
-      bottomSheetModalRef.current?.dismiss();
-    }
-  }, [visible]);
-
+  const isDark = useScheme() === "dark";
   const renderBackdrop = useCallback(
-    (props: JSX.IntrinsicAttributes & BottomSheetDefaultBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        opacity={0.5}
-      />
-    ),
+    (props: BottomSheetDefaultBackdropProps) => <SheetBackdrop {...props} />,
     [],
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
+    <BottomSheet
+      index={0}
+      snapPoints={SNAP_POINTS}
+      enableDynamicSizing={false}
+      enablePanDownToClose
+      enableContentPanningGesture={false}
+      enableHandlePanningGesture
+      keyboardBehavior="interactive"
+      onClose={onClose}
       backdropComponent={renderBackdrop}
-      onDismiss={onClose}
-      backgroundComponent={GlassSheetBackground}
+      backgroundComponent={
+        Platform.OS === "android" ? SolidSheetBackground : GlassSheetBackground
+      }
       handleIndicatorStyle={{
-        backgroundColor:
-          colorScheme === "dark" ? Colors.white : Colors.neutral[800],
+        backgroundColor: isDark ? Colors.white : Colors.neutral[800],
       }}
-      enableContentPanningGesture={false}
-      enableHandlePanningGesture={true}
-      keyboardBehavior="interactive"
     >
-      <BottomSheetView className="p-5 pb-12">
+      {/* Padding is a style, not a NativeWind class: `BottomSheetView` does not
+          always apply `className`, and an unpadded sheet can measure too small. */}
+      <BottomSheetView style={{ padding: 20, paddingBottom: 48 }}>
         <View className="mb-4 flex-row items-center justify-between gap-3">
           <Text
             accessibilityRole="header"
             className={`${largerText ? "text-2xl" : "text-xl"} flex-1 font-instrument-sans-semibold`}
-            style={[
-              textStyle("foreground", colorScheme === "dark" ? "dark" : "light"),
-              typeStyle("semibold"),
-            ]}
+            style={[textStyle("foreground", isDark ? "dark" : "light"), typeStyle("semibold")]}
           >
             {title}
           </Text>
@@ -80,19 +128,16 @@ export function BottomSheetContainer({
             testID={closeTestID}
             accessibilityRole="button"
             accessibilityLabel="Close"
-            onPress={() => bottomSheetModalRef.current?.dismiss()}
+            onPress={onClose}
             className="-mr-2 h-12 w-12 items-center justify-center"
             hitSlop={8}
             activeOpacity={0.7}
           >
-            <IconX
-              size={largerText ? 32 : 28}
-              color={colorScheme === "dark" ? "white" : "black"}
-            />
+            <IconX size={largerText ? 32 : 28} color={isDark ? "white" : "black"} />
           </TouchableOpacity>
         </View>
         {children}
       </BottomSheetView>
-    </BottomSheetModal>
+    </BottomSheet>
   );
 }

package/src/DropdownMenu.tsx

@@ -28,7 +28,7 @@ import { useControllableState } from "./primitives/use-controllable-state";
 /**
  * Sizes from the web menu classes (`_menu-classes.ts`): content `min-w-[12rem]
  * p-1.5 rounded-lg`, `sideOffset` 4 and `collisionPadding` 8; items `px-2.5
- * py-2 rounded-menu-item` (8) with a 16 icon `gap-2`; radio items `pl-8` with
+ * py-3 rounded-menu-item` (8) with a 16 icon `gap-2`; radio items `pl-8` with
  * the check at `left-2.5`; the label `px-2.5 py-1.5`; the separator `-mx-1.5
  * my-1 h-px`. Items are at least 48 high, a phone menu row (the web
  * `max-sm:min-h-10` is 40).
@@ -42,7 +42,7 @@ export const DROPDOWN_MENU = {
   itemHeight: 48,
   itemRadius: 8,
   itemPaddingX: 10,
-  itemPaddingY: 8,
+  itemPaddingY: 12,
   itemGap: 8,
   indicatorInset: 32,
   indicatorLeft: 10,

package/src/ai/prompt-input.tsx

@@ -394,6 +394,7 @@ export function PromptInput({
               </View>
             ) : null}
             <FieldInput
+              testID={testID ? `${testID}-input` : undefined}
               nativeID={COMPOSER_INPUT_ID}
               multiline
               numberOfLines={ONE_ROW}
@@ -440,6 +441,7 @@ export function PromptInput({
           {header ? <View className="flex-row flex-wrap gap-1 px-2 pt-2">{header}</View> : null}
           {/* The `Textarea` field without its `numberOfLines` (default 4), which on Android sets the line count: this one starts at one line and grows. */}
           <FieldInput
+            testID={testID ? `${testID}-input` : undefined}
             nativeID={COMPOSER_INPUT_ID}
             multiline
             numberOfLines={ONE_ROW}

package/src/primitives/select-host.tsx

@@ -0,0 +1,55 @@
+import * as SelectPrimitive from "@rn-primitives/select";
+import * as React from "react";
+import { Modal, Platform, View } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
+import { useReduceMotion } from "../useReduceMotion";
+
+/**
+ * Where `SelectContent` draws its options.
+ *
+ * - Android: a transparent RN `Modal` with a full-size `box-none` host, as
+ *   `DropdownMenuContent` and `OverlayModal` use. The Modal is its own window,
+ *   so options sit above an absolute tab bar or glass layer. `SelectContent`
+ *   renders this host without a Portal, because a Modal inside a portal mounts
+ *   empty. With no Portal there is no `open` gate from the primitive, so the
+ *   host mounts the Modal only while the Select is open. Android back closes it.
+ * - iOS: `FullWindowOverlay`, which sits above native navigation chrome.
+ * - Web: no wrapper. Radix owns the layering.
+ *
+ * `Platform.OS` is read at render, not at import, so a test can switch it.
+ */
+export function SelectHost({ children }: { children: React.ReactNode }) {
+  const { open, onOpenChange, setTriggerPosition, setContentLayout } =
+    SelectPrimitive.useRootContext();
+  const reduceMotion = useReduceMotion();
+
+  if (Platform.OS === "ios") {
+    return <FullWindowOverlay>{children}</FullWindowOverlay>;
+  }
+  if (Platform.OS !== "android") {
+    return <>{children}</>;
+  }
+  if (!open) {
+    return null;
+  }
+
+  const close = () => {
+    setTriggerPosition(null);
+    setContentLayout(null);
+    onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      visible
+      transparent
+      statusBarTranslucent
+      animationType={reduceMotion ? "none" : "fade"}
+      onRequestClose={close}
+    >
+      <View style={{ flex: 1 }} pointerEvents="box-none" testID="SelectContent-host">
+        {children}
+      </View>
+    </Modal>
+  );
+}

package/src/primitives/select.tsx

@@ -5,21 +5,20 @@ import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react-n
 import * as React from "react";
 import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
-import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { NativeOnlyAnimatedView } from "./native-only-animated-view";
+import { SelectHost } from "./select-host";
 import { TextClassContext } from "./text";
 import { LiquidGlass } from "../LiquidGlass";
 import { cn } from "../cn";
 import { textStyle, typeStyle } from "../controlStyles";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
+import { useLargerText } from "../theme";
 
 type Option = SelectPrimitive.Option;
 
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
-const FullWindowOverlay =
-  Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
 
 type SelectValueProps = React.ComponentPropsWithoutRef<
   typeof SelectPrimitive.Value
@@ -85,48 +84,60 @@ const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   SelectContentProps
 >(({ className, children, position = "popper", portalHost, ...props }, ref) => {
-  return (
-    <SelectPrimitive.Portal hostName={portalHost}>
-      <FullWindowOverlay>
-        <SelectPrimitive.Overlay
-          style={Platform.select({ native: StyleSheet.absoluteFill })}
+  const overlayFill = Platform.select({ native: StyleSheet.absoluteFill });
+  const content = (
+    <SelectPrimitive.Overlay style={overlayFill}>
+      <TextClassContext.Provider value="text-popover-foreground">
+        <NativeOnlyAnimatedView
+          entering={FadeIn}
+          exiting={FadeOut}
+          className="z-50"
+          // Content is absolutely positioned, so a bare wrapper has zero height
+          // and UI tests drop its children as invisible. Fill the overlay and
+          // let touches fall through to it.
+          style={overlayFill}
+          pointerEvents={Platform.select({ native: "box-none" })}
         >
-          <TextClassContext.Provider value="text-popover-foreground">
-            <NativeOnlyAnimatedView
-              entering={FadeIn}
-              exiting={FadeOut}
-              className="z-50"
+          <SelectPrimitive.Content
+            ref={ref}
+            position={position}
+            className={cn(
+              "z-50 min-w-[8rem] rounded-lg",
+              Platform.select({
+                native: "p-1",
+                web: "max-h-52 overflow-hidden",
+              }),
+              className,
+            )}
+            {...props}
+          >
+            <LiquidGlass
+              pointerEvents="none"
+              elevated={false}
+              className="absolute inset-0 rounded-lg"
+            />
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+              className={cn("p-1", position === "popper" && "w-full")}
             >
-              <SelectPrimitive.Content
-                ref={ref}
-                position={position}
-                className={cn(
-                  "z-50 min-w-[8rem] rounded-lg",
-                  Platform.select({
-                    native: "p-1",
-                    web: "max-h-52 overflow-hidden",
-                  }),
-                  className,
-                )}
-                {...props}
-              >
-                <LiquidGlass
-                  pointerEvents="none"
-                  elevated={false}
-                  className="absolute inset-0 rounded-lg"
-                />
-                <SelectScrollUpButton />
-                <SelectPrimitive.Viewport
-                  className={cn("p-1", position === "popper" && "w-full")}
-                >
-                  {children}
-                </SelectPrimitive.Viewport>
-                <SelectScrollDownButton />
-              </SelectPrimitive.Content>
-            </NativeOnlyAnimatedView>
-          </TextClassContext.Provider>
-        </SelectPrimitive.Overlay>
-      </FullWindowOverlay>
+              {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+          </SelectPrimitive.Content>
+        </NativeOnlyAnimatedView>
+      </TextClassContext.Provider>
+    </SelectPrimitive.Overlay>
+  );
+
+  // Android: no Portal. A Modal inside a portal mounts empty, so `SelectHost`
+  // renders the Modal directly and gates it on `open`. iOS and web keep the
+  // Portal; `SelectHost` adds the full-window layer on iOS.
+  if (Platform.OS === "android") {
+    return <SelectHost>{content}</SelectHost>;
+  }
+  return (
+    <SelectPrimitive.Portal hostName={portalHost}>
+      <SelectHost>{content}</SelectHost>
     </SelectPrimitive.Portal>
   );
 });
@@ -166,12 +177,15 @@ const SelectItem = React.forwardRef<
   SelectItemProps
 >(({ className, disabled, ...props }, ref) => {
   const scheme = useScheme();
+  const largerText = useLargerText();
   return (
     <SelectPrimitive.Item
       ref={ref}
       disabled={disabled}
       className={cn(
-        "relative flex-row items-center gap-2 rounded-sm py-3 pl-2 pr-8 active:opacity-70",
+        // 44 high (56 with larger text) so a row is a full touch target.
+        "relative min-h-[44px] flex-row items-center gap-2 rounded-sm py-3 pl-2 pr-8 active:opacity-70",
+        largerText && "min-h-[56px]",
         disabled && "opacity-50",
         className,
       )}