ui(mobile): Make page titles more native

hoarder-app · Dec 16, 2024 · f4b2bac · f4b2bac
1 parent 705d539
commit f4b2bac
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 61 deletions.
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -2,7 +2,6 @@ import "@/globals.css";
 import "expo-dev-client";
 
 import { useEffect } from "react";
-import { View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
@@ -36,42 +35,38 @@ export default function RootLayout() {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <ShareIntentProvider>
         <Providers>
-          <View
-            className={cn(
+          <StyledStack
+            contentClassName={cn(
               "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
               colorScheme == "dark" ? "dark" : "light",
             )}
+            screenOptions={{
+              headerTitle: "",
+              headerTransparent: true,
+            }}
           >
-            <StyledStack
-              contentClassName="bg-gray-100 dark:bg-background"
-              screenOptions={{
-                headerShown: false,
-                headerTransparent: true,
+            <Stack.Screen name="index" />
+            <Stack.Screen
+              name="signin"
+              options={{
+                headerShown: true,
+                headerBackVisible: true,
+                headerBackTitle: "Back",
+                title: "",
               }}
-            >
-              <Stack.Screen name="index" />
-              <Stack.Screen
-                name="signin"
-                options={{
-                  headerShown: true,
-                  headerBackVisible: true,
-                  headerBackTitle: "Back",
-                  title: "",
-                }}
-              />
-              <Stack.Screen name="server-address" />
-              <Stack.Screen name="sharing" />
-              <Stack.Screen
-                name="test-connection"
-                options={{
-                  title: "Test Connection",
-                  headerShown: true,
-                  presentation: "modal",
-                }}
-              />
-            </StyledStack>
-            <StatusBar style="auto" />
-          </View>
+            />
+            <Stack.Screen name="server-address" />
+            <Stack.Screen name="sharing" />
+            <Stack.Screen
+              name="test-connection"
+              options={{
+                title: "Test Connection",
+                headerShown: true,
+                presentation: "modal",
+              }}
+            />
+          </StyledStack>
+          <StatusBar style="auto" />
         </Providers>
       </ShareIntentProvider>
     </GestureHandlerRootView>

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,9 +1,17 @@
-import React from "react";
-import { Tabs } from "expo-router";
+import React, { useEffect } from "react";
+import { Tabs, useNavigation } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
 import { ClipboardList, Home, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
+  const navigation = useNavigation();
+  // Hide the header on the parent screen
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
   return (
     <StyledTabs
       tabBarClassName="bg-gray-100 dark:bg-background"

diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
@@ -1,7 +1,7 @@
 import type { AppStateStatus } from "react-native";
 import { useEffect } from "react";
 import { AppState, Platform } from "react-native";
-import { useRouter } from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
 import { StyledStack } from "@/components/navigation/stack";
 import { useIsLoggedIn } from "@/lib/session";
@@ -16,6 +16,14 @@ function onAppStateChange(status: AppStateStatus) {
 export default function Dashboard() {
   const router = useRouter();
 
+  const navigation = useNavigation();
+  // Hide the header on the parent screen
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
   const isLoggedIn = useIsLoggedIn();
   useEffect(() => {
     if (isLoggedIn !== undefined && !isLoggedIn) {
@@ -32,7 +40,6 @@ export default function Dashboard() {
   return (
     <StyledStack
       contentClassName="bg-gray-100 dark:bg-background"
-      headerClassName="bg-gray-100 dark:bg-background text-foreground"
       screenOptions={{
         headerTransparent: true,
       }}

diff --git a/apps/mobile/app/dashboard/archive.tsx b/apps/mobile/app/dashboard/archive.tsx
@@ -1,14 +1,16 @@
+import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
-import PageTitle from "@/components/ui/PageTitle";
 
 export default function Archive() {
+  const navigator = useNavigation();
+  navigator.setOptions({
+    headerTitle: "🗄️ Archive",
+    headerLargeTitle: true,
+  });
   return (
     <CustomSafeAreaView>
-      <UpdatingBookmarkList
-        query={{ archived: true }}
-        header={<PageTitle title="🗄️ Archive" />}
-      />
+      <UpdatingBookmarkList query={{ archived: true }} />
     </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/favourites.tsx b/apps/mobile/app/dashboard/favourites.tsx
@@ -1,15 +1,19 @@
+import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
-import PageTitle from "@/components/ui/PageTitle";
 
 export default function Favourites() {
+  const navigator = useNavigation();
+  navigator.setOptions({
+    headerTitle: "⭐️ Favourites",
+    headerLargeTitle: true,
+  });
   return (
     <CustomSafeAreaView>
       <UpdatingBookmarkList
         query={{
           favourited: true,
         }}
-        header={<PageTitle title="⭐️ Favourites" />}
       />
     </CustomSafeAreaView>
   );

diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -5,7 +5,6 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
 import { Ellipsis } from "lucide-react-native";
@@ -25,9 +24,10 @@ export default function ListView() {
     <CustomSafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: "",
+          headerTitle: list ? `${list.icon} ${list.name}` : "",
           headerBackTitle: "Back",
-          headerTransparent: true,
+          headerLargeTitle: true,
+          headerRight: () => <ListActionsMenu listId={slug} />,
         }}
       />
       {error ? (
@@ -38,12 +38,6 @@ export default function ListView() {
             query={{
               listId: list.id,
             }}
-            header={
-              <View className="flex flex-row items-center justify-between">
-                <PageTitle title={`${list.icon} ${list.name}`} />
-                <ListActionsMenu listId={list.id} />
-              </View>
-            }
           />
         </View>
       ) : (

diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -4,7 +4,6 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 
 export default function TagView() {
@@ -19,9 +18,10 @@ export default function TagView() {
     <CustomSafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: "",
+          headerTitle: tag?.name ?? "",
           headerBackTitle: "Back",
           headerTransparent: true,
+          headerLargeTitle: true,
         }}
       />
       {error ? (
@@ -32,7 +32,6 @@ export default function TagView() {
             query={{
               tagId: tag.id,
             }}
-            header={<PageTitle title={tag.name} />}
           />
         </View>
       ) : (

diff --git a/apps/mobile/lib/providers.tsx b/apps/mobile/lib/providers.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { ToastProvider } from "@/components/ui/Toast";
 
@@ -20,10 +19,8 @@ export function Providers({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <SafeAreaProvider>
-      <TRPCProvider settings={settings}>
-        <ToastProvider>{children}</ToastProvider>
-      </TRPCProvider>
-    </SafeAreaProvider>
+    <TRPCProvider settings={settings}>
+      <ToastProvider>{children}</ToastProvider>
+    </TRPCProvider>
   );
 }