From 639fa34585b62057c1fac1c8d69a9748931f4343 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Mon, 16 Mar 2026 10:49:40 -0400
Subject: [PATCH] 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.
---
 .../src/app/(tabs)/(settings)/_layout.tsx     | 26 +------------------
 .../src/app/(tabs)/(settings)/index.tsx       |  2 +-
 apps/native/src/app/_layout.tsx               | 25 ++++++++++++++++++
 .../(settings) => }/change-password.tsx       |  0
 4 files changed, 27 insertions(+), 26 deletions(-)
 rename apps/native/src/app/{(tabs)/(settings) => }/change-password.tsx (100%)

diff --git a/apps/native/src/app/(tabs)/(settings)/_layout.tsx b/apps/native/src/app/(tabs)/(settings)/_layout.tsx
index 1d25b32..8aa6f2a 100644
--- a/apps/native/src/app/(tabs)/(settings)/_layout.tsx
+++ b/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()} />;
 }
diff --git a/apps/native/src/app/(tabs)/(settings)/index.tsx b/apps/native/src/app/(tabs)/(settings)/index.tsx
index 248276c..f774880 100644
--- a/apps/native/src/app/(tabs)/(settings)/index.tsx
+++ b/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")}
             />
           )}
 
diff --git a/apps/native/src/app/_layout.tsx b/apps/native/src/app/_layout.tsx
index a6fdacb..ac13043 100644
--- a/apps/native/src/app/_layout.tsx
+++ b/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
diff --git a/apps/native/src/app/(tabs)/(settings)/change-password.tsx b/apps/native/src/app/change-password.tsx
similarity index 100%
rename from apps/native/src/app/(tabs)/(settings)/change-password.tsx
rename to apps/native/src/app/change-password.tsx