Move header control to screens

navigation/AppNavigator.js

@@ -44,7 +44,7 @@ const AppNavigator = observer(() => {
 						// In our case, it's "Main" as that's the first screen inside the navigator
 						route.params?.screen || Screens.MainScreen;
 					return ({
-						headerShown: routeName === Screens.SettingsTab,
+						headerShown: false,
 						title: t(`headings.${routeName.toLowerCase()}`)
 					});
 				}}

navigation/SettingsNavigator.js

@@ -7,6 +7,7 @@
 import { createStackNavigator } from '@react-navigation/stack';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Screens from '../constants/Screens';
 import DevSettingsScreen from '../screens/DevSettingsScreen';
@@ -14,21 +15,27 @@ import SettingsScreen from '../screens/SettingsScreen';
 
 const SettingsStack = createStackNavigator();
 
-const SettingsNavigator = observer(() => (
-	<SettingsStack.Navigator
-		screenOptions={{
-			headerShown: false
-		}}
-	>
-		<SettingsStack.Screen
-			name={Screens.SettingsScreen}
-			component={SettingsScreen}
-		/>
-		<SettingsStack.Screen
-			name={Screens.DevSettingsScreen}
-			component={DevSettingsScreen}
-		/>
-	</SettingsStack.Navigator>
-));
+const SettingsNavigator = observer(() => {
+	const { t } = useTranslation();
+
+	return (
+		<SettingsStack.Navigator>
+			<SettingsStack.Screen
+				name={Screens.SettingsScreen}
+				component={SettingsScreen}
+				options={{
+					title: t('headings.settings')
+				}}
+			/>
+			<SettingsStack.Screen
+				name={Screens.DevSettingsScreen}
+				component={DevSettingsScreen}
+				options={{
+					title: 'Developers, Developers, Developers!'
+				}}
+			/>
+		</SettingsStack.Navigator>
+	);
+});
 
 export default SettingsNavigator;