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, 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() {
@@ -29,43 +23,5 @@ export default function TabLayout() {
   if (!isAuthenticated && ready) {
     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>
-  );
+  return <Tabs screenOptions={{ headerShown: true }} />;
 }

src/app/(app)/index.tsx

@@ -1,9 +1,35 @@
-import { FocusAwareStatusBar, View } from '@/components/ui';
+import { Link, Tabs } from 'expo-router';
+
+import {
+  FocusAwareStatusBar,
+  Pressable,
+  Text,
+  View,
+} from '@/components/ui';
+import { Feed as FeedIcon } from '@/components/ui/icons';
 
 export default function Feed() {
   return (
     <View className="flex-1 ">
+      <Tabs.Screen
+        options={{
+          title: 'Feed',
+          tabBarIcon: ({ color }) => <FeedIcon color={color} />,
+          headerRight: () => <CreateNewPostLink />,
+          tabBarButtonTestID: 'feed-tab',
+        }}
+      />
       <FocusAwareStatusBar />
     </View>
   );
 }
+
+function CreateNewPostLink() {
+  return (
+    <Link href="/feed/add-post" asChild>
+      <Pressable>
+        <Text className="px-3 text-primary-300">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: 'Settings',
+          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,23 @@
+import { Tabs } from 'expo-router';
 import * as React from 'react';
 
 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() {
   return (
     <>
+      <Tabs.Screen
+        options={{
+          title: '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,19 +9,16 @@ 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]);
+  const screenOptions = {
+    presentation: 'modal',
+    title: typeof title === 'string' ? title : '',
+  } as const;
 
   if (url === undefined || typeof url !== 'string') {
     return (
       <View className="flex-1 items-center justify-center bg-white">
+        <Stack.Screen options={screenOptions} />
         <Text className="text-lg text-red-500">
           {translate('www.invalidUrl')}
         </Text>
@@ -32,6 +28,7 @@ export default function WWW() {
 
   return (
     <View className="flex-1 bg-white">
+      <Stack.Screen options={screenOptions} />
       <WebView
         source={{ uri: url }}
         className="flex-1"