shaily/BuildOptix
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navigation And screen is addded

Browse Source
This commit is contained in:
Shaily Mishra
2026-08-08 20:36:52 +05:30
parent 2a362a2962
commit 946369d93a
11 changed files with 574 additions and 3038 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
App.tsx
View File

@@ -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 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 ( 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>
); );
} }

3061
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -6,18 +6,19 @@
"android": "react-native run-android", "android": "react-native run-android",
"ios": "react-native run-ios", "ios": "react-native run-ios",
"lint": "eslint .", "lint": "eslint .",
"start": "react-native start", "start": "react-native start --port 8082",
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"@react-native/new-app-screen": "0.86.0", "@react-native/new-app-screen": "0.86.0",
"@react-navigation/bottom-tabs": "^7.18.15", "@react-navigation/bottom-tabs": "^7.18.15",
"@react-navigation/native": "^7.3.15", "@react-navigation/native": "^7.3.15",
"@react-navigation/native-stack": "^7.18.8",
"expo-router": "^57.0.11", "expo-router": "^57.0.11",
"react": "19.2.3", "react": "19.2.3",
"react-native": "0.86.0", "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-svg": "^15.15.5",
"react-native-vector-icons": "^10.3.0" "react-native-vector-icons": "^10.3.0"
}, },

31
src/components/Home/header.tsx
View File

@@ -1,27 +1,35 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native'; // 1. Import hook
import { COLORS } from '../../constants/color'; import { COLORS } from '../../constants/color';
import { HeaderProps } from '../../types/type'; import { HeaderProps } from '../../types/type';
import { styles } from '../../styles/Home/HeaderStyles'; import { styles } from '../../styles/Home/HeaderStyles';
export default function Header({ export default function Header({
userName, userName,
locationName, locationName,
badgeCount = 0, badgeCount = 0,
}: HeaderProps) { }: HeaderProps) {
// 2. Access navigation object
const navigation = useNavigation<any>();
return ( return (
<View style={styles.container}> <View style={styles.container}>
{/* Greeting & Location Selector */}
<View> <View>
<Text style={styles.greeting}> <Text style={styles.greeting}>
Good morning, {userName} Good morning, {userName}
</Text> </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}> <Text style={styles.location}>
{locationName} {locationName}
</Text> </Text>
@@ -32,11 +40,15 @@ export default function Header({
color={COLORS.textSecondary} color={COLORS.textSecondary}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </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 <Ionicons
name="notifications-outline" name="notifications-outline"
size={24} size={24}
@@ -50,7 +62,6 @@ export default function Header({
</Text> </Text>
</View> </View>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>

112
src/navigation/bottonTabBar.tsx
View File

@@ -1,97 +1,123 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { styles } from '../styles/BottontabStyle'; import { styles } from '../styles/BottontabStyle';
import { COLORS } from '../constants/color'; 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 ( return (
<View style={styles.container}> <View style={styles.container}>
{/* Home */} {/* Home */}
<TouchableOpacity <TouchableOpacity
style={styles.tab} style={styles.tab}
onPress={() => setActiveTab('Home')} onPress={() => navigation.navigate('Home')}
> >
<Ionicons <Ionicons
name={activeTab === 'Home' ? "home" : "home-outline"} name={currentRoute === 'Home' ? 'home' : 'home-outline'}
size={22} 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 Home
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
{/* Assets */} {/* Assets */}
<TouchableOpacity <TouchableOpacity
style={styles.tab} style={styles.tab}
onPress={() => setActiveTab('Assets')} onPress={() => navigation.navigate('Assets')}
> >
<Ionicons <Ionicons
name={activeTab === 'Assets' ? "cube" : "cube-outline"} name={currentRoute === 'Assets' ? 'cube' : 'cube-outline'}
size={22} 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 Assets
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
{/* Scan Button */} {/* Scan Button */}
<View style={styles.scanContainer}> <View style={styles.scanContainer}>
<TouchableOpacity <TouchableOpacity
style={styles.scanButton} style={styles.scanButton}
onPress={() => setActiveTab('Scan')} onPress={() => navigation.navigate('Scan')}
> >
<Ionicons name="scan" size={28} color="#000" /> <Ionicons name="scan" size={28} color="#000" />
</TouchableOpacity> </TouchableOpacity>
<Text style={[styles.label, { color: activeTab === 'Scan' ? COLORS.tabActive : COLORS.tabInactive }]}> <Text
style={[
styles.label,
{ color: currentRoute === 'Scan' ? COLORS.tabActive : COLORS.tabInactive },
]}
>
Scan Scan
</Text> </Text>
</View> </View>
{/* Alarms */} {/* Alarms */}
<TouchableOpacity <TouchableOpacity
style={styles.tab} style={styles.tab}
onPress={() => setActiveTab('Alarms')} onPress={() => navigation.navigate('Alarms')}
> >
<Ionicons <Ionicons
name={activeTab === 'Alarms' ? "notifications" : "notifications-outline"} name={
currentRoute === 'Alarms'
? 'notifications'
: 'notifications-outline'
}
size={22} 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 Alarms
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
{/* More */} {/* More */}
<TouchableOpacity <TouchableOpacity
style={styles.tab} style={styles.tab}
onPress={() => setActiveTab('More')} onPress={() => navigation.navigate('More')}
> >
<Ionicons <Ionicons
name={activeTab === 'More' ? "ellipsis-horizontal" : "ellipsis-horizontal-outline"} name={
currentRoute === 'More'
? 'ellipsis-horizontal'
: 'ellipsis-horizontal-outline'
}
size={22} 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 More
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
); );
} }

25
src/screens/AlarmScreen/alarmScreen.tsx
View File

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

31
src/screens/AssetsScreen/assetScreen.tsx
View File

@@ -1,24 +1,18 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
SafeAreaView,
View, View,
Text, Text,
FlatList, FlatList,
StyleSheet,
StatusBar, StatusBar,
} from 'react-native'; } 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 { SAMPLE_ASSETS } from '../../constants/data';
import { COLORS } from '../../constants/color'; import { COLORS } from '../../constants/color';
import { } from '../../types/type';
import { SearchBar } from '../../components/Asset/searchbar'; import { SearchBar } from '../../components/Asset/searchbar';
import { AssetCard } from '../../components/Asset/assetCard'; 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'; import { styles } from '../../styles/Asset/assetScreen';
export default function AssetsScreen() { export default function AssetsScreen() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@@ -29,11 +23,11 @@ export default function AssetsScreen() {
); );
return ( 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} /> <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
<View style={styles.content}>
<View style={[styles.content, { flex: 1 }]}>
{/* Header Section */} {/* Header Section */}
<Text style={styles.title}>Assets</Text> <Text style={styles.title}>Assets</Text>
<Text style={styles.subtitle}>251 assets · 242 online</Text> <Text style={styles.subtitle}>251 assets · 242 online</Text>
@@ -42,17 +36,14 @@ export default function AssetsScreen() {
<SearchBar value={search} onChangeText={setSearch} /> <SearchBar value={search} onChangeText={setSearch} />
{/* Assets List */} {/* Assets List */}
<FlatList <FlatList
data={filteredAssets} data={filteredAssets}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
renderItem={({ item }) => <AssetCard asset={item} />} renderItem={({ item }) => <AssetCard asset={item} />}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
/> contentContainerStyle={{ paddingBottom: 20 }}
/>
</View> </View>
</SafeAreaView>
</SafeAreaProvider>
); );
} }

174
src/screens/HomeScreen/homeScreen.tsx
View File

@@ -1,106 +1,96 @@
import React from 'react'; import React from 'react';
import { View, ScrollView,Text } from 'react-native'; 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 { cards } from '../../constants/data';
import { COLORS } from '../../constants/color'; import { COLORS } from '../../constants/color';
import Header from '../../components/Home/header'; import Header from '../../components/Home/header';
import SiteHealthCard from '../../components/Home/siteHealthCard'; import SiteHealthCard from '../../components/Home/siteHealthCard';
import ActionGrid from '../../components/Home/actionGrid'; import ActionGrid from '../../components/Home/actionGrid';
import StatCard from '../../components/Home/statCard'; import StatCard from '../../components/Home/statCard';
import Card from '../../components/common/card'; import Card from '../../components/common/card';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import styles from '../../styles/Home/homeScreen'; import styles from '../../styles/Home/HomeScreen';
export default function HomeScreen() { export default function HomeScreen() {
return ( return (
<SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}> <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
{/* 2. Main container needs flex: 1 */}
<View style={{ flex: 1, backgroundColor: COLORS.background }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
{/* Your content */}
<Header <Header
userName="Arjun" userName="Arjun"
locationName="Godrej One — Vikhroli" locationName="Godrej One — Vikhroli"
badgeCount={3} badgeCount={3}
/> />
<SiteHealthCard/> <SiteHealthCard />
<ActionGrid/> <ActionGrid />
<View style={styles.gridRow}>
{cards.slice(2, 4).map((card) => (
<StatCard
key={card.title}
title={card.title.toUpperCase()}
icon={card.icon}
iconColor={card.color}
value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
subValue={
card.unit
? card.unit
: card.value.includes('/')
? `/ ${card.value.split('/')[1].trim()}`
: undefined
}
highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
/>
))}
</View>
<View style={styles.gridRow}> <View style={styles.gridRow}>
{cards.slice(0, 2).map((card) => ( {cards.slice(2, 4).map((card) => (
<StatCard <StatCard
key={card.title} key={card.title}
title={card.title.toUpperCase()} title={card.title.toUpperCase()}
icon={card.icon} icon={card.icon}
iconColor={card.color} iconColor={card.color}
value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value} value={
subValue={ card.value.includes('/')
card.unit ? card.value.split('/')[0].trim()
? card.unit : card.value
: card.value.includes('/') }
? `/ ${card.value.split('/')[1].trim()}` subValue={
: undefined card.unit
} ? card.unit
highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined} : card.value.includes('/')
/> ? `/ ${card.value.split('/')[1].trim()}`
))} : undefined
</View> }
<Card style={styles.card}> highlightValueColor={
card.title === 'Air Quality' ? COLORS.orange : undefined
}
/>
))}
</View>
<View style={styles.header}> <View style={styles.gridRow}>
{cards.slice(0, 2).map((card) => (
<StatCard
key={card.title}
title={card.title.toUpperCase()}
icon={card.icon}
iconColor={card.color}
value={
card.value.includes('/')
? card.value.split('/')[0].trim()
: card.value
}
subValue={
card.unit
? card.unit
: card.value.includes('/')
? `/ ${card.value.split('/')[1].trim()}`
: undefined
}
highlightValueColor={
card.title === 'Air Quality' ? COLORS.orange : undefined
}
/>
))}
</View>
<Ionicons <Card style={styles.card}>
name="sparkles-outline" <View style={styles.header}>
size={22} <Ionicons
color={COLORS.orange} name="sparkles-outline"
/> size={22}
color={COLORS.orange}
<Text style={styles.title}> />
OPTIX AI RECOMMENDATION <Text style={styles.title}>OPTIX AI RECOMMENDATION</Text>
</Text> </View>
<Text style={styles.message}>
</View> Chiller CH-02 running 14% below efficiency curve. Shifting load to
CH-01 saves ≈ ₹8,400/day.
<Text style={styles.message}> </Text>
Chiller CH-02 running 14% below efficiency curve. </Card>
Shifting load to CH-01 saves ≈ ₹8,400/day. </ScrollView>
</Text> </SafeAreaView>
</Card>
</ScrollView>
</View>
</SafeAreaProvider>
); );
}; }

22
src/screens/ModuleScreen/moduleScreen.tsx
View File

@@ -1,27 +1,21 @@
import React from 'react'; import React from 'react';
import { import {
SafeAreaView,
View, View,
Text, Text,
ScrollView, ScrollView,
StyleSheet,
StatusBar, StatusBar,
} from 'react-native'; } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'; // 1. Import SafeAreaView from safe-area-context
import { COLORS } from '../../constants/color'; import { COLORS } from '../../constants/color';
import { ModuleTile } from '../../components/Module/module'; import { ModuleTile } from '../../components/Module/module';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MODULES_DATA } from '../../constants/data'; import { MODULES_DATA } from '../../constants/data';
import styles from '../../styles/Module/module'; import styles from '../../styles/Module/module';
export default function ModulesScreen() { export default function ModulesScreen() {
return ( 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} /> <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
<ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}> <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
@@ -37,12 +31,10 @@ export default function ModulesScreen() {
<ModuleTile <ModuleTile
key={item.id} key={item.id}
module={item} module={item}
/> />
))} ))}
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaProvider> </SafeAreaView>
); );
} }

30
src/screens/Notification/notification.tsx
View File

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

35
src/screens/ProfileScreen/profilescreen.tsx
View File

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