From 4a07556a5ddc288bc330df20f3d5239e272159bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zo=C3=AB?= <zoe@guido-it.nl>
Date: Sun, 9 Aug 2026 18:24:39 +0200
Subject: [PATCH] refactor(navigation): wrap settings screen in stack navigator

---
 src/navigation/MainTabNavigator.tsx  |  5 +++--
 src/navigation/SettingsNavigator.tsx | 26 ++++++++++++++++++++++++++
 src/navigation/types.ts              |  4 ++++
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/navigation/SettingsNavigator.tsx

diff --git a/src/navigation/MainTabNavigator.tsx b/src/navigation/MainTabNavigator.tsx
index a53982b..bfd74a6 100644
--- a/src/navigation/MainTabNavigator.tsx
+++ b/src/navigation/MainTabNavigator.tsx
@@ -4,7 +4,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { MainTabParamList } from "./types";
 import { WorkoutNavigator } from "./WorkoutNavigator";
 import { HistoryNavigator } from "./HistoryNavigator";
-import { SettingsScreen } from "../features/settings/screens/SettingsScreen";
+import { SettingsNavigator } from "./SettingsNavigator";
 
 const Tab = createBottomTabNavigator<MainTabParamList>();
 
@@ -45,8 +45,9 @@ export function MainTabNavigator() {
       />
       <Tab.Screen
         name="Settings"
-        component={SettingsScreen}
+        component={SettingsNavigator}
         options={{
+          headerShown: false,
           tabBarLabel: t("settings"),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="settings-outline" size={size} color={color} />
diff --git a/src/navigation/SettingsNavigator.tsx b/src/navigation/SettingsNavigator.tsx
new file mode 100644
index 0000000..33d38a7
--- /dev/null
+++ b/src/navigation/SettingsNavigator.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { SettingsStackParamList } from "./types";
+import { SettingsScreen } from "../features/settings/screens/SettingsScreen";
+
+const Stack = createNativeStackNavigator<SettingsStackParamList>();
+
+export function SettingsNavigator() {
+  const { t } = useTranslation("navigation");
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: "#0ea5e9" },
+        headerTintColor: "#fff",
+        headerTitleStyle: { fontWeight: "bold" },
+      }}
+    >
+      <Stack.Screen
+        name="SettingsMain"
+        component={SettingsScreen}
+        options={{ title: t("settings") }}
+      />
+    </Stack.Navigator>
+  );
+}
diff --git a/src/navigation/types.ts b/src/navigation/types.ts
index 82175b5..5bd97d9 100644
--- a/src/navigation/types.ts
+++ b/src/navigation/types.ts
@@ -26,6 +26,10 @@ export type HistoryStackParamList = {
   SessionDetail: { sessionId: string };
 };
 
+export type SettingsStackParamList = {
+  SettingsMain: undefined;
+};
+
 export type RootStackProps<T extends keyof RootStackParamList> =
   NativeStackScreenProps<RootStackParamList, T>;