@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/src/app/+not-found.tsx

@@ -0,0 +1,43 @@
+import { router, Stack } from "expo-router";
+import { Host, VStack, Spacer } from "@expo/ui/swift-ui";
+import { padding, tint } from "@expo/ui/swift-ui/modifiers";
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
+import { useColors } from "@/hooks/use-theme";
+import { FontFamily } from "@/constants/layout";
+
+export default function NotFoundScreen() {
+  const colors = useColors();
+  return (
+    <>
+      <Stack.Header>
+        <Stack.Screen.Title
+          style={{ color: colors.foreground as string, fontFamily: FontFamily.semiBold }}
+        >
+          Lost?
+        </Stack.Screen.Title>
+      </Stack.Header>
+      <Host testID="not-found-screen" style={{ flex: 1 }}>
+        <VStack
+          spacing={20}
+          alignment="center"
+          modifiers={[padding({ horizontal: 24, vertical: 32 }), tint(colors.primary as string)]}
+        >
+          <Spacer />
+          <ContentUnavailable
+            testID="not-found-empty"
+            title="This page doesn't exist"
+            systemImage="questionmark.circle"
+            description="The page you were looking for moved or was never here."
+          />
+          <ProminentButton
+            testID="not-found-home"
+            label="Take me home"
+            onPress={() => router.replace("/")}
+          />
+          <Spacer />
+        </VStack>
+      </Host>
+    </>
+  );
+}

package/dist/templates/default/{app → src/app}/_layout.tsx

@@ -3,7 +3,6 @@ import { Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { Suspense, useEffect } from "react";
-import { View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import "react-native-reanimated";
@@ -15,10 +14,9 @@ import { assetModules } from "@/lib/assets";
 import { useAssets } from "expo-asset";
 import { env } from "@/lib/env";
 import { useColorScheme, useColors } from "@/hooks/use-theme";
-import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { useMotionScreenOptions } from "@/hooks/use-motion-screen-options";
 import { useNotifications } from "@/hooks/use-notifications";
 import { useNavigationTracking } from "@/hooks/use-navigation-tracking";
-import { useDeepLinkHandler } from "@/hooks/use-deep-link";
 import { OfflineBanner } from "@/components/ui/offline-banner";
 import { UpdateBanner } from "@/components/ui/update-banner";
 import { LoadingScreen } from "@/components/ui/loading-screen";
@@ -43,7 +41,7 @@ registerBackgroundTask();
 export default function RootLayout() {
   return (
     <BetterAuthConvexProvider client={convex}>
-      <Suspense fallback={<LoadingScreen />}>
+      <Suspense fallback={<LoadingScreen testID="app-loading" />}>
         <RootNavigator />
       </Suspense>
     </BetterAuthConvexProvider>
@@ -51,50 +49,43 @@ export default function RootLayout() {
 }
 
 function RootNavigator() {
-  // Routing reads Better Auth directly. Convex queries authenticate through
-  // `BetterAuthConvexProvider` (see `lib/convex-auth.tsx` for the why).
-  const { data: session, isPending } = authClient.useSession();
-  const isAuthenticated = !!session?.session;
-  const isLoading = isPending;
+  // Splash gates on both auth resolution and asset load. Auth gating itself
+  // lives in `(app)/_layout.tsx` so `(app)` stays mounted under the auth modal.
+  const { isPending } = authClient.useSession();
   const colorScheme = useColorScheme();
   const colors = useColors();
-  const reduceMotion = useReducedMotion();
-  const [assets] = useAssets(assetModules);
+  const motion = useMotionScreenOptions("default");
+  const [assets, assetError] = useAssets(assetModules);
 
   useNotifications();
   useNavigationTracking();
-  useDeepLinkHandler();
 
   useEffect(() => {
-    if (!isLoading && assets) {
-      SplashScreen.hideAsync();
-    }
-  }, [isLoading, assets]);
+    // Dismiss once auth resolves and assets either load or fail. Gating on
+    // `assets` alone hangs on the native splash forever if a bundled asset
+    // fails, since `useAssets` then returns `[undefined, error]` and never an
+    // asset array.
+    if (assetError && __DEV__) console.warn("[assets] failed to load:", assetError);
+    if (!isPending && (assets || assetError)) SplashScreen.hideAsync();
+  }, [isPending, assets, assetError]);
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={{ flex: 1, backgroundColor: colors.background as string }}>
       <KeyboardProvider>
         <NavigationThemeProvider value={colorScheme === "dark" ? NavigationDark : NavigationLight}>
-          <View style={{ flex: 1, backgroundColor: colors.background as string }}>
-            <Stack
-              screenOptions={{
-                headerShown: false,
-                animation: reduceMotion ? "fade" : "default",
-                animationDuration: reduceMotion ? 150 : undefined,
-              }}
-            >
-              <Stack.Protected guard={!isAuthenticated}>
-                <Stack.Screen name="(auth)" />
-              </Stack.Protected>
-              <Stack.Protected guard={isAuthenticated}>
-                <Stack.Screen name="(app)" />
-              </Stack.Protected>
-              <Stack.Screen name="+not-found" />
-            </Stack>
-            <StatusBar style="auto" />
-            <OfflineBanner />
-            <UpdateBanner />
-          </View>
+          <Stack
+            screenOptions={{
+              ...motion,
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.background as string },
+            }}
+          >
+            <Stack.Screen name="(app)" />
+            <Stack.Screen name="+not-found" />
+          </Stack>
+          <StatusBar style="auto" />
+          <OfflineBanner testID="offline-banner" />
+          <UpdateBanner testID="update-banner" />
         </NavigationThemeProvider>
       </KeyboardProvider>
     </GestureHandlerRootView>

package/dist/templates/default/src/components/auth/apple-button.tsx

@@ -0,0 +1,51 @@
+import { useWindowDimensions } from "react-native";
+import * as AppleAuthentication from "expo-apple-authentication";
+import { VStack, RNHostView } from "@expo/ui/swift-ui";
+import { frame } from "@expo/ui/swift-ui/modifiers";
+
+import { Button as ButtonTokens } from "@/constants/layout";
+import { useColorScheme } from "@/hooks/use-theme";
+
+// Apple sizes `ASAuthorizationAppleIDButton`'s label to the button's frame
+// height, not to Dynamic Type, so unlike the rest of the form it won't grow on
+// its own. Scale the frame with the user's text size so the label keeps up,
+// clamped to [1, MAX_SCALE]: never below the 50pt baseline (HIG minimum size +
+// the 44pt touch target hold at small text, matching the other buttons'
+// `minHeight` floor), and capped on top because the single-line label is
+// width-bound past this point, so a taller button just becomes a slab.
+// `cornerRadius` tracks the height to stay an HIG-allowed pill at any size.
+const MAX_SCALE = 1.6;
+
+export function AppleButton({
+  type,
+  onPress,
+  disabled,
+  testID,
+}: {
+  type: AppleAuthentication.AppleAuthenticationButtonType;
+  onPress: () => void;
+  disabled?: boolean;
+  testID?: string;
+}) {
+  const colorScheme = useColorScheme();
+  const { fontScale } = useWindowDimensions();
+  const height = ButtonTokens.height * Math.min(Math.max(fontScale, 1), MAX_SCALE);
+  return (
+    <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity, height })]}>
+      <RNHostView>
+        <AppleAuthentication.AppleAuthenticationButton
+          testID={testID}
+          buttonType={type}
+          buttonStyle={
+            colorScheme === "dark"
+              ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
+              : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
+          }
+          cornerRadius={height / 2}
+          style={{ width: "100%", height: "100%", opacity: disabled ? 0.5 : 1 }}
+          onPress={disabled ? () => {} : onPress}
+        />
+      </RNHostView>
+    </VStack>
+  );
+}

package/dist/templates/default/{components → src/components}/auth/otp-verification.tsx

@@ -1,11 +1,22 @@
 import { startTransition, useActionState, useState } from "react";
-import { useMutation } from "convex/react";
-import { Host, VStack, HStack, Text, TextField, Button, Image, Spacer } from "@expo/ui/swift-ui";
+import {
+  Host,
+  VStack,
+  HStack,
+  Text,
+  TextField,
+  Button,
+  Image,
+  Spacer,
+  useNativeState,
+} from "@expo/ui/swift-ui";
+import { runOnJS } from "react-native-worklets";
 import {
   foregroundStyle,
   buttonStyle,
   background,
   clipShape,
+  contentShape,
   disabled,
   keyboardType,
   monospacedDigit,
@@ -15,24 +26,28 @@ import {
   submitLabel,
   padding,
   frame,
+  shapes,
+  accessibilityHidden,
   accessibilityLabel,
   accessibilityHint,
+  dynamicTypeSize,
   tint,
+  textContentType,
   textFieldStyle,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
-import { Button as ButtonTokens } from "@/constants/layout";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
+import { Button as ButtonTokens, TouchTarget } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
 
-import { api } from "@/convex/_generated/api";
 import { authClient } from "@/lib/auth-client";
 import { haptics } from "@/lib/haptics";
 import { useColors } from "@/hooks/use-theme";
+import { maskOtp } from "@/lib/masks";
 import { ProminentButton } from "@/components/ui/prominent-button";
 import { ErrorText } from "@/components/ui/status-text";
 import { announce } from "@/lib/a11y";
 
-export type PendingAvatar = { uri: string; mimeType: string };
-
 export type OtpFlow = "verify-email" | "sign-in";
 
 type OtpVerificationProps = {
@@ -46,30 +61,18 @@ type OtpVerificationProps = {
    * returning user in passwordlessly.
    */
   flow?: OtpFlow;
-  /**
-   * Avatar picked during sign-up. Uploaded to Convex storage right after
-   * verifyEmail succeeds and autoSignInAfterVerification mints the session.
-   * Held in the parent's state so it's forgotten if the user backs out.
-   * Ignored when `flow` is "sign-in" (existing accounts already have an
-   * avatar configured from the profile screen).
-   */
-  pendingAvatar?: PendingAvatar | null;
 };
 
 type OtpState = { error?: string; ok?: boolean };
 const initialState: OtpState = {};
 
-export function OtpVerification({
-  email,
-  onBack,
-  flow = "verify-email",
-  pendingAvatar,
-}: OtpVerificationProps) {
+export function OtpVerification({ email, onBack, flow = "verify-email" }: OtpVerificationProps) {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
+  const otpState = useNativeState("");
   const [otp, setOtp] = useState("");
-  const generateAvatarUploadUrl = useMutation(api.users.generateAvatarUploadUrl);
-  const updateAvatar = useMutation(api.users.updateAvatar);
+  const [lastAction, setLastAction] = useState<"verify" | "resend">("verify");
   const isSignIn = flow === "sign-in";
 
   const [verifyState, verify, isVerifying] = useActionState<OtpState, void>(async () => {
@@ -90,29 +93,6 @@ export function OtpVerification({
         return { error: "Invalid or expired code. Please try again." };
       }
 
-      // Upload the avatar picked at sign-up before this component unmounts.
-      // Stack.Protected swaps (auth) -> (app) on the next render once the
-      // session lands, but kicking off the requests here keeps them in flight
-      // server-side regardless of the unmount. Failures are non-fatal: the
-      // user is verified, they can set a photo from the profile screen.
-      if (!isSignIn && pendingAvatar) {
-        try {
-          const uploadUrl = await generateAvatarUploadUrl();
-          const blob = await (await fetch(pendingAvatar.uri)).blob();
-          const upload = await fetch(uploadUrl, {
-            method: "POST",
-            headers: { "Content-Type": pendingAvatar.mimeType },
-            body: blob,
-          });
-          if (upload.ok) {
-            const { storageId } = (await upload.json()) as { storageId: string };
-            await updateAvatar({ storageId: storageId as never });
-          }
-        } catch {
-          // Swallow: verification still succeeded.
-        }
-      }
-
       haptics.success();
       announce(isSignIn ? "Signed in" : "Email verified");
       return { ok: true };
@@ -129,10 +109,17 @@ export function OtpVerification({
   const [resendState, resend, isResending] = useActionState<OtpState, void>(async () => {
     haptics.light();
     try {
-      await authClient.emailOtp.sendVerificationOtp({
+      const response = await authClient.emailOtp.sendVerificationOtp({
         email: email.trim(),
         type: isSignIn ? "sign-in" : "email-verification",
       });
+      // Better Auth surfaces a 429 (the send-verification-otp rate limit) as a
+      // returned error, not a throw, so announcing success unconditionally
+      // would tell the user a code was sent when none was.
+      if (response.error) {
+        haptics.error();
+        return { error: "Failed to send code. Please try again." };
+      }
       haptics.success();
       announce("New verification code sent");
       return { ok: true };
@@ -142,7 +129,19 @@ export function OtpVerification({
     }
   }, initialState);
 
-  const error = verifyState.error ?? resendState.error;
+  const runVerify = () => {
+    setLastAction("verify");
+    startTransition(() => verify());
+  };
+  const runResend = () => {
+    setLastAction("resend");
+    startTransition(() => resend());
+  };
+
+  // Show the error from the action the user last ran. A plain
+  // `verifyState.error ?? resendState.error` keeps a stale verify error on
+  // screen after a successful resend, since resend never clears verifyState.
+  const error = lastAction === "resend" ? resendState.error : verifyState.error;
 
   return (
     <Host style={{ flex: 1, backgroundColor: colors.background }}>
@@ -155,8 +154,9 @@ export function OtpVerification({
 
         <Image
           systemName={isSignIn ? "lock.shield" : "envelope.badge"}
-          size={56}
+          size={symbolSize(56)}
           color={colors.primary}
+          modifiers={[accessibilityHidden(true)]}
         />
 
         <Text modifiers={[dfont({ size: 28, weight: "bold" }), multilineTextAlignment("center")]}>
@@ -173,28 +173,41 @@ export function OtpVerification({
           >
             Enter the 6-digit code sent to
           </Text>
-          <Text modifiers={[dfont({ size: 15, weight: "semibold" })]}>{email}</Text>
+          <Text testID="otp-email-value" modifiers={[dfont({ size: 15, weight: "semibold" })]}>
+            {email}
+          </Text>
         </VStack>
 
-        {error && <ErrorText>{error}</ErrorText>}
+        {error && <ErrorText testID="otp-error">{error}</ErrorText>}
 
         <VStack spacing={12} modifiers={[frame({ maxWidth: Infinity })]}>
           <TextField
+            testID="otp-field"
+            text={otpState}
             placeholder="000000"
-            onTextChange={(text) => setOtp(text.replace(/\D/g, "").slice(0, 6))}
+            onTextChange={(text) => {
+              "worklet";
+              const digits = maskOtp(text);
+              otpState.value = digits;
+              runOnJS(setOtp)(digits);
+            }}
             autoFocus
             modifiers={[
               textFieldStyle("plain"),
               padding({ horizontal: 16 }),
-              frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+              frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
               background(colors.muted as string),
               clipShape("capsule"),
               dfont({ size: 24, design: "monospaced" }),
               monospacedDigit(),
               kerning(8),
               multilineTextAlignment("center"),
+              // upstream expo/expo#46540: cap Dynamic Type on the fixed-height
+              // capsule so six 24pt monospaced glyphs can't scale past the box.
+              dynamicTypeSize({ max: DynamicType.otp }),
               keyboardType("numeric"),
-              onSubmit(() => startTransition(() => verify())),
+              textContentType("oneTimeCode"),
+              onSubmit(runVerify),
               submitLabel("done"),
               accessibilityLabel("Verification code"),
               accessibilityHint("Enter the 6 digit code sent to your email"),
@@ -202,6 +215,7 @@ export function OtpVerification({
           />
 
           <ProminentButton
+            testID="otp-verify"
             label={
               isVerifying
                 ? isSignIn
@@ -211,17 +225,18 @@ export function OtpVerification({
                   ? "Sign in"
                   : "Verify"
             }
-            onPress={() => startTransition(() => verify())}
+            onPress={runVerify}
             disabled={isVerifying || otp.length !== 6}
           />
 
           <Button
-            modifiers={[buttonStyle("plain"), frame({ maxWidth: 10000 }), disabled(isResending)]}
-            onPress={() => startTransition(() => resend())}
+            testID="otp-resend"
+            modifiers={[buttonStyle("plain"), frame({ maxWidth: Infinity }), disabled(isResending)]}
+            onPress={runResend}
           >
             <Text
               modifiers={[
-                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
                 multilineTextAlignment("center"),
                 dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.secondaryFontWeight }),
                 foregroundStyle(colors.primary as string),
@@ -239,8 +254,14 @@ export function OtpVerification({
             Wrong email?
           </Text>
           <Button
+            testID="otp-back"
             label="Go back"
-            modifiers={[buttonStyle("plain"), dfont({ size: 14, weight: "semibold" })]}
+            modifiers={[
+              buttonStyle("plain"),
+              dfont({ size: 14, weight: "semibold" }),
+              frame({ minHeight: TouchTarget.min }),
+              contentShape(shapes.rectangle()),
+            ]}
             onPress={() => {
               haptics.light();
               onBack();

package/dist/templates/default/{components → src/components}/auth/password-field.tsx

@@ -1,17 +1,30 @@
-import { type ComponentProps, useState } from "react";
-import { Button, HStack, Image, SecureField, TextField, useNativeState } from "@expo/ui/swift-ui";
+import { useEffect, useRef, useState } from "react";
 import {
+  Button,
+  HStack,
+  Image,
+  SecureField,
+  type SecureFieldRef,
+  TextField,
+  type TextFieldRef,
+  useNativeState,
+} from "@expo/ui/swift-ui";
+import {
+  accessibilityHidden,
   accessibilityHint,
   accessibilityLabel,
   autocorrectionDisabled,
   background,
   buttonStyle,
   clipShape,
+  contentShape,
   disabled as disabledMod,
   frame,
   onSubmit as onSubmitMod,
   padding,
+  shapes,
   submitLabel,
+  textContentType,
   textFieldStyle,
   textInputAutocapitalization,
 } from "@expo/ui/swift-ui/modifiers";
@@ -19,47 +32,73 @@ import {
 import { Button as ButtonTokens } from "@/constants/layout";
 import { useColors } from "@/hooks/use-theme";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { haptics } from "@/lib/haptics";
 
-type ObservableTextState = NonNullable<ComponentProps<typeof TextField>["text"]>;
 type SubmitLabel = "next" | "done" | "send" | "go" | "search" | "join" | "route" | "continue";
+type ContentType = "password" | "newPassword";
 
 type Props = {
-  text?: ObservableTextState;
   placeholder?: string;
   onTextChange: (next: string) => void;
   onSubmit?: () => void;
   submitLabelType?: SubmitLabel;
+  /**
+   * iOS text content type. `"password"` (default) hooks into keychain
+   * autofill for existing credentials. `"newPassword"` triggers Strong
+   * Password generation and saves the new credential on success. Use it
+   * for the sign-up and reset flows.
+   */
+  contentType?: ContentType;
   disabled?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  testID?: string;
 };
 
 /**
  * Password input with an inline eye toggle to reveal what was typed.
  *
- * The toggle swaps between SecureField (masked) and TextField (visible). Both
- * are bound to the same `useNativeState`, so the native value persists across
- * the swap. without it, React unmounts one component and mounts the other
- * and the new field starts empty. If the parent passes its own ObservableState
- * via `text`, that's used instead (e.g. profile.tsx clears the field after
- * submit by resetting the state from outside).
+ * The toggle swaps between SecureField (masked) and TextField (visible), two
+ * different native views. Both bind to the same `useNativeState`, so the native
+ * value survives the swap. Without it, React unmounts one and mounts the other
+ * and the new field starts empty.
  */
 export function PasswordField({
-  text,
   placeholder = "••••••••",
   onTextChange,
   onSubmit,
   submitLabelType = "done",
+  contentType = "password",
   disabled = false,
   accessibilityLabel: a11yLabel = "Password",
   accessibilityHint: a11yHint = "Enter your password",
+  testID,
 }: Props) {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const [visible, setVisible] = useState(false);
-  const internalState = useNativeState("");
-  const sharedState = text ?? internalState;
+  const state = useNativeState("");
+  const textRef = useRef<TextFieldRef>(null);
+  const secureRef = useRef<SecureFieldRef>(null);
+  const focused = useRef(false);
+  const pendingRefocus = useRef(false);
+  const didMount = useRef(false);
+
+  // The eye toggle swaps SecureField <-> TextField, two different native views.
+  // React unmounts the focused one and mounts the other, so iOS drops the
+  // keyboard and caret. When the field was focused at the tap, refocus the
+  // now-active field after the swap so typing isn't interrupted.
+  useEffect(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      return;
+    }
+    if (!pendingRefocus.current) return;
+    pendingRefocus.current = false;
+    (visible ? textRef.current : secureRef.current)?.focus();
+  }, [visible]);
 
   const fieldModifiers = [
     textFieldStyle("plain"),
@@ -67,6 +106,7 @@ export function PasswordField({
     dfont({ size: 16 }),
     autocorrectionDisabled(),
     textInputAutocapitalization("never"),
+    textContentType(contentType),
     disabledMod(disabled),
     submitLabel(submitLabelType),
     accessibilityLabel(a11yLabel),
@@ -79,41 +119,57 @@ export function PasswordField({
       spacing={8}
       modifiers={[
         padding({ horizontal: 16 }),
-        frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+        frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
         background(colors.muted as string),
         clipShape("capsule"),
       ]}
     >
       {visible ? (
         <TextField
-          text={sharedState}
-          placeholder={placeholder}
+          ref={textRef}
+          testID={testID}
+          text={state}
+          placeholder={a11yLabel}
           onTextChange={onTextChange}
+          onFocusChange={(f) => {
+            focused.current = f;
+          }}
           modifiers={fieldModifiers}
         />
       ) : (
         <SecureField
-          text={sharedState}
+          ref={secureRef}
+          testID={testID}
+          text={state}
           placeholder={placeholder}
           onTextChange={onTextChange}
+          onFocusChange={(f) => {
+            focused.current = f;
+          }}
           modifiers={fieldModifiers}
         />
       )}
       <Button
+        testID={testID ? `${testID}-visibility` : undefined}
         modifiers={[
           buttonStyle("plain"),
+          frame({ width: 44, height: 44 }),
+          contentShape(shapes.rectangle()),
+          disabledMod(disabled),
           accessibilityLabel(visible ? "Hide password" : "Show password"),
           accessibilityHint(visible ? "Tap to mask the password" : "Tap to reveal the password"),
         ]}
         onPress={() => {
           haptics.light();
+          pendingRefocus.current = focused.current;
           setVisible((v) => !v);
         }}
       >
         <Image
           systemName={visible ? "eye.slash" : "eye"}
-          size={18}
+          size={symbolSize(18)}
           color={colors.mutedForeground as string}
+          modifiers={[accessibilityHidden(true)]}
         />
       </Button>
     </HStack>