navigation And screen is addded

App.tsx

@@ -1,32 +1,68 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
-import ModuleScreen from './src/screens/ModuleScreen/moduleScreen';
+import { createStaticNavigation } from '@react-navigation/native';
-import AlarmsScreen from './src/screens/AlarmScreen/alarmScreen';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import AssetsScreen from './src/screens/AssetsScreen/assetScreen';
+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 {
+// 3. Navigation Component
-  // Use generic type annotation for useState
+const Navigation = createStaticNavigation(RootStack);
-  const [activeTab, setActiveTab] = useState<TabType>('Home');
 
+export default function App() {
   return (
-    <View style={{ flex: 1 }}>
+    <SafeAreaProvider>
-      
+      <Navigation />
-      {/* SCREEN AREA */}
+    </SafeAreaProvider>
-      <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>
   );
 }

package.json

@@ -6,18 +6,19 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
-    "start": "react-native start",
+      "start": "react-native start --port 8082",
     "test": "jest"
   },
   "dependencies": {
     "@react-native/new-app-screen": "0.86.0",
     "@react-navigation/bottom-tabs": "^7.18.15",
     "@react-navigation/native": "^7.3.15",
+    "@react-navigation/native-stack": "^7.18.8",
     "expo-router": "^57.0.11",
     "react": "19.2.3",
     "react-native": "0.86.0",
-    "react-native-safe-area-context": "^5.8.1",
+    "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "^4.26.2",
+    "react-native-screens": "~4.26.0",
     "react-native-svg": "^15.15.5",
     "react-native-vector-icons": "^10.3.0"
   },

src/components/Home/header.tsx

@@ -1,27 +1,35 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useNavigation } from '@react-navigation/native'; // 1. Import hook
+
 import { COLORS } from '../../constants/color';
 import { HeaderProps } from '../../types/type';
 import { styles } from '../../styles/Home/HeaderStyles';
 
-
-
 export default function Header({
   userName,
   locationName,
   badgeCount = 0,
 }: HeaderProps) {
+  // 2. Access navigation object
+  const navigation = useNavigation<any>();
+
   return (
     <View style={styles.container}>
 
+      {/* Greeting & Location Selector */}
       <View>
-
         <Text style={styles.greeting}>
           Good morning, {userName}
         </Text>
 
-        <TouchableOpacity style={styles.locationContainer}>
+        {/* 3. Navigate to Profile screen on location press */}
+        <TouchableOpacity 
+          style={styles.locationContainer}
+          onPress={() => navigation.navigate('Profile')}
+          activeOpacity={0.7}
+        >
           <Text style={styles.location}>
             {locationName}
           </Text>
@@ -32,11 +40,15 @@ export default function Header({
             color={COLORS.textSecondary}
           />
         </TouchableOpacity>
-
       </View>
 
-      <TouchableOpacity style={styles.notificationBtn}>
+      {/* Notification Button */}
-
+      {/* 4. Navigate to Notification screen on icon press */}
+      <TouchableOpacity 
+        style={styles.notificationBtn}
+        onPress={() => navigation.navigate('Notification')}
+        activeOpacity={0.7}
+      >
         <Ionicons
           name="notifications-outline"
           size={24}
@@ -50,7 +62,6 @@ export default function Header({
             </Text>
           </View>
         )}
-
       </TouchableOpacity>
 
     </View>

src/navigation/bottonTabBar.tsx

@@ -1,34 +1,33 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 
 import { styles } from '../styles/BottontabStyle';
 import { COLORS } from '../constants/color';
 
-// Define allowed tab names as a TypeScript type
+export default function BottomTabBar({ state, navigation }: BottomTabBarProps) {
-export type TabType = 'Home' | 'Assets' | 'Scan' | 'Alarms' | 'More';
+  // Determine current active route name
+  const currentRoute = state.routes[state.index].name;
 
-// Interface for component props
-interface BottomTabBarProps {
-  activeTab: TabType;
-  setActiveTab: (tab: TabType) => void;
-}
-
-export default function BottomTabBar({ activeTab, setActiveTab }: BottomTabBarProps) {
   return (
     <View style={styles.container}>
-
       {/* Home */}
       <TouchableOpacity
         style={styles.tab}
-        onPress={() => setActiveTab('Home')}
+        onPress={() => navigation.navigate('Home')}
       >
         <Ionicons
-          name={activeTab === 'Home' ? "home" : "home-outline"} 
+          name={currentRoute === 'Home' ? 'home' : 'home-outline'}
           size={22}
-          color={activeTab === 'Home' ? COLORS.tabActive : COLORS.tabInactive} 
+          color={currentRoute === 'Home' ? COLORS.tabActive : COLORS.tabInactive}
         />
-        <Text style={[styles.label, { color: activeTab === 'Home' ? COLORS.tabActive : COLORS.tabInactive }]}>
+        <Text
+          style={[
+            styles.label,
+            { color: currentRoute === 'Home' ? COLORS.tabActive : COLORS.tabInactive },
+          ]}
+        >
           Home
         </Text>
       </TouchableOpacity>
@@ -36,14 +35,19 @@ export default function BottomTabBar({ activeTab, setActiveTab }: BottomTabBarPr
       {/* Assets */}
       <TouchableOpacity
         style={styles.tab}
-        onPress={() => setActiveTab('Assets')}
+        onPress={() => navigation.navigate('Assets')}
       >
         <Ionicons
-          name={activeTab === 'Assets' ? "cube" : "cube-outline"} 
+          name={currentRoute === 'Assets' ? 'cube' : 'cube-outline'}
           size={22}
-          color={activeTab === 'Assets' ? COLORS.tabActive : COLORS.tabInactive} 
+          color={currentRoute === 'Assets' ? COLORS.tabActive : COLORS.tabInactive}
         />
-        <Text style={[styles.label, { color: activeTab === 'Assets' ? COLORS.tabActive : COLORS.tabInactive }]}>
+        <Text
+          style={[
+            styles.label,
+            { color: currentRoute === 'Assets' ? COLORS.tabActive : COLORS.tabInactive },
+          ]}
+        >
           Assets
         </Text>
       </TouchableOpacity>
@@ -52,12 +56,17 @@ export default function BottomTabBar({ activeTab, setActiveTab }: BottomTabBarPr
       <View style={styles.scanContainer}>
         <TouchableOpacity
           style={styles.scanButton}
-          onPress={() => setActiveTab('Scan')}
+          onPress={() => navigation.navigate('Scan')}
         >
           <Ionicons name="scan" size={28} color="#000" />
         </TouchableOpacity>
 
-        <Text style={[styles.label, { color: activeTab === 'Scan' ? COLORS.tabActive : COLORS.tabInactive }]}>
+        <Text
+          style={[
+            styles.label,
+            { color: currentRoute === 'Scan' ? COLORS.tabActive : COLORS.tabInactive },
+          ]}
+        >
           Scan
         </Text>
       </View>
@@ -65,14 +74,23 @@ export default function BottomTabBar({ activeTab, setActiveTab }: BottomTabBarPr
       {/* Alarms */}
       <TouchableOpacity
         style={styles.tab}
-        onPress={() => setActiveTab('Alarms')}
+        onPress={() => navigation.navigate('Alarms')}
       >
         <Ionicons
-          name={activeTab === 'Alarms' ? "notifications" : "notifications-outline"}
+          name={
+            currentRoute === 'Alarms'
+              ? 'notifications'
+              : 'notifications-outline'
+          }
           size={22}
-          color={activeTab === 'Alarms' ? COLORS.tabActive : COLORS.tabInactive}
+          color={currentRoute === 'Alarms' ? COLORS.tabActive : COLORS.tabInactive}
         />
-        <Text style={[styles.label, { color: activeTab === 'Alarms' ? COLORS.tabActive : COLORS.tabInactive }]}>
+        <Text
+          style={[
+            styles.label,
+            { color: currentRoute === 'Alarms' ? COLORS.tabActive : COLORS.tabInactive },
+          ]}
+        >
           Alarms
         </Text>
       </TouchableOpacity>
@@ -80,18 +98,26 @@ export default function BottomTabBar({ activeTab, setActiveTab }: BottomTabBarPr
       {/* More */}
       <TouchableOpacity
         style={styles.tab}
-        onPress={() => setActiveTab('More')}
+        onPress={() => navigation.navigate('More')}
       >
         <Ionicons
-          name={activeTab === 'More' ? "ellipsis-horizontal" : "ellipsis-horizontal-outline"}
+          name={
+            currentRoute === 'More'
+              ? 'ellipsis-horizontal'
+              : 'ellipsis-horizontal-outline'
+          }
           size={22}
-          color={activeTab === 'More' ? COLORS.tabActive : COLORS.tabInactive}
+          color={currentRoute === 'More' ? COLORS.tabActive : COLORS.tabInactive}
         />
-        <Text style={[styles.label, { color: activeTab === 'More' ? COLORS.tabActive : COLORS.tabInactive }]}>
+        <Text
+          style={[
+            styles.label,
+            { color: currentRoute === 'More' ? COLORS.tabActive : COLORS.tabInactive },
+          ]}
+        >
           More
         </Text>
       </TouchableOpacity>
-
     </View>
   );
 }

src/screens/AlarmScreen/alarmScreen.tsx

@@ -1,39 +1,31 @@
 import React, { useState } from 'react';
 import {
-  
   View,
   Text,
   FlatList,
-  StyleSheet,
   StatusBar,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context'; // 1. Import SafeAreaView
+
 import { AlarmItem } from '../../types/type';
 import { ALARM_DATA } from '../../constants/data';
 import AlarmCard from '../../components/Alarm/alarmCard';
 import { COLORS } from '../../constants/color';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { styles } from '../../styles/Alarm/alarmScreen';
 
-
-
-
 export default function AlarmsScreen() {
   const [alarms, setAlarms] = useState<AlarmItem[]>(ALARM_DATA);
 
- 
-
   return (
-    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
+    // 2. Replace SafeAreaProvider with SafeAreaView
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }} edges={['top']}>
       <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
       
       <FlatList
         data={alarms}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
-          <AlarmCard
+          <AlarmCard alarm={item} />
-            alarm={item}
-          
-          />
         )}
         ListHeaderComponent={
           <View style={styles.header}>
@@ -44,7 +36,6 @@ export default function AlarmsScreen() {
         contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
       />
-    </SafeAreaProvider>
+    </SafeAreaView>
   );
 }
-

src/screens/AssetsScreen/assetScreen.tsx

@@ -1,24 +1,18 @@
 import React, { useState } from 'react';
 import {
-  SafeAreaView,
   View,
   Text,
   FlatList,
-  StyleSheet,
   StatusBar,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context'; // 1. Import SafeAreaView from safe-area-context
+
 import { SAMPLE_ASSETS } from '../../constants/data';
 import { COLORS } from '../../constants/color';
-import {  } from '../../types/type';
 import { SearchBar } from '../../components/Asset/searchbar';
 import { AssetCard } from '../../components/Asset/assetCard';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import BottomTabBar from '../../navigation/bottonTabBar';
-import { ScrollView } from 'react-native';
 import { styles } from '../../styles/Asset/assetScreen';
 
-
-
 export default function AssetsScreen() {
   const [search, setSearch] = useState('');
 
@@ -29,11 +23,11 @@ export default function AssetsScreen() {
   );
 
   return (
-   <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
+    // 2. Wrap with SafeAreaView and set edges to ['top']
-   
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }} edges={['top']}>
       <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
-      <View style={styles.content}>
 
+      <View style={[styles.content, { flex: 1 }]}>
         {/* Header Section */}
         <Text style={styles.title}>Assets</Text>
         <Text style={styles.subtitle}>251 assets · 242 online</Text>
@@ -47,12 +41,9 @@ export default function AssetsScreen() {
           keyExtractor={(item) => item.id}
           renderItem={({ item }) => <AssetCard asset={item} />}
           showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 20 }}
         />
-           
       </View>
-     
+    </SafeAreaView>
-       
-    </SafeAreaProvider>
   );
 }
-

src/screens/HomeScreen/homeScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ScrollView, Text } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context'; // Use SafeAreaView instead
 
 import { cards } from '../../constants/data';
 import { COLORS } from '../../constants/color';
@@ -10,16 +10,12 @@ import  ActionGrid  from '../../components/Home/actionGrid';
 import StatCard from '../../components/Home/statCard';
 import Card from '../../components/common/card';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import styles from '../../styles/Home/homeScreen';
+import styles from '../../styles/Home/HomeScreen';
 
 export default function HomeScreen() {
   return (
-    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }}>
-      
-      {/* 2. Main container needs flex: 1 */}
-      <View style={{ flex: 1, backgroundColor: COLORS.background }}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
-          {/* Your content */}
         <Header
           userName="Arjun"
           locationName="Godrej One — Vikhroli"
@@ -35,7 +31,11 @@ export default function HomeScreen()  {
               title={card.title.toUpperCase()}
               icon={card.icon}
               iconColor={card.color}
-      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
+              value={
+                card.value.includes('/')
+                  ? card.value.split('/')[0].trim()
+                  : card.value
+              }
               subValue={
                 card.unit
                   ? card.unit
@@ -43,7 +43,9 @@ export default function HomeScreen()  {
                   ? `/ ${card.value.split('/')[1].trim()}`
                   : undefined
               }
-      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
+              highlightValueColor={
+                card.title === 'Air Quality' ? COLORS.orange : undefined
+              }
             />
           ))}
         </View>
@@ -55,7 +57,11 @@ export default function HomeScreen()  {
               title={card.title.toUpperCase()}
               icon={card.icon}
               iconColor={card.color}
-      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
+              value={
+                card.value.includes('/')
+                  ? card.value.split('/')[0].trim()
+                  : card.value
+              }
               subValue={
                 card.unit
                   ? card.unit
@@ -63,44 +69,28 @@ export default function HomeScreen()  {
                   ? `/ ${card.value.split('/')[1].trim()}`
                   : undefined
               }
-      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
+              highlightValueColor={
+                card.title === 'Air Quality' ? COLORS.orange : undefined
+              }
             />
           ))}
         </View>
+
         <Card style={styles.card}>
-
           <View style={styles.header}>
-
             <Ionicons
               name="sparkles-outline"
               size={22}
               color={COLORS.orange}
             />
-
+            <Text style={styles.title}>OPTIX AI RECOMMENDATION</Text>
-        <Text style={styles.title}>
-          OPTIX AI RECOMMENDATION
-        </Text>
-
           </View>
-
           <Text style={styles.message}>
-        Chiller CH-02 running 14% below efficiency curve.
+            Chiller CH-02 running 14% below efficiency curve. Shifting load to
-        Shifting load to CH-01 saves ≈ ₹8,400/day.
+            CH-01 saves ≈ ₹8,400/day.
           </Text>
-
         </Card>
-
       </ScrollView>
-
+    </SafeAreaView>
-        
-      
-        
-        
-      </View>
-  
-      </SafeAreaProvider>
-    
   );
-};
+}
-
-

src/screens/ModuleScreen/moduleScreen.tsx

@@ -1,27 +1,21 @@
 import React from 'react';
 import {
-  SafeAreaView,
   View,
   Text,
   ScrollView,
-  StyleSheet,
   StatusBar,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context'; // 1. Import SafeAreaView from safe-area-context
+
 import { COLORS } from '../../constants/color';
 import { ModuleTile } from '../../components/Module/module';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { MODULES_DATA } from '../../constants/data';
 import styles from '../../styles/Module/module';
 
-
-
-
 export default function ModulesScreen() {
- 
-
   return (
-    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
+    // 2. Replace SafeAreaProvider with SafeAreaView and set edges
-   
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }} edges={['top']}>
       <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
 
       <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
@@ -37,12 +31,10 @@ export default function ModulesScreen() {
             <ModuleTile
               key={item.id}
               module={item}
-             
             />
           ))}
         </View>
       </ScrollView>
-   </SafeAreaProvider>
+    </SafeAreaView>
   );
 }
-

src/screens/Notification/notification.tsx

@@ -1,47 +1,42 @@
 import React, { useState } from 'react';
 import {
-  SafeAreaView,
   View,
   Text,
   SectionList,
   TouchableOpacity,
-  StyleSheet,
   StatusBar,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context'; // 1. Import SafeAreaView
+import { useNavigation } from '@react-navigation/native'; // 2. Import useNavigation hook
 import Ionicons from 'react-native-vector-icons/Ionicons';
+
 import { COLORS } from '../../constants/color';
 import { NOTIFICATIONS_DATA } from '../../constants/data';
 import { NotificationCard } from '../../components/Notification/notificationcard';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { styles } from '../../styles/Notification/notification';
 
-
+export default function NotificationsScreen() {
-
+  const navigation = useNavigation(); // 3. Navigation hook instance
-
-export default function NotificationsScreen({ navigation }: any) {
   const [sections, setSections] = useState(NOTIFICATIONS_DATA);
 
- 
-
   const handleBackPress = () => {
-    if (navigation) {
     navigation.goBack();
-    }
   };
 
   return (
-    <SafeAreaProvider style={styles.container}>
+    // 4. Use SafeAreaView with edges set to top
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }} edges={['top']}>
       <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
 
       {/* Header Bar */}
       <View style={styles.headerRow}>
-        <TouchableOpacity style={styles.backButton} onPress={handleBackPress}>
+        <TouchableOpacity style={styles.backButton} onPress={handleBackPress} activeOpacity={0.7}>
           <Ionicons name="chevron-back" size={20} color={COLORS.textPrimary} />
         </TouchableOpacity>
 
         <Text style={styles.headerTitle}>Notifications</Text>
 
-        <TouchableOpacity >
+        <TouchableOpacity activeOpacity={0.7}>
           <Text style={styles.markAllReadText}>Mark all read</Text>
         </TouchableOpacity>
       </View>
@@ -58,7 +53,6 @@ export default function NotificationsScreen({ navigation }: any) {
         showsVerticalScrollIndicator={false}
         stickySectionHeadersEnabled={false}
       />
-    </SafeAreaProvider>
+    </SafeAreaView>
   );
 }
-

src/screens/ProfileScreen/profilescreen.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  StyleSheet,
   Text,
   View,
   TouchableOpacity,
@@ -9,19 +8,29 @@ import {
   StatusBar,
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useNavigation } from '@react-navigation/native'; // 1. Import hook
+import { SafeAreaView } from 'react-native-safe-area-context'; // 2. Import SafeAreaView
+
 import { styles } from '../../styles/Profile/profile';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 export default function ProfileScreen() {
+  const navigation = useNavigation(); // 3. Get navigation instance
 
   return (
-    <SafeAreaProvider style={styles.container}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0A111E' }} edges={['top']}>
       <StatusBar barStyle="light-content" backgroundColor="#0A111E" />
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+      <ScrollView
-        
+        contentContainerStyle={styles.scrollContent}
-        {/* Header */}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Custom Header */}
         <View style={styles.header}>
-          <TouchableOpacity style={styles.backButton} activeOpacity={0.7}>
+          {/* 4. Trigger back navigation */}
+          <TouchableOpacity
+            style={styles.backButton}
+            activeOpacity={0.7}
+            onPress={() => navigation.goBack()}
+          >
             <Ionicons name="chevron-back" size={20} color="#FFFFFF" />
           </TouchableOpacity>
           <Text style={styles.headerTitle}>Profile</Text>
@@ -66,7 +75,6 @@ export default function ProfileScreen() {
               <Text style={styles.menuText}>Push notifications</Text>
             </View>
             <Switch
-            
               trackColor={{ false: '#374151', true: '#10B981' }}
               thumbColor="#0F172A"
               ios_backgroundColor="#374151"
@@ -82,7 +90,6 @@ export default function ProfileScreen() {
               <Text style={styles.menuText}>Biometric login</Text>
             </View>
             <Switch
-             
               trackColor={{ false: '#374151', true: '#10B981' }}
               thumbColor="#0F172A"
               ios_backgroundColor="#374151"
@@ -117,9 +124,7 @@ export default function ProfileScreen() {
           <Ionicons name="log-out-outline" size={20} color="#EF4444" />
           <Text style={styles.signOutText}>Sign out</Text>
         </TouchableOpacity>
-
       </ScrollView>
-    </SafeAreaProvider>
+    </SafeAreaView>
   );
 }
-