79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { Tabs } from "expo-router";
|
|
import { useTabConfig } from "@/constants/config";
|
|
import { useSelector } from "react-redux";
|
|
import { AppDispatch, RootState } from "@/store";
|
|
import { initSocket } from "@/services/socket";
|
|
import { useSnackbar } from "@/contexts/Snackbar";
|
|
import NetInfo from "@react-native-community/netinfo";
|
|
import { getUserDetails } from "@/store/userSlice";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
export default function TabLayout() {
|
|
const { isLoggedIn } = useSelector((state: RootState) => state.auth);
|
|
if (!isLoggedIn) return null;
|
|
const TAB_CONFIG = useTabConfig();
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const { showSnackbar } = useSnackbar();
|
|
useEffect(() => {
|
|
const unsubscribe = NetInfo.addEventListener((state) => {
|
|
const isConnected = state.isConnected;
|
|
|
|
if (isConnected === false) {
|
|
console.log("No internet connection");
|
|
showSnackbar("No internet connection", "error");
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchAndInit = async () => {
|
|
try {
|
|
const result = await dispatch(getUserDetails()).unwrap();
|
|
console.log("User details fetched", result);
|
|
initSocket();
|
|
} catch (error) {
|
|
console.error("Failed to fetch user details", error);
|
|
showSnackbar("Failed to fetch user details", "error");
|
|
}
|
|
};
|
|
|
|
if (isLoggedIn) {
|
|
fetchAndInit();
|
|
}
|
|
}, [isLoggedIn]);
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarStyle: {
|
|
backgroundColor: "#252A34",
|
|
borderTopLeftRadius: 12,
|
|
borderTopRightRadius: 12,
|
|
position: "absolute",
|
|
overflow: "hidden",
|
|
},
|
|
tabBarActiveTintColor: "#fff",
|
|
tabBarInactiveTintColor: "#aaa",
|
|
}}
|
|
>
|
|
{TAB_CONFIG.map(({ name, title, Icon, IconFilled }) => (
|
|
<Tabs.Screen
|
|
key={name}
|
|
name={name}
|
|
options={{
|
|
title,
|
|
tabBarIcon: ({ color, focused }) => {
|
|
const IconComponent = focused ? IconFilled : Icon;
|
|
return <IconComponent />;
|
|
},
|
|
}}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|