mobile-darmasaba/app/(application)/_layout.tsx

import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
import HeaderRightDivisionList from "@/components/division/headerDivisionList";
import HeaderRightGroupList from "@/components/group/headerGroupList";
import { HeaderRightHome } from "@/components/home/headerRightHome";
import HeaderMemberList from "@/components/member/headerMemberList";
import HeaderRightPositionList from "@/components/position/headerRightPositionList";
import HeaderRightProjectList from "@/components/project/headerProjectList";
import { Headers } from "@/constants/Headers";
import store from "@/lib/store";
import { useAuthSession } from "@/providers/AuthProvider";
import messaging from "@react-native-firebase/messaging";
import { Redirect, router, Stack, usePathname } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { useEffect } from "react";
import { Text } from "react-native";
import { Easing, Notifier } from 'react-native-notifier';
import { Provider } from "react-redux";

export default function RootLayout() {
   const pathname = usePathname();

   const handleNotificationPress = (category: any, content: any) => {
      switch (category) {
         case 'announcement':
            router.push(`/announcement/${content}`);
            break;
         case 'discussion':
            router.push(`/discussion/${content}`);
            break;
         case 'division':
            router.push(`/division/${content}`);
            break;
         case 'member':
            router.push(`/member/${content}`);
            break;
         case 'project':
            router.push(`/project/${content}`);
            break;
         case 'announcement':
            router.push(`/announcement/${content}`);
            break;
         // Add other cases as needed
         default:
            // Handle unknown category
            console.warn(`Unknown category: ${category}`);
      }
   };

   useEffect(() => {
      const unsubscribe = messaging().onMessage(async remoteMessage => {
         const category = remoteMessage?.data?.category;
         const content = remoteMessage?.data?.content;
         if (category != pathname.substring(1)) {
            Notifier.showNotification({
               title: remoteMessage.notification?.title,
               description: remoteMessage.notification?.body,
               duration: 3000,
               animationDuration: 300,
               showEasing: Easing.ease,
               onPress: () => handleNotificationPress(category, content),
               hideOnPress: true,
            });
         }
      });

      return unsubscribe;
   }, []);

   const { token, isLoading } = useAuthSession()

   if (isLoading) {
      return <Text>Loading...</Text>;
   }

   if (!token?.current) {
      return <Redirect href="/" />;
   }

   return (
      <Provider store={store}>
         <Stack screenOptions={Headers.shadow} >
            <Stack.Screen name="home" options={{
               title: 'Home',
               headerLeft: () => <></>,
               headerTitle: 'Darmasaba',
               headerRight: () => <HeaderRightHome />,
               headerTitleAlign: 'left',
               headerBackVisible: false,
            }} />
            <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
            <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
            <Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
            <Stack.Screen name="profile" options={{ title: 'Profile' }} />
            <Stack.Screen name="member/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Anggota',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderMemberList />
            }} />
            <Stack.Screen name="discussion/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Diskusi Umum',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderDiscussionGeneral />
            }} />
            <Stack.Screen name="project/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Kegiatan',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightProjectList />
            }} />
            <Stack.Screen name="division/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Divisi',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightDivisionList />
            }} />
            <Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
            <Stack.Screen name="group/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Lembaga Desa',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightGroupList />
            }} />
            <Stack.Screen name="position/index" options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Jabatan',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightPositionList />
            }} />
            <Stack.Screen name="announcement/index"
               options={{
                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                  headerTitle: 'Pengumuman',
                  headerTitleAlign: 'center',
                  headerRight: () => <HeaderRightAnnouncementList />
               }}
            />
         </Stack>
         <StatusBar style="light" translucent={false} backgroundColor="black" />
      </Provider>
   )
}