navigation And screen is addded

App.tsx

@@ -1,32 +1,68 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import ModuleScreen from './src/screens/ModuleScreen/moduleScreen';
-import AlarmsScreen from './src/screens/AlarmScreen/alarmScreen';
-import AssetsScreen from './src/screens/AssetsScreen/assetScreen';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// Import your custom BottomTabBar
+import BottomTabBar from './src/navigation/bottonTabBar';
+
+// Screens
 import HomeScreen from './src/screens/HomeScreen/homeScreen';
-import BottomTabBar, { TabType } from './src/navigation/bottonTabBar';
+import AssetsScreen from './src/screens/AssetsScreen/assetScreen';
+import AlarmsScreen from './src/screens/AlarmScreen/alarmScreen';
+import ModulesScreen from './src/screens/ModuleScreen/moduleScreen';
+import ProfileScreen from './src/screens/ProfileScreen/profilescreen';
+import NotificationsScreen from './src/screens/Notification/notification';
 
+// 1. Bottom Tab Navigator
+const MainTabs = createBottomTabNavigator({
+  tabBar: (props) => <BottomTabBar {...props} />,
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: { headerShown: false },
+    },
+    Assets: {
+      screen: AssetsScreen,
+      options: { headerShown: false },
+    },
+    Alarms: {
+      screen: AlarmsScreen,
+      options: { headerShown: false },
+    },
+    More: {
+      screen: ModulesScreen,
+      options: { headerShown: false, title: 'Modules' },
+    },
+  },
+});
 
+// 2. Root Stack Navigator (HIDE DEFAULT HEADERS HERE)
+const RootStack = createNativeStackNavigator({
+  screens: {
+    MainTabs: {
+      screen: MainTabs,
+      options: { headerShown: false },
+    },
+    Profile: {
+      screen: ProfileScreen,
+      options: { headerShown: false }, // <--- CHANGE THIS FROM title: 'Profile' TO headerShown: false
+    },
+    Notification: {
+      screen: NotificationsScreen,
+      options: { headerShown: false }, // <--- CHANGE THIS TOO TO HIDE WHITE HEADER ON NOTIFICATIONS
+    },
+  },
+});
 
-export default function App(): React.JSX.Element {
-  // Use generic type annotation for useState
-  const [activeTab, setActiveTab] = useState<TabType>('Home');
+// 3. Navigation Component
+const Navigation = createStaticNavigation(RootStack);
 
+export default function App() {
   return (
-    <View style={{ flex: 1 }}>
-      
-      {/* SCREEN AREA */}
-      <View style={{ flex: 1 }}>
-        {activeTab === 'Home' && <HomeScreen />}
-        {activeTab === 'Assets' && <AssetsScreen />}
-        {/* {activeTab === 'Scan' && <ScanScreen />} */}
-        {activeTab === 'Alarms' && <AlarmsScreen />}
-        {activeTab === 'More' && <ModuleScreen />}
-      </View>
-
-      {/* BOTTOM TAB BAR */}
-      <BottomTabBar activeTab={activeTab} setActiveTab={setActiveTab} />
-      
-    </View>
+    <SafeAreaProvider>
+      <Navigation />
+    </SafeAreaProvider>
   );
 }