@ramonclaudio/create-vexpo 0.1.0 → 0.1.1

package/dist/templates/default/src/components/ui/update-banner.tsx

@@ -0,0 +1,85 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button, Host, Text } from "@expo/ui/swift-ui";
+import {
+  accessibilityHint,
+  accessibilityLabel,
+  buttonStyle,
+  contentShape,
+  disabled as disabledModifier,
+  foregroundStyle,
+  frame,
+  padding,
+  shapes,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { Material } from "@/components/ui/material";
+import { useAppUpdates } from "@/hooks/use-updates";
+import { Spacing, FontSize, TouchTarget } from "@/constants/layout";
+import { Radius } from "@/constants/theme";
+import { ZIndex } from "@/constants/ui";
+import { useColors } from "@/hooks/use-theme";
+import { useDynamicFont } from "@/lib/dynamic-font";
+
+export function UpdateBanner({ testID }: { testID?: string } = {}) {
+  const updates = useAppUpdates();
+  const insets = useSafeAreaInsets();
+  const colors = useColors();
+  const dfont = useDynamicFont();
+
+  const showProgress = updates.isDownloading;
+  const showError = !!updates.downloadError;
+  if (!showProgress && !showError) return null;
+
+  const tint = showError ? (colors.destructive as string) : (colors.primary as string);
+  const fg = showError
+    ? (colors.destructiveForeground as string)
+    : (colors.primaryForeground as string);
+  const pct =
+    showProgress && updates.downloadProgress != null
+      ? ` ${Math.round(updates.downloadProgress * 100)}%`
+      : "";
+  const label = showError ? "Update failed. Tap to retry." : `Updating${pct}`;
+
+  return (
+    <Material
+      accessibilityLiveRegion="polite"
+      accessibilityRole="alert"
+      variant="chrome"
+      tintColor={tint}
+      isInteractive={showError}
+      style={{
+        position: "absolute",
+        bottom: insets.bottom + Spacing.xs,
+        left: Spacing.md,
+        right: Spacing.md,
+        zIndex: ZIndex.updateBanner,
+        borderRadius: Radius.full,
+        overflow: "hidden",
+        alignItems: "center",
+      }}
+    >
+      <Host matchContents>
+        <Button
+          testID="update-banner-retry"
+          modifiers={[
+            buttonStyle("plain"),
+            padding({ vertical: Spacing.sm, horizontal: Spacing.lg }),
+            frame({ minHeight: TouchTarget.min }),
+            contentShape(shapes.rectangle()),
+            disabledModifier(!showError),
+            accessibilityLabel(label),
+            ...(showError ? [accessibilityHint("Re-attempts the update download")] : []),
+          ]}
+          onPress={showError ? () => updates.downloadAndApply() : () => {}}
+        >
+          <Text
+            testID={testID}
+            modifiers={[dfont({ size: FontSize["3xl"], weight: "bold" }), foregroundStyle(fg)]}
+          >
+            {label}
+          </Text>
+        </Button>
+      </Host>
+    </Material>
+  );
+}

package/dist/templates/default/{constants → src/constants}/layout.ts

@@ -60,12 +60,6 @@ export const Breakpoint = {
 export const TAB_BAR_HEIGHT = 80;
 export const TAB_BAR_CLEARANCE = TAB_BAR_HEIGHT + Spacing.lg;
 
-// Single source of truth for prominent action buttons across the auth flow,
-// onboarding, error states, and OTP. Keeps Sign In, Sign Up, Send Reset
-// Code, Reset Password, Verify, Try Again, and Sign in with Apple visually
-// identical: same height, same capsule corner radius, same Geist label
-// size and weight. Color comes from the shadcn palette (`primary` /
-// `primaryForeground`), never hardcoded.
 export const Button = {
   height: 50,
   cornerRadius: 25,

package/dist/templates/default/{constants → src/constants}/theme.ts

@@ -1,18 +1,16 @@
+// SDK 56 bans application-code imports from @react-navigation/* in favor of
+// the expo-router re-exports. Theme types come from expo-router/react-navigation,
+// DefaultTheme from expo-router itself. Don't add @react-navigation/native back.
 import { DefaultTheme as RNDefaultTheme } from "expo-router";
 import type { Theme as RNTheme } from "expo-router/react-navigation";
 import { DynamicColorIOS } from "react-native";
 
-import { FontFamily } from "@/constants/layout";
-
 // `DynamicColorIOS` returns an `OpaqueColorValue`. React Native's StyleSheet
 // processor resolves it natively, but several @expo/ui props and our own
 // `as string` call-sites expect a string. The runtime payload behaves like
 // any other ColorValue for RN, so we cast at the boundary instead of
 // littering every call-site with `as unknown as string`.
 
-// Shadcn `b1VlJDbW` preset (luma + neutral + Geist + Hugeicons + radius default).
-// Source: shadcn-ui/ui apps/v4/registry/themes.ts, "neutral" entry.
-// OKLCH values converted to sRGB hex via the standard Björn Ottosson matrix.
 // Each token carries a light + dark variant plus a high-contrast pair for the
 // iOS Increase Contrast accessibility setting (HIG: "If you define a custom
 // color, make sure to supply light and dark variants, and an increased
@@ -26,40 +24,48 @@ type Tone = {
 
 const tone = (t: Tone): string => DynamicColorIOS(t) as unknown as string;
 
-// Shadcn neutral palette in hex. Indexed by Tailwind v4 neutral step.
 const NEUTRAL = {
   white: "#FFFFFF",
   black: "#000000",
-  n50: "#FAFAFA", // oklch(0.985)
-  n100: "#F5F5F5", // oklch(0.97)
-  n150: "#EBEBEB", // contrast bump for n100
-  n200: "#E5E5E5", // oklch(0.922)
-  n300: "#D4D4D4", // oklch(0.87)
-  n400: "#A1A1A1", // oklch(0.708)
-  n500: "#737373", // oklch(0.556)
-  n600: "#525252", // oklch(0.439)
-  n700: "#404040", // oklch(0.371)
-  n800: "#262626", // oklch(0.269)
-  n850: "#1C1C1C", // contrast bump for n900 in dark mode
-  n900: "#171717", // oklch(0.205)
-  n950: "#0A0A0A", // oklch(0.145)
+  n50: "#FAFAFA",
+  n100: "#F5F5F5",
+  n150: "#EBEBEB",
+  n200: "#E5E5E5",
+  n300: "#D4D4D4",
+  n400: "#A1A1A1",
+  n500: "#737373",
+  n600: "#525252",
+  n700: "#404040",
+  n800: "#262626",
+  n850: "#1C1C1C",
+  n900: "#171717",
+  n950: "#0A0A0A",
 } as const;
 
 const DESTRUCTIVE = {
-  light: "#E7000B", // oklch(0.577 0.245 27.325)
-  dark: "#FF6467", // oklch(0.704 0.191 22.216)
-  hcLight: "#B30009",
+  // Light darkened from #E7000B to clear WCAG AA (4.5:1) for sub-17pt text on
+  // the muted (n100) capsule fill, not just on the white page background.
+  light: "#B30009",
+  dark: "#FF6467",
+  hcLight: "#990007",
   hcDark: "#FFA0A2",
 } as const;
 
+const WARNING = {
+  light: "#B45309",
+  dark: "#F59E0B",
+  hcLight: "#92400E",
+  hcDark: "#FCD34D",
+} as const;
+
 // shadcn dark `border` is `oklch(1 0 0 / 10%)`, `input` is `15%`. These need
 // the alpha to hover over translucent layers. iOS DynamicColorIOS accepts
 // 8-digit hex, so we encode RGBA inline.
 const ALPHA_DARK = {
-  border: "#FFFFFF1A", // 10%
-  borderHC: "#FFFFFF40", // ~25% bump for high contrast
-  input: "#FFFFFF26", // 15%
-  inputHC: "#FFFFFF59", // ~35% bump
+  border: "#FFFFFF1A",
+  borderHC: "#FFFFFF40",
+  input: "#FFFFFF26",
+  inputHC: "#FFFFFF59",
 } as const;
 
 const t = {
@@ -130,9 +136,11 @@ const t = {
     highContrastDark: NEUTRAL.n850,
   }),
   mutedForeground: tone({
-    light: NEUTRAL.n500,
+    // n500 -> n600 so secondary text clears 4.5:1 on the muted card by default,
+    // not only under Increase Contrast.
+    light: NEUTRAL.n600,
     dark: NEUTRAL.n400,
-    highContrastLight: NEUTRAL.n600,
+    highContrastLight: NEUTRAL.n700,
     highContrastDark: NEUTRAL.n300,
   }),
   accent: tone({
@@ -217,7 +225,7 @@ const t = {
   }),
   sidebarPrimary: tone({
     light: NEUTRAL.n900,
-    dark: "#1447E6", // oklch(0.488 0.243 264.376), shadcn dark sidebar accent
+    dark: "#1447E6",
     highContrastLight: NEUTRAL.black,
     highContrastDark: "#3D6FFA",
   }),
@@ -252,8 +260,6 @@ const t = {
     highContrastDark: NEUTRAL.n400,
   }),
 
-  // Translucent fills. Same hue as primary, layered for surface tinting,
-  // press states, focus glows.
   primaryFill: tone({
     light: "rgba(23,23,23,0.06)",
     dark: "rgba(229,229,229,0.10)",
@@ -292,23 +298,14 @@ const t = {
   }),
 } as const;
 
-// Shadcn neutral tokens plus the handful of aliases the app actually
-// references. Add an entry here the first time you need it. don't ship
-// dead palette rows.
 export const Colors = {
   ...t,
 
-  // Separator is a fork of the border token so navigation chrome can swap
-  // it independently without touching shadcn `border`.
   separator: t.border,
 
-  // Tab bar inactive/active states. Mapped to muted-foreground / primary
-  // so the bar reads as part of the navigation chrome.
   tabIconDefault: t.mutedForeground,
   tabIconSelected: t.primary,
 
-  // Tertiary label (third-rank caption text) sits between muted and
-  // background. too faint for body copy, dark enough to read.
   tertiaryLabel: tone({
     light: NEUTRAL.n400,
     dark: NEUTRAL.n500,
@@ -316,7 +313,6 @@ export const Colors = {
     highContrastDark: NEUTRAL.n400,
   }),
 
-  // Inverse of destructive (white text on destructive fill).
   destructiveForeground: tone({
     light: NEUTRAL.white,
     dark: NEUTRAL.n900,
@@ -324,14 +320,21 @@ export const Colors = {
     highContrastDark: NEUTRAL.black,
   }),
 
-  // Status green for "available" / "completed" markers (HIG-aligned, not
-  // shadcn. shadcn doesn't define a success token).
   success: tone({
-    light: "#16A34A",
+    // Light darkened from #16A34A (~3.3:1 on white) to clear WCAG AA for the
+    // sub-17pt success copy in SuccessText and the username-available row.
+    light: "#15803D",
     dark: "#22C55E",
-    highContrastLight: "#15803D",
+    highContrastLight: "#166534",
     highContrastDark: "#4ADE80",
   }),
+
+  warning: tone({
+    light: WARNING.light,
+    dark: WARNING.dark,
+    highContrastLight: WARNING.hcLight,
+    highContrastDark: WARNING.hcDark,
+  }),
 } as const;
 
 export const HeaderTint = Colors.foreground;
@@ -341,9 +344,7 @@ export type ColorPalette = typeof Colors;
 // React Navigation `Theme` consumers (NavigationThemeProvider, header tint,
 // back chevron, screen background) read flat color strings, not
 // DynamicColorIOS values. We export one theme per appearance and pick at
-// the root layout based on `useColorScheme()` so every nav-rendered surface
-// (back chevron, badge, header text) tracks the shadcn neutral palette
-// instead of iOS systemBlue and the React Navigation defaults.
+// the root layout based on `useColorScheme()`.
 export const NavigationLight: RNTheme = {
   dark: false,
   colors: {
@@ -370,14 +371,6 @@ export const NavigationDark: RNTheme = {
   fonts: RNDefaultTheme.fonts,
 };
 
-// shadcn radius scale, --radius = 0.625rem = 10px.
-//   sm  = radius * 0.6  =  6
-//   md  = radius * 0.8  =  8
-//   lg  = radius * 1.0  = 10  (shadcn default)
-//   xl  = radius * 1.4  = 14
-//   2xl = radius * 1.8  = 18
-//   3xl = radius * 2.2  = 22
-//   4xl = radius * 2.6  = 26
 const RADIUS_BASE = 10;
 export const Radius = {
   none: 0,
@@ -391,11 +384,3 @@ export const Radius = {
   "4xl": Math.round(RADIUS_BASE * 2.6),
   full: 9999,
 } as const;
-
-export const Typography = {
-  default: { fontSize: 16, lineHeight: 24, fontFamily: FontFamily.regular },
-  defaultSemiBold: { fontSize: 16, lineHeight: 24, fontFamily: FontFamily.semiBold },
-  title: { fontSize: 30, lineHeight: 38, fontFamily: FontFamily.bold, letterSpacing: -0.5 },
-  subtitle: { fontSize: 20, lineHeight: 26, fontFamily: FontFamily.semiBold },
-  link: { fontSize: 16, lineHeight: 24, fontFamily: FontFamily.regular },
-};

package/dist/templates/default/{constants → src/constants}/ui.ts

@@ -40,6 +40,19 @@ export const Duration = {
   splash: 1000,
 } as const;
 
+// Dynamic Type ceilings for fixed-geometry controls. upstream expo/expo#46007
+// opts the app into native Dynamic Type through the `textStyle` font path, this
+// bounds it where a control can't reflow. `dynamicTypeSize({ max })` from
+// upstream expo/expo#46540 caps growth while still honoring the user's setting.
+export const DynamicType = {
+  // Segmented toggle and the "This device" session badge: small controls that
+  // tolerate one accessibility step, then stop.
+  control: "accessibility1",
+  // The OTP field is tightest: six 24pt monospaced glyphs with kerning(8) in a
+  // capsule that can't wrap, so it caps below the accessibility sizes.
+  otp: "xxLarge",
+} as const;
+
 export const Size = {
   checkbox: 24,
   iconContainer: 40,
@@ -68,10 +81,6 @@ export const Keyboard = {
   verticalOffset: 100,
 } as const;
 
-export const Accessibility = {
-  maxFontSizeMultiplier: 2,
-} as const;
-
 export const EmptyState = {
   paddingVertical: 60,
 } as const;

package/dist/templates/default/src/hooks/use-debounce.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+
+  return debounced;
+}

package/dist/templates/default/src/hooks/use-deep-link.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from "react";
+import { useURL } from "expo-linking";
+import { router, type Href } from "expo-router";
+
+import { authClient } from "@/lib/auth-client";
+import { resolveDeepLink } from "@/lib/deep-link";
+
+/**
+ * Resumes a deep link that arrived BEFORE the user authenticated. Links that
+ * arrive while authenticated are navigated by `+native-intent.tsx` (expo-router
+ * runs `redirectSystemPath` and drives the navigator itself, query included),
+ * so this hook must not re-navigate them or every tap would double-push and
+ * stack a phantom copy of the destination. It handles only the deferred case:
+ * an incoming URL whose navigation the auth guard blocked, replayed once
+ * sign-in completes.
+ */
+export function useDeepLinkHandler() {
+  // See note in app/_layout.tsx: Better Auth session is the canonical signal.
+  // `useConvexAuth` is unreliable due to the bridge's sessionId churn.
+  const { data: session } = authClient.useSession();
+  const isAuthenticated = !!session?.session;
+  const url = useURL();
+  const pendingUrl = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!url) return;
+
+    if (!isAuthenticated) {
+      // native-intent's navigation to a protected route was blocked by the
+      // auth guard; remember the link so we can resume it after sign-in.
+      pendingUrl.current = url;
+      return;
+    }
+
+    // Authenticated. Act only on a link that arrived while unauthenticated;
+    // links that arrive while authed are already navigated by native-intent.
+    if (pendingUrl.current !== url) return;
+    pendingUrl.current = null;
+
+    let resolved;
+    try {
+      resolved = resolveDeepLink(url);
+    } catch (err) {
+      if (__DEV__) console.warn("[DeepLink] parse failed:", err);
+      return;
+    }
+
+    if (!resolved.href) return;
+    router.push({ pathname: resolved.href, params: resolved.params } as Href);
+  }, [isAuthenticated, url]);
+}

package/dist/templates/default/src/hooks/use-delete-account.ts

@@ -0,0 +1,35 @@
+import { useCallback, useState } from "react";
+import * as LocalAuthentication from "expo-local-authentication";
+import { useMutation } from "convex/react";
+
+import { api } from "@/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import { formatError } from "@/components/ui/convex-error";
+import { haptics } from "@/lib/haptics";
+
+// Face ID gate, soft-delete mutation, and sign-out for account deletion, shared
+// by the profile and settings screens. The mutation can reject (rate limit,
+// network, server); on failure the caller surfaces `deleteError` instead of
+// leaving the user on an unchanged screen after confirming a destructive action.
+export function useDeleteAccount() {
+  const deleteAccountMutation = useMutation(api.users.deleteAccount);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  const deleteAccount = useCallback(async () => {
+    haptics.error();
+    const result = await LocalAuthentication.authenticateAsync({
+      promptMessage: "Confirm with Face ID",
+    });
+    if (!result.success) return;
+    try {
+      setDeleteError(null);
+      await deleteAccountMutation();
+      await authClient.signOut();
+    } catch (err) {
+      haptics.error();
+      setDeleteError(formatError(err));
+    }
+  }, [deleteAccountMutation]);
+
+  return { deleteAccount, deleteError };
+}

package/dist/templates/default/src/hooks/use-motion-screen-options.ts

@@ -0,0 +1,13 @@
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+
+export function useMotionScreenOptions<A extends string>(
+  animation: A,
+  animationDuration?: number,
+): {
+  animation: A | "fade";
+  animationDuration: number | undefined;
+} {
+  const reduceMotion = useReducedMotion();
+  if (reduceMotion) return { animation: "fade", animationDuration: 150 };
+  return { animation, animationDuration };
+}

package/dist/templates/default/src/hooks/use-network.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useNetworkState } from "expo-network";
+
+// expo-network's iOS module uses a temporary `NWPathMonitor` for its initial
+// probe (`getNetworkStateAsync`) with a 5s timeout. On simulator and during
+// cold-start the temp monitor sometimes never fires, so the probe returns
+// `isConnected: false` while the device is actually online. The persistent
+// listener corrects it on the next change event, but until then the banner
+// would flash "You're offline" on a working network. Gate the banner on a
+// short settle window so transient probe failures don't surface.
+const OFFLINE_SETTLE_MS = 3000;
+
+export function useNetwork() {
+  const { isConnected, isInternetReachable } = useNetworkState();
+  // On iOS expo-network sets `isInternetReachable === isConnected`; we keep
+  // both checks for cross-platform parity but they collapse to one signal.
+  const probablyOffline = isConnected === false || isInternetReachable === false;
+  const [settledOffline, setSettledOffline] = useState(false);
+
+  useEffect(() => {
+    if (!probablyOffline) {
+      setSettledOffline(false);
+      return;
+    }
+    const id = setTimeout(() => setSettledOffline(true), OFFLINE_SETTLE_MS);
+    return () => clearTimeout(id);
+  }, [probablyOffline]);
+
+  return {
+    isConnected,
+    isInternetReachable,
+    isOffline: settledOffline,
+  };
+}

package/dist/templates/default/{hooks → src/hooks}/use-notifications.ts

@@ -2,10 +2,10 @@ import { useEffect, useRef, useState } from "react";
 import * as Notifications from "expo-notifications";
 import { useConvexAuth } from "convex/react";
 import { useMutation } from "convex/react";
-import { router } from "expo-router";
+import { router, type Href } from "expo-router";
 
 import { api } from "@/convex/_generated/api";
-import { isValidDeepLink } from "@/lib/deep-link";
+import { resolveDeepLink } from "@/lib/deep-link";
 import {
   getExpoPushToken,
   requestPermission,
@@ -18,20 +18,16 @@ interface UseNotificationsOptions {
   onNotificationsDropped?: () => void;
 }
 
-/**
- * If a notification's payload includes a `url` string, route to it after
- * deep-link validation. Add custom action handling (categories, button taps,
- * inline replies) here when your app needs it.
- */
 function handleNotificationResponse(response: Notifications.NotificationResponse) {
   const url = response.notification.request.content.data?.url;
   if (typeof url !== "string") return;
 
-  if (isValidDeepLink(url)) {
-    router.push(url as Parameters<typeof router.push>[0]);
-  } else if (__DEV__) {
-    console.warn("[Notification] Blocked navigation to:", url);
+  const { href, params } = resolveDeepLink(url);
+  if (!href) {
+    if (__DEV__) console.warn("[Notification] Blocked navigation to:", url);
+    return;
   }
+  router.push({ pathname: href, params } as Href);
 }
 
 export function useNotifications(options?: UseNotificationsOptions) {
@@ -40,7 +36,6 @@ export function useNotifications(options?: UseNotificationsOptions) {
   const registered = useRef(false);
   const [expoPushToken, setExpoPushToken] = useState<string | null>(null);
 
-  // Register push token when authenticated
   useEffect(() => {
     if (!isAuthenticated) {
       registered.current = false;
@@ -51,19 +46,37 @@ export function useNotifications(options?: UseNotificationsOptions) {
     registered.current = true;
 
     (async () => {
-      const { granted } = await requestPermission();
-      if (!granted) return;
-
-      const token = await getExpoPushToken();
-      if (!token) return;
-
-      setExpoPushToken(token);
-      await upsertToken({ token, deviceType: "ios" });
+      try {
+        const { granted } = await requestPermission();
+        if (!granted) return;
+
+        const token = await getExpoPushToken();
+        if (!token) return;
+
+        setExpoPushToken(token);
+        await upsertToken({ token, deviceType: "ios" });
+      } catch (e) {
+        // Reset so a transient failure (permission throw, network) retries on
+        // the next render instead of silently dropping push registration for
+        // the session. The early returns above intentionally keep it true.
+        registered.current = false;
+        if (__DEV__) console.warn("[Notification] registration failed:", e);
+      }
     })();
   }, [isAuthenticated, upsertToken]);
 
-  // Event listeners
   useEffect(() => {
+    // Cold-start deep link: the launch tap arrives via the last-response
+    // getter, not the runtime listener below, so handle it once here.
+    // (useLastNotificationResponse would fire for BOTH cold-start and runtime,
+    // double-navigating every runtime tap.)
+    Notifications.getLastNotificationResponseAsync().then((initial) => {
+      if (!initial) return;
+      handleNotificationResponse(initial);
+      options?.onNotificationResponse?.(initial);
+      clearLastNotificationResponse();
+    });
+
     const receivedSub = Notifications.addNotificationReceivedListener((notification) => {
       if (__DEV__) console.log("[Notification] Received:", notification.request.identifier);
       options?.onNotificationReceived?.(notification);
@@ -83,7 +96,11 @@ export function useNotifications(options?: UseNotificationsOptions) {
     const tokenSub = Notifications.addPushTokenListener(async (token) => {
       if (__DEV__) console.log("[Notification] Token rotated:", token.data);
       if (isAuthenticated && typeof token.data === "string") {
-        await upsertToken({ token: token.data, deviceType: "ios" });
+        try {
+          await upsertToken({ token: token.data, deviceType: "ios" });
+        } catch (e) {
+          if (__DEV__) console.warn("[Notification] token upsert failed:", e);
+        }
       }
     });
 
@@ -95,13 +112,5 @@ export function useNotifications(options?: UseNotificationsOptions) {
     };
   }, [isAuthenticated, options, upsertToken]);
 
-  // Cold-start deep linking
-  const lastResponse = Notifications.useLastNotificationResponse();
-  useEffect(() => {
-    if (!lastResponse) return;
-    handleNotificationResponse(lastResponse);
-    clearLastNotificationResponse();
-  }, [lastResponse]);
-
   return { expoPushToken };
 }

package/dist/templates/default/src/hooks/use-reduce-transparency.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+
+/**
+ * Tracks the iOS `Settings → Accessibility → Display & Text Size → Reduce
+ * Transparency` flag. iOS 26 `GlassView` honors the setting natively, but the
+ * iOS 16.4-25 `BlurView` fallback in `<Material>` does not, so the surface
+ * stays translucent for users who explicitly asked for solid backgrounds.
+ *
+ * Consults `AccessibilityInfo.isReduceTransparencyEnabled()` on mount and
+ * keeps the value live via the `reduceTransparencyChanged` event so a runtime
+ * toggle in Settings re-renders consumers without a relaunch.
+ */
+export function useReduceTransparency(): boolean {
+  const [on, setOn] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    AccessibilityInfo.isReduceTransparencyEnabled().then((value) => {
+      if (!cancelled) setOn(value);
+    });
+    const sub = AccessibilityInfo.addEventListener("reduceTransparencyChanged", setOn);
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+
+  return on;
+}

package/dist/templates/default/{hooks → src/hooks}/use-theme.ts

@@ -42,11 +42,6 @@ export function useColors(): ColorPalette {
   return Colors;
 }
 
-// Theme-aware asset selector. Pass the light variant first, dark second.
-// Returns whichever matches the active appearance (which honors the in-app
-// override from `setTheme` in addition to the system setting).
-//
-//   const icon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
 export function useThemedAsset<L, D>(light: L, dark: D): L | D {
   const scheme = useColorScheme();
   return scheme === "dark" ? dark : light;