fix(native): add change password screen and update navigation

Implement a new Change Password screen with form validation and user feedback. Adjust navigation to include the change password option in the settings. Update the layout to present the change password screen as a modal on Android and a form sheet on iOS. Clean up previous settings layout code by removing redundant options.

apps/native/src/app/(tabs)/(settings)/_layout.tsx

@@ -2,29 +2,5 @@ import { Stack } from "expo-router";
 import { useTabScreenOptions } from "@/hooks/use-tab-screen-options";
 
 export default function SettingsLayout() {
-  const screenOptions = useTabScreenOptions();
-  const changePasswordOptions =
-    process.env.EXPO_OS === "ios"
-      ? {
-          presentation: "formSheet" as const,
-          sheetAllowedDetents: "fitToContents" as const,
-          sheetGrabberVisible: true,
-          headerLargeTitle: false,
-          headerTransparent: false,
-          headerBlurEffect: "none" as const,
-          unstable_headerRightItems: () => [],
-        }
-      : {
-          presentation: "modal" as const,
-          headerLargeTitle: false,
-          headerTransparent: false,
-          headerBlurEffect: "none" as const,
-          unstable_headerRightItems: () => [],
-        };
-
-  return (
-    <Stack screenOptions={screenOptions}>
-      <Stack.Screen name="change-password" options={changePasswordOptions} />
-    </Stack>
-  );
+  return <Stack screenOptions={useTabScreenOptions()} />;
 }

apps/native/src/app/(tabs)/(settings)/index.tsx

@@ -351,7 +351,7 @@ export default function SettingsScreen() {
             <SettingsRow
               label={hasPassword ? "Change password" : "Set password"}
               icon={IconLock}
-              onPress={() => push("/(tabs)/(settings)/change-password")}
+              onPress={() => push("/change-password")}
             />
           )}
 

apps/native/src/app/_layout.tsx

@@ -64,6 +64,27 @@ export const unstable_settings = {
   initialRouteName: "(tabs)",
 };
 
+const changePasswordOptions =
+  process.env.EXPO_OS === "ios"
+    ? {
+        title: "Change Password",
+        headerShown: true,
+        presentation: "formSheet" as const,
+        sheetAllowedDetents: "fitToContents" as const,
+        sheetGrabberVisible: true,
+        headerLargeTitle: false,
+        headerTransparent: false,
+        headerBlurEffect: "none" as const,
+      }
+    : {
+        title: "Change Password",
+        headerShown: true,
+        presentation: "modal" as const,
+        headerLargeTitle: false,
+        headerTransparent: false,
+        headerBlurEffect: "none" as const,
+      };
+
 function AppContent() {
   const contentStyle = useResolveClassNames("bg-background");
 
@@ -209,6 +230,10 @@ function AppContent() {
 
         <Stack.Protected guard={!!session}>
           <Stack.Screen name="(tabs)" />
+          <Stack.Screen
+            name="change-password"
+            options={changePasswordOptions}
+          />
           <Stack.Screen
             name="title/[id]"
             dangerouslySingular