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 { 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>
);
}

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",
"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-screens": "^4.26.2",
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "~4.26.0",
"react-native-svg": "^15.15.5",
"react-native-vector-icons": "^10.3.0"
},

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

@@ -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';
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>

84
src/navigation/bottonTabBar.tsx
View File

@@ -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 type TabType = 'Home' | 'Assets' | 'Scan' | 'Alarms' | 'More';
export default function BottomTabBar({ state, navigation }: BottomTabBarProps) {
// 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>
);
}

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

@@ -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
alarm={item}
/>
<AlarmCard alarm={item} />
)}
ListHeaderComponent={
<View style={styles.header}>
@@ -44,7 +36,6 @@ export default function AlarmsScreen() {
contentContainerStyle={styles.listContent}
showsVerticalScrollIndicator={false}
/>
</SafeAreaProvider>
</SafeAreaView>
);
}

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

@@ -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>
</SafeAreaProvider>
</SafeAreaView>
);
}

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

@@ -1,6 +1,6 @@
import React from 'react';
import { View, ScrollView,Text } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { View, ScrollView, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'; // Use SafeAreaView instead
import { cards } from '../../constants/data';
import { COLORS } from '../../constants/color';
@@ -10,32 +10,32 @@ 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 }}>
{/* 2. Main container needs flex: 1 */}
<View style={{ flex: 1, backgroundColor: COLORS.background }}>
<SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }}>
<ScrollView contentContainerStyle={styles.scrollContent}>
{/* Your content */}
<Header
userName="Arjun"
locationName="Godrej One — Vikhroli"
badgeCount={3}
/>
<SiteHealthCard/>
<ActionGrid/>
<SiteHealthCard />
<ActionGrid />
<View style={styles.gridRow}>
<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}
value={
card.value.includes('/')
? card.value.split('/')[0].trim()
: card.value
}
subValue={
card.unit
? card.unit
@@ -43,10 +43,12 @@ 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>
</View>
<View style={styles.gridRow}>
{cards.slice(0, 2).map((card) => (
@@ -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>
</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.
Shifting load to CH-01 saves ≈ ₹8,400/day.
Chiller CH-02 running 14% below efficiency curve. Shifting load to
CH-01 saves ≈ ₹8,400/day.
</Text>
</Card>
</ScrollView>
</View>
</SafeAreaProvider>
</SafeAreaView>
);
};
}

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

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

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

@@ -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({ navigation }: any) {
export default function NotificationsScreen() {
const navigation = useNavigation(); // 3. Navigation hook instance
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>
);
}

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

@@ -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}>
{/* Header */}
<ScrollView
contentContainerStyle={styles.scrollContent}
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>
);
}