fix(mobile): useLayoutEffect for navigator changes

4 files changed, 18 insertions, 12 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index 4e403a99..f1d90ee4 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useLayoutEffect } from "react";
 import { Tabs, useNavigation } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
 import { ClipboardList, Home, Settings } from "lucide-react-native";
@@ -6,7 +6,7 @@ import { ClipboardList, Home, Settings } from "lucide-react-native";
 export default function TabLayout() {
   const navigation = useNavigation();
   // Hide the header on the parent screen
-  useEffect(() => {
+  useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: false,
     });
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index d6e5ab7c..e9c28c90 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -1,5 +1,5 @@
 import type { AppStateStatus } from "react-native";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { AppState, Platform } from "react-native";
 import { useNavigation, useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
@@ -18,7 +18,7 @@ export default function Dashboard() {
 
   const navigation = useNavigation();
   // Hide the header on the parent screen
-  useEffect(() => {
+  useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: false,
     });
diff --git a/apps/mobile/app/dashboard/archive.tsx b/apps/mobile/app/dashboard/archive.tsx
index b4cc3a66..b02088c8 100644
--- a/apps/mobile/app/dashboard/archive.tsx
+++ b/apps/mobile/app/dashboard/archive.tsx
@@ -1,13 +1,16 @@
+import { useLayoutEffect } from "react";
 import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Archive() {
   const navigator = useNavigation();
-  navigator.setOptions({
-    headerTitle: "🗄️ Archive",
-    headerLargeTitle: true,
-  });
+  useLayoutEffect(() => {
+    navigator.setOptions({
+      headerTitle: "🗄️ Archive",
+      headerLargeTitle: true,
+    });
+  }, [navigator]);
   return (
     <CustomSafeAreaView>
       <UpdatingBookmarkList query={{ archived: true }} />
diff --git a/apps/mobile/app/dashboard/favourites.tsx b/apps/mobile/app/dashboard/favourites.tsx
index 1dddfe31..3dd2aa09 100644
--- a/apps/mobile/app/dashboard/favourites.tsx
+++ b/apps/mobile/app/dashboard/favourites.tsx
@@ -1,13 +1,16 @@
+import { useLayoutEffect } from "react";
 import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Favourites() {
   const navigator = useNavigation();
-  navigator.setOptions({
-    headerTitle: "⭐️ Favourites",
-    headerLargeTitle: true,
-  });
+  useLayoutEffect(() => {
+    navigator.setOptions({
+      headerTitle: "⭐️ Favourites",
+      headerLargeTitle: true,
+    });
+  }, [navigator]);
   return (
     <CustomSafeAreaView>
       <UpdatingBookmarkList