refactor(router): move screen options from layouts into screen files

src/app/(app)/_layout.tsx

@@ -1,13 +1,7 @@
-import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
+import { Redirect, SplashScreen, Stack, Tabs } from 'expo-router';
 import { useCallback, useEffect } from 'react';
 
 import { useAuth } from '@/components/providers/auth';
-import { Pressable, Text } from '@/components/ui';
-import {
-  Feed as FeedIcon,
-  Settings as SettingsIcon,
-  Style as StyleIcon,
-} from '@/components/ui/icons';
 import { useIsFirstTime } from '@/lib';
 
 export default function TabLayout() {
@@ -30,42 +24,9 @@ export default function TabLayout() {
     return <Redirect href="/sign-in" />;
   }
   return (
-    <Tabs>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Feed',
-          tabBarIcon: ({ color }) => <FeedIcon color={color} />,
-          headerRight: () => <CreateNewPostLink />,
-          tabBarButtonTestID: 'feed-tab',
-        }}
-      />
-      <Tabs.Screen
-        name="style"
-        options={{
-          title: 'Style',
-          tabBarIcon: ({ color }) => <StyleIcon color={color} />,
-          tabBarButtonTestID: 'style-tab',
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          title: 'Settings',
-          tabBarIcon: ({ color }) => <SettingsIcon color={color} />,
-          tabBarButtonTestID: 'settings-tab',
-        }}
-      />
-    </Tabs>
-  );
-}
-
-function CreateNewPostLink() {
-  return (
-    <Link href="/feed/add-post" asChild>
-      <Pressable>
-        <Text className="px-3 text-primary-300">Create</Text>
-      </Pressable>
-    </Link>
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <Tabs screenOptions={{ headerShown: true }} />
+    </>
   );
 }

src/app/(app)/index.tsx

@@ -1,9 +1,40 @@
-import { FocusAwareStatusBar, View } from '@/components/ui';
+import { Link, Tabs } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+
+import {
+  FocusAwareStatusBar,
+  Pressable,
+  Text,
+  View,
+} from '@/components/ui';
+import { Feed as FeedIcon } from '@/components/ui/icons';
 
 export default function Feed() {
+  const { t } = useTranslation();
+
   return (
     <View className="flex-1 ">
+      <Tabs.Screen
+        options={{
+          title: t('tabs.feed'),
+          tabBarIcon: ({ color }) => <FeedIcon color={color} />,
+          headerRight: () => <CreateNewPostLink />,
+          tabBarButtonTestID: 'feed-tab',
+        }}
+      />
       <FocusAwareStatusBar />
     </View>
   );
 }
+
+function CreateNewPostLink() {
+  const { t } = useTranslation();
+
+  return (
+    <Link href="/feed/add-post" asChild>
+      <Pressable>
+        <Text className="px-3 text-primary-300">{t('tabs.create')}</Text>
+      </Pressable>
+    </Link>
+  );
+}

src/app/(app)/settings.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function */
-import { Link } from 'expo-router';
+import { Link, Tabs } from 'expo-router';
 import { useColorScheme } from 'nativewind';
 import * as React from 'react';
 import { showMessage } from 'react-native-flash-message';
@@ -18,7 +18,7 @@ import {
   Text,
   View,
 } from '@/components/ui';
-import { Website } from '@/components/ui/icons';
+import { Settings as SettingsIcon, Website } from '@/components/ui/icons';
 import { translate } from '@/lib';
 import { Env } from '@/lib/env';
 
@@ -44,6 +44,13 @@ export default function Settings() {
 
   return (
     <>
+      <Tabs.Screen
+        options={{
+          title: translate('settings.title'),
+          tabBarIcon: ({ color }) => <SettingsIcon color={color} />,
+          tabBarButtonTestID: 'settings-tab',
+        }}
+      />
       <FocusAwareStatusBar />
       <ScrollView>
         <View className="flex-1 gap-2 p-4">

src/app/(app)/style.tsx

@@ -1,14 +1,26 @@
+import { Tabs } from 'expo-router';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Buttons } from '@/components/buttons';
 import { Colors } from '@/components/colors';
 import { Inputs } from '@/components/inputs';
 import { Typography } from '@/components/typography';
 import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/components/ui';
+import { Style as StyleIcon } from '@/components/ui/icons';
 
 export default function Style() {
+  const { t } = useTranslation();
+
   return (
     <>
+      <Tabs.Screen
+        options={{
+          title: t('tabs.style'),
+          tabBarIcon: ({ color }) => <StyleIcon color={color} />,
+          tabBarButtonTestID: 'style-tab',
+        }}
+      />
       <FocusAwareStatusBar />
       <ScrollView className="px-4">
         <SafeAreaView className="flex-1">

src/app/_layout.tsx

@@ -4,7 +4,6 @@ import { ThemeProvider } from '@react-navigation/native';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 import FlashMessage from 'react-native-flash-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -37,38 +36,24 @@ SplashScreen.setOptions({
 
 function GuardedStack() {
   const { isAuthenticated } = useAuth();
-  const { t } = useTranslation();
   const [isFirstTime] = useIsFirstTime();
 
   return (
     <Stack>
       <Stack.Protected guard={isFirstTime}>
-        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
+        <Stack.Screen name="onboarding" />
       </Stack.Protected>
 
       <Stack.Protected guard={isAuthenticated}>
-        <Stack.Screen name="(app)" options={{ headerShown: false }} />
-        <Stack.Screen
-          name="update-password"
-          options={{
-            title: t('updatePassword.title'),
-          }}
-        />
+        <Stack.Screen name="(app)" />
+        <Stack.Screen name="update-password" />
       </Stack.Protected>
 
       <Stack.Protected guard={!isAuthenticated}>
-        <Stack.Screen name="sign-in" options={{ headerShown: false }} />
+        <Stack.Screen name="sign-in" />
         <Stack.Screen name="sign-up" />
         <Stack.Screen name="forgot-password" />
       </Stack.Protected>
-
-      <Stack.Screen
-        name="www"
-        options={{
-          presentation: 'modal',
-          title: '',
-        }}
-      />
     </Stack>
   );
 }

src/app/onboarding.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from 'expo-router';
+import { Stack, useRouter } from 'expo-router';
 
 import { Cover } from '@/components/cover';
 import {
@@ -17,6 +17,7 @@ export default function Onboarding() {
 
   return (
     <View className="flex h-full items-center justify-center">
+      <Stack.Screen options={{ headerShown: false }} />
       <FocusAwareStatusBar />
       <View className="w-full flex-1">
         <Cover />

src/app/sign-in.tsx

@@ -1,4 +1,5 @@
 import type { LoginFormProps } from '@/components/login-form';
+import { Stack } from 'expo-router';
 import * as React from 'react';
 
 import { showMessage } from 'react-native-flash-message';
@@ -16,6 +17,7 @@ export default function Login() {
   };
   return (
     <>
+      <Stack.Screen options={{ headerShown: false }} />
       <FocusAwareStatusBar />
       <LoginForm onSubmit={onSubmit} isLoading={isPending} />
     </>

src/app/update-password.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useNavigation } from 'expo-router';
+import { Stack, useNavigation } from 'expo-router';
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -64,6 +64,7 @@ export default function UpdatePassword() {
 
   return (
     <>
+      <Stack.Screen options={{ title: t('updatePassword.title') }} />
       <FocusAwareStatusBar />
       <KeyboardAvoidingView>
         <View className="gap-8 p-4">

src/app/www.tsx

@@ -1,6 +1,5 @@
-import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
 import * as React from 'react';
-import { useEffect } from 'react';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
@@ -10,33 +9,32 @@ import { translate } from '@/lib';
 export default function WWW() {
   const router = useRouter();
   const { url, title } = useLocalSearchParams();
-  const navigation = useNavigation();
 
-  useEffect(() => {
-    if (title !== undefined) {
-      navigation.setOptions({
-        title,
-      });
-    }
-  }, [navigation, title]);
-
-  if (url === undefined || typeof url !== 'string') {
-    return (
-      <View className="flex-1 items-center justify-center bg-white">
-        <Text className="text-lg text-red-500">
-          {translate('www.invalidUrl')}
-        </Text>
-      </View>
-    );
-  }
+  const screenOptions = {
+    presentation: 'modal',
+    title: typeof title === 'string' ? title : '',
+  } as const;
 
   return (
-    <View className="flex-1 bg-white">
-      <WebView
-        source={{ uri: url }}
-        className="flex-1"
-        onError={() => router.back()}
-      />
-    </View>
+    <>
+      <Stack.Screen options={screenOptions} />
+      {typeof url === 'string'
+        ? (
+            <View className="flex-1 bg-white">
+              <WebView
+                source={{ uri: url }}
+                className="flex-1"
+                onError={() => router.back()}
+              />
+            </View>
+          )
+        : (
+            <View className="flex-1 items-center justify-center bg-white">
+              <Text className="text-lg text-red-500">
+                {translate('www.invalidUrl')}
+              </Text>
+            </View>
+          )}
+    </>
   );
 }

src/translations/en.json

@@ -103,6 +103,11 @@
     "version": "Version",
     "website": "Website"
   },
+  "tabs": {
+    "create": "Create",
+    "feed": "Feed",
+    "style": "Style"
+  },
   "updatePassword": {
     "buttonLabel": "Update Password",
     "confirmPasswordLabel": "Confirm Password",