routing-fixes

augmentos_manager/src/app/(tabs)/glasses.tsx

@@ -20,6 +20,7 @@ import {useAppTheme} from "@/utils/useAppTheme"
 import DeviceSettings from "@/components/glasses/DeviceSettings"
 import {translate} from "@/i18n/translate"
 import { Spacer } from "@/components/misc/Spacer"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 interface AnimatedSectionProps extends PropsWithChildren {
   delay?: number

augmentos_manager/src/app/(tabs)/settings.tsx

@@ -13,23 +13,25 @@ import showAlert from "@/utils/AlertUtils"
 import {useAuth} from "@/contexts/AuthContext"
 import RouteButton from "@/components/ui/RouteButton"
 import {Spacer} from "@/components/misc/Spacer"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 export default function SettingsPage() {
   const {status} = useStatus()
   const {logout} = useAuth()
-  const {themed, theme} = useAppTheme()
+  const {theme} = useAppTheme()
+  const {push, replace} = useNavigationHistory()
 
   const handleSignOut = async () => {
     try {
       await logout()
 
       // Navigate to Login screen directly instead of SplashScreen
       // This ensures we skip the SplashScreen logic that might detect stale user data
-      router.replace("/")
+      replace("/")
     } catch (err) {
       console.error("Error during sign-out:", err)
       // Even if there's an error, still try to navigate away to login
-      router.replace("/")
+      replace("/")
     }
   }
 
@@ -45,28 +47,22 @@ export default function SettingsPage() {
     )
   }
 
-  // Switch track colors
-
-  const navigateTo = (screen: string, params = {}) => {
-    router.push(`/${screen.toLowerCase()}` as any, params)
-  }
-
   return (
     <Screen preset="scroll" style={{paddingHorizontal: 20}}>
       <Header titleTx="settings:title" />
 
-      <RouteButton label={translate("settings:profileSettings")} onPress={() => router.push("/settings/profile")} />
+      <RouteButton label={translate("settings:profileSettings")} onPress={() => push("/settings/profile")} />
 
       <Spacer height={theme.spacing.md} />
 
-      <RouteButton label={translate("settings:privacySettings")} onPress={() => router.push("/settings/privacy")} />
+      <RouteButton label={translate("settings:privacySettings")} onPress={() => push("/settings/privacy")} />
 
       <Spacer height={theme.spacing.md} />
 
       <RouteButton
         label={translate("settings:screenSettings")}
         subtitle={translate("settings:screenDescription")}
-        onPress={() => router.push("/settings/screen")}
+        onPress={() => push("/settings/screen")}
       />
 
       <Spacer height={theme.spacing.md} />
@@ -79,7 +75,7 @@ export default function SettingsPage() {
           const supportsWifi = status.glasses_info && status.glasses_info.glasses_use_wifi === true
 
           if (supportsWifi) {
-            // router.push({
+            // push({
             //   pathname: "/pairing/glasseswifisetup",
             //   params: {deviceModel: status.glasses_info?.model_name || "Glasses"},
             // })
@@ -102,77 +98,12 @@ export default function SettingsPage() {
       <RouteButton
         label={translate("settings:developerSettings")}
         // subtitle={translate("settings:developerSettingsSubtitle")}
-        onPress={() => router.push("/settings/developer")}
+        onPress={() => push("/settings/developer")}
       />
 
       <Spacer height={theme.spacing.md} />
 
-      <RouteButton
-        label={translate("settings:signOut")}
-        onPress={confirmSignOut}
-      />
-
+      <RouteButton label={translate("settings:signOut")} onPress={confirmSignOut} />
     </Screen>
   )
 }
-
-const $settingItem: ThemedStyle<ViewStyle> = ({colors, spacing}) => ({
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "space-between",
-  paddingVertical: spacing.md,
-  borderBottomColor: colors.border,
-  borderBottomWidth: 1,
-})
-
-const $settingItem2: ThemedStyle<ViewStyle> = ({colors, spacing}) => ({
-  paddingVertical: spacing.md,
-  borderBottomColor: colors.border,
-  borderBottomWidth: 1,
-})
-
-const $settingTextContainer: ThemedStyle<ViewStyle> = ({spacing}) => ({
-  flex: 1,
-  paddingRight: spacing.sm,
-})
-
-const $label: ThemedStyle<TextStyle> = ({colors}) => ({
-  fontSize: 16,
-  flexWrap: "wrap",
-  color: colors.text,
-  fontFamily: "SF Pro Rounded",
-})
-
-const $dangerLabel: ThemedStyle<TextStyle> = () => ({
-  fontSize: 16,
-  flexWrap: "wrap",
-  color: "#FF0F0F",
-})
-
-const $value: ThemedStyle<TextStyle> = ({colors}) => ({
-  fontSize: 12,
-  marginTop: 5,
-  flexWrap: "wrap",
-  color: colors.textDim,
-})
-
-const $disabledItem: ThemedStyle<TextStyle> = () => ({
-  opacity: 0.4,
-})
-
-const $iconColor: ThemedStyle<string> = ({colors}) => colors.textDim
-
-const $flagContainer: ThemedStyle<ViewStyle> = ({spacing}) => ({
-  marginTop: spacing.xs,
-  paddingHorizontal: spacing.sm,
-  paddingVertical: 2,
-  borderRadius: 4,
-  backgroundColor: "rgba(255, 107, 107, 0.1)",
-  alignSelf: "flex-start",
-})
-
-const $flagText: ThemedStyle<TextStyle> = () => ({
-  fontSize: 12,
-  fontWeight: "500",
-  color: "#ff6b6b",
-})

augmentos_manager/src/app/auth/core-token-exchange.tsx

@@ -14,6 +14,7 @@ import {router} from "expo-router"
 import {useAppTheme} from "@/utils/useAppTheme"
 import {ThemedStyle} from "@/theme"
 import {Screen} from "@/components/ignite"
+import { useNavigationHistory } from "@/contexts/NavigationHistoryContext"
 
 export default function CoreTokenExchange() {
   const {status} = useStatus()
@@ -26,6 +27,7 @@ export default function CoreTokenExchange() {
   const hasAttemptedConnection = useRef(false)
   const loadingOverlayOpacity = useRef(new Animated.Value(1)).current
   const {theme, themed} = useAppTheme()
+  const {goBack, push, replace} = useNavigationHistory()
 
   const handleTokenExchange = async () => {
     if (isLoading) return
@@ -58,10 +60,10 @@ export default function CoreTokenExchange() {
       const onboardingCompleted = await loadSetting(SETTINGS_KEYS.ONBOARDING_COMPLETED, false)
       if (onboardingCompleted) {
         // If onboarding is completed, go directly to Home
-        router.replace("/(tabs)/home")
+        replace("/(tabs)/home")
       } else {
         // If onboarding is not completed, go to WelcomePage
-        router.replace("/onboarding/welcome")
+        replace("/onboarding/welcome")
       }
     } catch (err) {
       // Don't log the error to console
@@ -100,7 +102,7 @@ export default function CoreTokenExchange() {
       } else {
         // If we already have a token, go straight to Home
         BackendServerComms.getInstance().setCoreToken(status.core_info.core_token)
-        router.replace("/home")
+        replace("/home")
       }
     }
   }, [status.core_info.puck_connected, authLoading, user])

augmentos_manager/src/app/auth/login.tsx

@@ -29,6 +29,7 @@ import { router } from "expo-router"
 import showAlert from "@/utils/AlertUtils"
 import { Pressable } from "react-native-gesture-handler"
 import { Spacer } from "@/components/misc/Spacer"
+import { useNavigationHistory } from "@/contexts/NavigationHistoryContext"
 
 export default function LoginScreen() {
   const [isSigningUp, setIsSigningUp] = useState(false)
@@ -37,6 +38,7 @@ export default function LoginScreen() {
   const [isFormLoading, setIsFormLoading] = useState(false)
   const [isAuthLoading, setIsAuthLoading] = useState(false)
   const [backPressCount, setBackPressCount] = useState(0)
+  const {goBack, push, replace} = useNavigationHistory()
 
   // Get theme and safe area insets
   const {theme, themed} = useAppTheme()
@@ -299,7 +301,7 @@ export default function LoginScreen() {
         showAlert(translate("login:success"), translate("login:checkEmailVerification"))
       } else {
         console.log("Sign-up successful:", data)
-        router.replace("/")
+        replace("/")
       }
     } catch (err) {
       console.error("Error during sign-up:", err)

augmentos_manager/src/app/index.tsx

@@ -5,6 +5,7 @@ import {useEffect} from "react"
 import {supabase} from "@/supabase/supabaseClient"
 import {useStatus} from "@/contexts/AugmentOSStatusProvider"
 import {useAuth} from "@/contexts/AuthContext"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 // useEffect(() => {
 //   console.log('Initializing CoreCommunicator2');
@@ -14,7 +15,7 @@ import {useAuth} from "@/contexts/AuthContext"
 export default function IndexPage() {
   const {user, loading} = useAuth()
   const {status, initializeCoreConnection} = useStatus()
-
+  const {goBack, push, replace} = useNavigationHistory()
   useEffect(() => {
     const initializeApp = async () => {
       /*
@@ -24,7 +25,7 @@ export default function IndexPage() {
       If they're logged in + perms => SimulatedPucK setup
       */
       if (!user) {
-        router.replace("/auth/login")
+        replace("/auth/login")
         return
       }
 
@@ -34,9 +35,7 @@ export default function IndexPage() {
 
       initializeCoreConnection()
 
-      // router.replace("/(tabs)/home")
-
-      router.replace("/auth/core-token-exchange")
+      replace("/auth/core-token-exchange")
     }
 
     if (!loading) {

augmentos_manager/src/app/onboarding/welcome.tsx

@@ -7,12 +7,13 @@ import {useAppStatus} from '@/contexts/AppStatusProvider';
 import BackendServerComms from '@/backend_comms/BackendServerComms';
 import { router } from 'expo-router';
 import { useAppTheme } from '@/utils/useAppTheme';
+import { useNavigationHistory } from '@/contexts/NavigationHistoryContext';
 
 export default function OnboardingWelcome() {
   const {appStatus, optimisticallyStopApp, clearPendingOperation, refreshAppStatus} = useAppStatus();
   const {theme, themed} = useAppTheme();
   const isDarkTheme = theme.isDark;
-
+  const {goBack, push, replace} = useNavigationHistory()
   const backendComms = BackendServerComms.getInstance();
 
   const stopAllApps = async () => {
@@ -33,7 +34,7 @@ export default function OnboardingWelcome() {
   const handleSkip = () => {
     // Mark onboarding as completed when skipped
     saveSetting(SETTINGS_KEYS.ONBOARDING_COMPLETED, true);
-    router.replace('/(tabs)/home');
+    replace('/(tabs)/home');
   };
 
   // Continue to glasses selection screen

augmentos_manager/src/app/pairing/bluetooth.tsx

@@ -18,14 +18,15 @@ import {router, useLocalSearchParams} from "expo-router"
 import {useAppTheme} from "@/utils/useAppTheme"
 import {Header, Screen} from "@/components/ignite"
 import {ThemedStyle} from "@/theme"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 export default function SelectGlassesBluetoothScreen() {
   const {status} = useStatus()
   const navigation = useNavigation<NavigationProps>()
   const {searchResults, setSearchResults} = useSearchResults()
   const {glassesModelName}: {glassesModelName: string} = useLocalSearchParams()
   const {theme, themed} = useAppTheme()
-
+  const {goBack, push} = useNavigationHistory()
   // Create a ref to track the current state of searchResults
   const searchResultsRef = useRef<string[]>(searchResults)
 
@@ -201,7 +202,7 @@ export default function SelectGlassesBluetoothScreen() {
 
   return (
     <Screen preset="fixed" style={{paddingHorizontal: theme.spacing.md}} safeAreaEdges={["bottom"]}>
-      <Header titleTx="pairing:scanningForGlasses" leftIcon="caretLeft" onLeftPress={() => router.back()} />
+      <Header titleTx="pairing:scanningForGlasses" leftIcon="caretLeft" onLeftPress={goBack} />
       <View style={styles.contentContainer}>
         <PairingDeviceInfo glassesModelName={glassesModelName} />
       </View>

augmentos_manager/src/app/pairing/guide.tsx

@@ -9,12 +9,14 @@ import GlassesTroubleshootingModal from "@/components/misc/GlassesTroubleshootin
 import GlassesPairingLoader from "@/components/misc/GlassesPairingLoader"
 import {getPairingGuide} from "@/utils/getPairingGuide"
 import {router} from "expo-router"
-import { useAppTheme } from "@/utils/useAppTheme"
-import { Screen } from "@/components/ignite/Screen"
-import { ThemedStyle } from "@/theme"
-import { Header } from "@/components/ignite/Header"
+import {useAppTheme} from "@/utils/useAppTheme"
+import {Screen} from "@/components/ignite/Screen"
+import {ThemedStyle} from "@/theme"
+import {Header} from "@/components/ignite/Header"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
-export default function GlassesPairingGuideScreen () {
+export default function GlassesPairingGuideScreen() {
+  const {goBack, push} = useNavigationHistory()
   const {status} = useStatus()
   const route = useRoute()
   const {glassesModelName} = route.params as {glassesModelName: string}
@@ -100,8 +102,8 @@ export default function GlassesPairingGuideScreen () {
   const isDarkTheme = theme.isDark
 
   return (
-    <Screen preset="auto" style={{paddingHorizontal: theme.spacing.md}}>
-      <Header leftIcon="caretLeft" onLeftPress={() => router.back()} />
+    <Screen preset="fixed" style={{paddingHorizontal: theme.spacing.md}}>
+      <Header leftIcon="caretLeft" onLeftPress={goBack} />
       {pairingInProgress ? (
         // Show the beautiful animated loader while pairing is in progress
         <GlassesPairingLoader glassesModelName={glassesModelName} />

augmentos_manager/src/app/pairing/prep.tsx

@@ -12,6 +12,7 @@ import {useAppTheme} from "@/utils/useAppTheme"
 import {Screen} from "@/components/ignite/Screen"
 import coreCommunicator from "@/bridge/CoreCommunicator"
 import {translate} from "@/i18n"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 // Alert handling is now done directly in PermissionsUtils.tsx
 
@@ -23,7 +24,7 @@ export default function PairingPrepScreen() {
   const route = useRoute()
   const {theme} = useAppTheme()
   const {glassesModelName} = route.params as {glassesModelName: string}
-
+  const {goBack, push} = useNavigationHistory()
   // React.useEffect(() => {
   //   const unsubscribe = navigation.addListener('beforeRemove', (e) => {
   //     const actionType = e.data?.action?.type;
@@ -192,7 +193,7 @@ export default function PairingPrepScreen() {
 
   return (
     <Screen preset="fixed" style={{paddingHorizontal: theme.spacing.md}} safeAreaEdges={["bottom"]}>
-      <Header titleTx="pairing:pairingGuide" leftIcon="caretLeft" onLeftPress={() => router.back()} />
+      <Header titleTx="pairing:pairingGuide" leftIcon="caretLeft" onLeftPress={goBack} />
       <ScrollView style={{marginRight: -theme.spacing.md, paddingRight: theme.spacing.md}}>
         <View style={styles.contentContainer}>{getPairingGuide(glassesModelName)}</View>
       </ScrollView>

augmentos_manager/src/app/pairing/select-glasses-model.tsx

@@ -12,6 +12,7 @@ import {router} from "expo-router"
 import {Screen} from "@/components/ignite/Screen"
 import {Header} from "@/components/ignite"
 import {ThemedStyle} from "@/theme"
+import {useNavigationHistory} from "@/contexts/NavigationHistoryContext"
 
 export default function SelectGlassesModelScreen() {
   const {status} = useStatus()
@@ -21,7 +22,7 @@ export default function SelectGlassesModelScreen() {
   const [isTestFlightOrDev, setIsTestFlightOrDev] = useState<boolean>(true)
   const {theme, themed} = useAppTheme()
   const isDarkTheme = theme.isDark
-
+  const {goBack, push} = useNavigationHistory()
   // Check if running on TestFlight (iOS) or development mode
   useEffect(() => {
     async function checkTestFlightOrDev() {
@@ -97,7 +98,7 @@ export default function SelectGlassesModelScreen() {
 
   return (
     <Screen preset="fixed" style={{paddingHorizontal: theme.spacing.md}} safeAreaEdges={["bottom"]}>
-      <Header titleTx="pairing:selectModel" leftIcon="caretLeft" onLeftPress={() => router.back()} />
+      <Header titleTx="pairing:selectModel" leftIcon="caretLeft" onLeftPress={goBack} />
       <ScrollView style={{marginRight: -theme.spacing.md, paddingRight: theme.spacing.md}}>
         {isOnboarding && (
           <View style={[styles.onboardingBanner, {backgroundColor: isDarkTheme ? "#1e88e5" : "#bbdefb"}]}>