import React, { useEffect, useCallback, useRef, useState } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; import { useNavigation } from '@react-navigation/native'; // Assume these are defined elsewhere and imported or available in scope // Replace with your actual imports/definitions const EMAIL = 'user@example.com'; // Placeholder const PASSWORD = 'room123'; // Placeholder const socket = { emit: (event, data) => console.log(`Socket emit: ${event}`, data) }; // Placeholder let userJoined = false; // Placeholder - Consider making this state or ref const setMyStream = (stream) => console.log('setMyStream called', stream); // Placeholder const setRemoteSocketId = (id) => console.log('setRemoteSocketId called', id); // Placeholder const setRemoteStream = (stream) => console.log('setRemoteStream called', stream); // Placeholder const peer = { // Placeholder clearConnection: () => console.log('peer.clearConnection called'), createNewConnection: () => console.log('peer.createNewConnection called'), }; const addTrackListener = () => console.log('addTrackListener called'); // Placeholder const CallScreen = () => { const navigation = useNavigation(); // Use a ref to track if we are currently handling the back press const isHandlingBack = useRef(false); // Your existing handleEndCall function const handleEndCall = useCallback(async () => { console.log('handleEndCall called------------------'); const email = EMAIL; // Use actual value const room = PASSWORD; // Use actual value try { // Perform cleanup actions socket.emit('leave:room', {email, room}); userJoined = false; // Consider making this state or ref setMyStream(null); // Assuming null clears the stream setRemoteSocketId(null); // Assuming null clears the ID setRemoteStream(null); // Assuming null clears the stream peer.clearConnection(); peer.createNewConnection(); // Recreate connection for potential future calls? addTrackListener(); // Re-add listener for the new connection? console.log('Cleanup complete.'); // IMPORTANT: Do NOT call navigation.goBack() here. // Navigation will be handled by the beforeRemove listener after cleanup. } catch (error) { console.error("Error during handleEndCall:", error); // Handle errors during cleanup if necessary } }, [socket, EMAIL, PASSWORD, setMyStream, setRemoteSocketId, setRemoteStream, peer, addTrackListener]); // Add all dependencies useEffect(() => { const unsubscribe = navigation.addListener('beforeRemove', (e) => { console.log('Back button pressed - beforeRemove'); // Check if we are already handling the back press if (isHandlingBack.current) { console.log('Already handling back press, ignoring.'); return; } // Prevent default behavior of leaving the screen // This pauses the navigation until we manually dispatch the action e.preventDefault(); // Set the flag to indicate we are now handling the back press isHandlingBack.current = true; // Call the async cleanup function handleEndCall() .then(() => { console.log('handleEndCall finished, navigating back.'); // After cleanup is complete, allow the navigation to proceed navigation.dispatch(e.data.action); }) .catch((error) => { console.error('Error during handleEndCall:', error); // Even if there's an error during cleanup, we likely still want to navigate back navigation.dispatch(e.data.action); }) .finally(() => { // Reset the flag regardless of success or failure isHandlingBack.current = false; }); }); // Clean up the listener when the component unmounts return unsubscribe; }, [navigation, handleEndCall]); // handleEndCall is a dependency because it's called inside the effect // Example UI (replace with your actual call UI) return ( Call Screen Press the back button to end the call. {/* Add your call UI elements here */}