import React, {useState, useEffect, useCallback, useRef} from 'react'; import { NavigationContainer, useNavigationContainerRef, } from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import { ActivityIndicator, View, StyleSheet, Alert, Text, Dimensions, } from 'react-native'; import Toast from 'react-native-toast-message'; import {LogBox} from 'react-native'; // Contexts and Utils import AsyncStorageManager from '../utils/AsyncStorageManager'; // Adjust path if needed import {UserProvider, useUser} from '../context/UserContext'; // Adjust path if needed import { MqttProvider, useMqtt, MqttConnectionState, } from '../context/MqttContext'; // Adjust path if needed // Screens and Navigators import LoginScreen from '../screens/LoginScreen'; // Adjust path if needed import MainTabNavigator from './MainTabNavigator'; // Adjust path if needed import CommunityItemDetailScreen from '../screens/CommunityItemDetailScreen'; // <<< Import the detail screen import GalleryScreen from '../screens/GalleryScreen'; import FrontCameraScreen from '../screens/FrontCameraScreen'; import DeviceScreen from '../screens/DeviceScreen'; import ZoneScreen from '../screens/ZoneScreen'; import AlarmsScreen from '../screens/AlarmsScreen'; import DeviceItemScreen from '../screens/DeviceItemScreen'; // Notification Service import NotificationService, { ACTION_ACCEPT, ACTION_DECLINE, ACTION_SILENCE, } from '../services/NotificationService'; // Adjust path if needed import CCTVScreen from '../screens/CCTVScreen'; import ZoneItemScreen from '../screens/ZoneItemScreen'; const Stack = createNativeStackNavigator(); const {height: screenHeight} = Dimensions.get('window'); // --- Notification Handling Logic (Keep as before) --- const handleNotificationOpen = (navigationRef, data, action) => { console.log('Handling Notification Open/Action:', {data, action}); if (!data) { console.warn('No data found in notification to handle.'); return; } const targetScreen = data.screen; const notificationId = data.localNotificationId; // Assuming you pass this in userInfo // Example action handling (customize as needed) if (action) { console.log( `Action '${action}' taken on notification ID: ${notificationId}.`, ); // Handle specific actions like ACCEPT, DECLINE, SILENCE if (action === ACTION_ACCEPT) { console.log(`Handling ACCEPT action.`); // Navigate or perform accept logic if (targetScreen && navigationRef.isReady()) { navigationRef.navigate(targetScreen, { notificationData: data, actionTaken: action, }); } } else if (action === ACTION_DECLINE) { console.log(`Handling DECLINE action.`); // Perform decline logic } else if (action === ACTION_SILENCE) { console.log(`Handling SILENCE action.`); // Perform silence logic } // Optionally cancel the notification after handling the action // notificationService.current?.cancelNotificationById(notificationId); // Need access to service instance } else { // --- Notification Tapped --- console.log(`Handling TAP action for notification ID: ${notificationId}`); if (targetScreen && navigationRef.isReady()) { console.log(`Navigating to screen: ${targetScreen}`); // Ensure navigation happens correctly, potentially checking if already on the screen // or using reset/push depending on desired behavior. // Check if the target screen is the detail screen if (targetScreen === 'CommunityItemDetail') { // Ensure data contains the necessary 'item' for the detail screen if (data.item) { navigationRef.navigate(targetScreen, {item: data.item}); } else { console.warn( 'Notification tapped for CommunityItemDetail but missing item data.', ); // Optionally navigate to a default state or show an error } } else { // Handle navigation for other screens navigationRef.navigate(targetScreen, {notificationData: data}); } } else if (!targetScreen) { console.log('No target screen specified in notification data.'); } else { console.warn('Navigation not ready when notification was opened.'); // Optionally queue the navigation action until ready } } }; // --- Main Content Component --- const AppNavigationContent = () => { const [isLoading, setIsLoading] = useState(true); const [isLoggedIn, setIsLoggedIn] = useState(false); const [fcmToken, setFcmToken] = useState(null); const {setUserDetails, clearUserDetails} = useUser(); const { connect: connectMqtt, disconnect: disconnectMqtt, connectionState: mqttState, } = useMqtt(); const shownConnectedToastRef = useRef(false); const navigationRef = useNavigationContainerRef(); const notificationService = useRef(null); const [notificationInitialized, setNotificationInitialized] = useState(false); // Initialize Notification Service Ref (runs only once) useEffect(() => { LogBox.ignoreAllLogs(true); const onRegisterToken = token => { console.log('AppNavigator received FCM Token:', token); setFcmToken(token); // Store the token // TODO: Send the token to your backend server here if needed // if (token) { sendTokenToServer(token); } }; const onNotificationOpened = (data, action) => { // Ensure navigationRef is available and ready if needed handleNotificationOpen(navigationRef, data, action); }; console.log('AppNavigator: Creating NotificationService instance...'); // Pass the callbacks when creating the instance notificationService.current = new NotificationService( onNotificationOpened, onRegisterToken, ); // Don't initialize immediately here, wait for login status }, []); // Empty dependency array ensures this runs only once // Effect to initialize notifications AFTER login status is confirmed useEffect(() => { // Only initialize if logged in AND not already initialized if (isLoggedIn && notificationService.current && !notificationInitialized) { console.log( 'User logged in, initializing Notification Service (will request permissions)...', ); // Call initialize() which now includes requesting permissions notificationService.current .initialize() .then(() => { console.log('Notification Service initialization attempt complete.'); setNotificationInitialized(true); // Mark as initialized (or attempted) }) .catch(error => { console.error( 'Error during Notification Service initialization:', error, ); setNotificationInitialized(true); // Mark as initialized even on error to prevent retries }); } else if (!isLoggedIn && notificationInitialized) { // Optional: Reset initialization status if user logs out console.log( 'User logged out, resetting notification initialization status.', ); setNotificationInitialized(false); } }, [isLoggedIn, notificationInitialized]); // Depend on login status and initialization status // MQTT Connection Toast (Keep as before) useEffect(() => { if (mqttState === MqttConnectionState.CONNECTED) { if (!shownConnectedToastRef.current) { Toast.show({ type: 'success', text1: 'MQTT Status', text2: 'Successfully connected! 👋', position: 'bottom', visibilityTime: 3000, }); shownConnectedToastRef.current = true; } } else if ( mqttState !== MqttConnectionState.CONNECTING && mqttState !== MqttConnectionState.RECONNECTING ) { if (shownConnectedToastRef.current) { shownConnectedToastRef.current = false; } } }, [mqttState]); // Check Login Status (Keep as before) useEffect(() => { let isMounted = true; const checkLoginStatus = async () => { setIsLoading(true); // Start loading indicator try { const storedUserData = await AsyncStorageManager.getItem('userData'); if (isMounted) { if (storedUserData && storedUserData.token) { console.log('User session found.'); setUserDetails(storedUserData.profileDetails || {}); setIsLoggedIn(true); } else { console.log('No user session found.'); setIsLoggedIn(false); clearUserDetails(); } } } catch (error) { console.error('AppNavigator: Failed to load user data:', error); if (isMounted) { Alert.alert('Error', 'Failed to load session data.'); setIsLoggedIn(false); clearUserDetails(); } } finally { if (isMounted) setIsLoading(false); // Session check complete } }; checkLoginStatus(); return () => { isMounted = false; }; }, [setUserDetails, clearUserDetails]); // Connect/Disconnect MQTT based on Login Status (Keep as before) useEffect(() => { if (isLoggedIn) { if ( mqttState === MqttConnectionState.DISCONNECTED || mqttState === MqttConnectionState.CLOSED || mqttState === MqttConnectionState.ERROR ) { console.log('User logged in, connecting MQTT...'); connectMqtt(); } } else { if ( mqttState === MqttConnectionState.CONNECTED || mqttState === MqttConnectionState.CONNECTING || mqttState === MqttConnectionState.RECONNECTING ) { console.log('User logged out, disconnecting MQTT...'); disconnectMqtt(); } } }, [isLoggedIn, connectMqtt, disconnectMqtt, mqttState]); // Login Handler (Keep as before) const handleLoginSuccess = useCallback( loggedInUserData => { setIsLoading(true); // Show loading briefly while setting state if (loggedInUserData && loggedInUserData.profileDetails) { setUserDetails(loggedInUserData.profileDetails); setIsLoggedIn(true); // This will trigger the useEffect to initialize notifications // No need to call initialize here directly, the effect handles it } else { Alert.alert('Login Error', 'Failed to process login data.'); setIsLoggedIn(false); clearUserDetails(); } setIsLoading(false); }, [setUserDetails, clearUserDetails], ); // Logout Handler (Keep as before) const handleLogout = useCallback(async () => { try { await AsyncStorageManager.removeItem('userData'); } catch (error) { console.error('Logout Error clearing storage:', error); // Continue logout process even if storage clear fails } finally { clearUserDetails(); setIsLoggedIn(false); // Triggers MQTT disconnect and resets notificationInitialized state // No need to explicitly disconnect notifications here } }, [clearUserDetails]); // Loading State UI if (isLoading) { return ( Loading session... ); } // Navigation Rendering return ( {/* The main stack navigator now includes Login, MainApp (Tabs), and the Detail screen */} {isLoggedIn ? ( <> {/* Pass onLogout to the component containing the logout button */} {props => } {/* Add CommunityItemDetailScreen HERE, outside MainApp but within the logged-in group */} ({ title: route.params?.item?.title || 'Item Details', headerShown: true, // <<< Make sure header is shown for the detail screen headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: route.params?.item?.title || 'Gallery', headerShown: true, // <<< Make sure header is shown for the detail screen headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'FRONT CAMERA', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'DEVICES', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'ZONES', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'ALARMS', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'CAMERAS', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: route.params?.device_name || 'DEVICES', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> ({ title: route.params?.zone_name || 'DEVICES', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> {/* Add other globally accessible logged-in screens here (e.g., Settings, Profile) */} ) : ( // Logged-out screen(s) {/* Pass fcmToken down to LoginScreen if needed for display/debug */} {props => ( )} )} ); }; // --- Main AppNavigator Component (Wraps Providers) --- const AppNavigator = () => { return ( ); }; const styles = StyleSheet.create({ loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', }, loadingText: {marginTop: 10, fontSize: 14, color: '#666'}, }); export default AppNavigator; this is my AppNavigator import React from 'react'; import {Image, Dimensions} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import HomeScreen from '../screens/tabs/HomeScreen'; import SceneScreen from '../screens/tabs/SceneScreen'; import ScheduleScreen from '../screens/tabs/ScheduleScreen'; import SettingsScreen from '../screens/tabs/SettingsScreen'; import {COLORS} from '../styles/colors'; import {HOME, SCENES, SCHEDULE, SETTINGS} from '../assets'; const Tab = createBottomTabNavigator(); const {height: screenHeight} = Dimensions.get('window'); const commonHeaderOptions = { headerTitleAlign: 'center', headerStyle: { backgroundColor: COLORS.status_bar_color, height: screenHeight * 0.07, }, headerTintColor: '#333', // Color of title and back button headerTitleStyle: { fontWeight: 'bold', fontSize: 18, }, }; const TabNavigator = () => { return ( ({ ...commonHeaderOptions, // Apply common header styles to all tab screens tabBarIcon: ({focused, color, size}) => { let iconName; let iconColor = color; // Default icon color if (route.name === 'Home') { iconName = focused ? HOME : HOME; if (focused) { iconColor = 'red'; // Change color to red when Home is focused } } else if (route.name === 'Scene') { iconName = focused ? SCENES : SCENES; // Changed to layers icon } else if (route.name === 'Schedules') { iconName = focused ? SCHEDULE : SCHEDULE; // Changed to calendar icon } else if (route.name === 'Settings') { iconName = focused ? SETTINGS : SETTINGS; } // You can return any component that you like here! return ( ); }, tabBarActiveTintColor: COLORS.red_color, // Color for active tab (except Home when focused) tabBarInactiveTintColor: 'gray', // Color for inactive tabs tabBarStyle: { backgroundColor: '#ffffff', // Background color of the tab bar height: screenHeight * 0.08, // Increased height of the tab bar // borderTopWidth: 0, // Optional: remove top border // elevation: 5, // Optional: add shadow for Android }, tabBarLabelStyle: { fontSize: 12, marginBottom: 10, // Space below tab labels marginTop: 0, paddingBottom: 5, }, tabBarIconStyle: { marginTop: 3, // Adjust icon position }, })}> ); }; export default TabNavigator; this is my TabNavigator import React, { createContext, useState, useContext, useRef, useEffect, useCallback, useMemo, useLayoutEffect, } from 'react'; import { View, SafeAreaView, StatusBar, Image, TouchableOpacity, FlatList, Text, Alert, ScrollView, ActivityIndicator, StyleSheet, Platform, } from 'react-native'; import {useUser} from '../../context/UserContext'; import AddItemModal from '../../services/AddItemModal'; import * as forge from 'node-forge'; import { DOWNARROW, HOME, PLACEHOLDER, PLAY, UNLOCK, LOCK, QR, GIVE_ACCESS, BLOCK_ALL, VIEW_ACCESS, SHARE_KEY, LOCK_SECURE, CHILD_SAFE, VACATION, DEVICES, ZONES, ALARMS, CCTV, } from '../../assets'; import HomeScreenStyles from '../../styles/HomeScreenStyles'; import {COLORS} from '../../styles/colors'; import {fontSize} from '../../styles/fontstyle'; import moment from 'moment'; import {PUBLIC_KEY} from '../../utils/custom_data'; import BiometricAuth from '../../services/BiometricAuth'; import {useFocusEffect} from '@react-navigation/native'; import ApiManager from '../../services/ApiManager'; import {useMqtt} from '../../context/MqttContext'; import ProgressView from '../../services/ProgressView'; const CAMERA_IMAGE_URI = 'https://picsum.photos/seed/homedoor/400/600'; const mockOptionViewData = [ {name: 'Option 1', image: PLACEHOLDER}, {name: 'Option 2', image: PLACEHOLDER}, {name: 'Option 3', image: PLACEHOLDER}, {name: 'Option 4', image: PLACEHOLDER}, ]; const HomeScreen = ({navigation}) => { // --- MQTT --- const {connectionState, subscribe, unsubscribe, publish} = useMqtt(); const [isLock, setIsLock] = useState(0); const [moreOptionView, setMoreOptionView] = useState(mockOptionViewData); const [eventId, setEventId] = useState(''); const [encodedQR, setEncodedQR] = useState(); const [isFlatModalVisible, setIsFlatModalVisible] = useState(false); const [isQrModalVisible, setIsQrModalVisible] = useState(false); const {userDetails} = useUser(); const [isCameraLoading, setIsCameraLoading] = useState(false); const [lockPress, setLoackPress] = useState(false); const [title, setTitle] = useState(''); const currentDate = new Date(); // --- MQTT Topics --- const MQTT_SUBSCRIBE_TOPIC = 'advaint/cus_' + userDetails.customer_id + '/event/feedback'; const MQTT_PUBLISH_TOPIC = 'advaint/cus_' + userDetails.customer_id + '/allonoff'; const home_access_list = [ {id: 1, name: 'Give Access', image: GIVE_ACCESS}, {id: 2, name: 'Block All', image: BLOCK_ALL}, {id: 3, name: 'View Access', image: VIEW_ACCESS}, {id: 4, name: 'Share key', image: SHARE_KEY}, ]; const home_mode_list = [ {id: 1, name: 'Lock Secure', image: LOCK_SECURE}, {id: 2, name: 'Child Safe', image: CHILD_SAFE}, {id: 3, name: 'Vacation', image: VACATION}, {id: 4, name: 'Normal', image: HOME}, ]; const smart_home_list = [ {id: 1, name: 'Devices', image: DEVICES}, {id: 2, name: 'Zones', image: ZONES}, {id: 3, name: 'Alarms', image: ALARMS}, {id: 4, name: 'Cameras', image: CCTV}, ]; useLayoutEffect(() => { navigation.setOptions({ headerTitleAlign: 'center', headerTitle: () => ( Home ), headerLeft: () => ( { setIsFlatModalVisible(true); }}> Flat: {userDetails?.flat || 'N/A'} {userDetails?.projectName || 'Project'} ), headerRight: () => ( { setIsQrModalVisible(true); }}> ), }); }, [navigation, userDetails]); useEffect(() => { encryptAndEncodeMessage(); getDashboardDetails(); }, []); // --- MQTT Subscribe/Unsubscribe --- useFocusEffect( useCallback(() => { console.log( 'HomeScreen focused, subscribing to MQTT topic:', MQTT_SUBSCRIBE_TOPIC, ); const callback = (data, topic) => { // Handle incoming messages console.log( `Received MQTT message on topic: ${topic}, data: ${data.event_status}`, ); setLoackPress(false); const parsedData = JSON.parse(data); if (parsedData.event_status == 'ON') { setIsLock(1); } else if (parsedData.event_status == 'OFF') { setIsLock(0); } try { const payload = JSON.parse(data); console.log('Parsed MQTT Payload:', payload); // Process payload data here, update UI, etc. } catch (e) { console.warn('MQTT message data is not JSON:', data); } }; subscribe(MQTT_SUBSCRIBE_TOPIC, callback); return () => { console.log( 'HomeScreen blurred, unsubscribing from MQTT topic:', MQTT_SUBSCRIBE_TOPIC, ); unsubscribe(MQTT_SUBSCRIBE_TOPIC, callback); }; }, [subscribe, unsubscribe, userDetails?.flat]), ); const getDashboardDetails = async (isManualRefresh = false) => { if (!userDetails?.customer_id) { console.log('User details not available yet or missing customer_id.'); return; } console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`); const customer_id = userDetails.customer_id; try { const dashboardResponse = await ApiManager.getDashboardData(customer_id); if (dashboardResponse) { console.log('dashboardResponse:', dashboardResponse.Data.frontLock); setEventId(dashboardResponse.Data.frontLock.event_id); if (dashboardResponse.Data.frontLock.status == 'ON') { setIsLock(1); } else if (dashboardResponse.Data.frontLock.status == 'OFF') { setIsLock(0); } } else { console.error( 'API did not return expected data structure:', dashboardResponse, ); if (isManualRefresh) { Alert.alert( 'Error', 'Failed to fetch items. Invalid data format received.', ); } } } catch (error) { console.error('Fetch List Error in CommunityScreen:', error); if (isManualRefresh) { Alert.alert( 'Fetch Failed', error.message || 'An unexpected error occurred while fetching items.', ); } } finally { } }; const sendMessage = () => { setTitle(isLock == 1 ? 'Locking' : 'Unlocking'); setLoackPress(true); const lockStatus = { event_id: eventId, parameter: isLock == 1 ? 0 : 1, mode: 'MOBILE', contact_id: userDetails.flat_contact_id, }; console.log('Publishing MQTT message:', lockStatus); publish(MQTT_PUBLISH_TOPIC, lockStatus); }; const handleFingerprintScan = async () => { BiometricAuth({ promptMessage: 'Authenticate to lock/unlock', onSuccess: () => { sendMessage(); }, onFailure: () => { Alert.alert('Authentication Failed', 'Unable to authenticate user.'); }, }); }; const handleFlatModalClose = () => { setIsFlatModalVisible(false); }; const handleQrModalClose = () => { setIsQrModalVisible(false); }; const message = `{"scan_code": "${ userDetails.qr_code_string }","reader_type":"2","date":"${moment(currentDate, 'DD-MM-YYYY').format( 'DD-MM-YYYY', )}"}`; const encryptAndEncodeMessage = async () => { try { const publicKey = forge.pki.publicKeyFromPem(PUBLIC_KEY); const encryptedMessage = publicKey.encrypt(message, 'RSA-OAEP', { md: forge.md.sha256.create(), mgf1: forge.mgf1.create(), }); const base64EncodedMessage = forge.util.encode64(encryptedMessage); setEncodedQR(base64EncodedMessage); } catch (error) { console.error('Error:', error); } }; return ( Front Door navigation.navigate('FrontCameraScreen')}> setIsCameraLoading(true)} onLoadEnd={() => setIsCameraLoading(false)} onError={e => { console.error( 'Camera Image Load Error:', e.nativeEvent.error, ); setIsCameraLoading(false); }} fadeDuration={0} /> {isCameraLoading && ( )} {!isCameraLoading && ( )} {isLock === 1 ? ( UNLOCKED TAP TO LOCK ) : ( LOCKED TAP TO UNLOCK )} Home Access item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( { Alert.alert('Home Access', item.name); }}> {item.name} )} /> Home Mode item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( { Alert.alert('Home Access', item.name); }}> {item.name} )} /> Smart Home item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( { if (item.name == 'Devices') { navigation.navigate('DeviceScreen'); } else if (item.name == 'Zones') { navigation.navigate('ZoneScreen'); } else if (item.name == 'Alarms') { navigation.navigate('AlarmsScreen'); } else if (item.name == 'Cameras') { navigation.navigate('CCTVScreen'); } }} style={HomeScreenStyles.homeAccessIconBubble}> {item.name} )} /> {isFlatModalVisible && ( Current Flat: {userDetails?.flat || 'N/A'} Project: {userDetails?.projectName || 'N/A'} )} {isQrModalVisible && ( )} {lockPress && } ); }; export default HomeScreen; this is HomeScreen import React from 'react'; import {View, Text, ActivityIndicator, StyleSheet} from 'react-native'; import {COLORS} from '../styles/colors'; import {align, fontSize} from '../styles/fontstyle'; const ProgressView = props => { return ( {props.title} {props.subtitle} ); }; const styles = StyleSheet.create({ container: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.2)', }, card: { alignItems: 'center', paddingHorizontal: 40, paddingVertical: 20, borderRadius: 10, gap: 8, backgroundColor: COLORS.white_color, elevation: 5, shadowColor: '#000', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.25, shadowRadius: 3.84, }, indicator: { alignSelf: 'center', }, text: { fontSize: 18, fontWeight: '800', marginTop: 8, color: COLORS.text_color, textAlign: align.center, }, subTitleStyle: { fontSize: fontSize.lock_label, }, }); export default ProgressView; this is ProgressView when i call ProgressView it cover only View below header and above bottom tab i want to cover header of home and bottom tab also make changes anf provide updated src folder with changes