fix(mobile): useLayoutEffect for navigator changes

hoarder-app · Dec 16, 2024 · 6fba9d1 · 6fba9d1
1 parent deadcb9
commit 6fba9d1
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,12 +1,12 @@
-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";
 
 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
@@ -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
@@ -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
@@ -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