Cannot retrive UUID from RNTwilioPhone.calls after CallConnected was fired

[BoatFazWaz]

I'm developing the React Native Android mobile apps with outbound calls feature, at the current state, it is able to make an outbound call to PSTN but cannot hang up. I tried to find the UUID after CallConnected according to the following quote, to use for RNCallKeep.endCall(uuid) , but still no luck.

Hi, you should see it in RNTwilioPhone.calls when CallConnected event is triggered.

Originally posted by @MrHertal in https://github.com/MrHertal/react-native-twilio-phone/issues/54#issuecomment-902481675

Event Listener

twilioPhoneEmitter.addListener(EventType.CallConnected, ({callSid}) => {
  console.log('CallConnected');
  console.log('callSid');
  console.log(callSid);
  console.log('RNTwilioPhone.calls');
  console.log(RNTwilioPhone.calls);
}),

Console.log

 LOG  CallConnected
 LOG  callSid
 LOG  CAfcd9ea923d640be2bf37b24ade18f642
 LOG  RNTwilioPhone.calls
 LOG  []

Code snippet

const HandleHangUp = () => {
    RNCallKeep.endAllCalls(); // Not working
    navigate.goBack();
};

const callKeepOptions = {
    ios: {
        appName: 'TwilioPhone Example',
        supportsVideo: false,
    },
    android: {
        alertTitle: 'Permissions required',
        alertDescription: 'This application needs to access your phone accounts',
        cancelButton: 'Cancel',
        okButton: 'OK',
        additionalPermissions: [],
        selfManaged: true,
        foregroundService: {
            channelId: 'io.wazo.callkeep.VoiceConnectionService',
            channelName: 'Foreground service for my app',
            notificationTitle: 'My app is running on background',
        },
    },
};

useEffect(() => {
    const unsubscribeRNTTwilio = RNTwilioPhone.initializeCallKeep(callKeepOptions, fetchAccessToken);
    const unsubscribeTwilioPhone = listenTwilioPhone();
    RNTwilioPhone.startCall(userPhone);
    return () => {
        unsubscribeRNTTwilio();
        unsubscribeTwilioPhone();
    };
}, []);

const listenTwilioPhone = () => {
    const subscriptions = [
        twilioPhoneEmitter.addListener(EventType.CallConnected, ({callSid}) => {
            console.log('CallConnected');
            console.log('callSid');
            console.log(callSid);
            console.log('RNTwilioPhone.calls');
            console.log(RNTwilioPhone.calls);
        }),
        twilioPhoneEmitter.addListener(EventType.CallDisconnected, () => {
            console.log('CallDisconnected');
            setCallInProgress(RNTwilioPhone.calls.length > 0);
            navigate.goBack();
        }),
        twilioPhoneEmitter.addListener(EventType.CallDisconnectedError, (error) => {
            console.log('CallDisconnectedError');
            console.log(error);
            setCallInProgress(RNTwilioPhone.calls.length > 0);
            navigate.goBack();
        }),
    ];

    return () => {
        subscriptions.map((subscription) => {
            subscription.remove();
        });
    };
};

[BoatFazWaz]

I was confused between RNCallKeep UUID and RNTwilioPhone SID, according to the Twilio Developer answer in my Stackoverflow question, I can manage to end a call using SID provided by the CallConnected event with TwilioPhone.endCall(sid).

[heyalexchoi]

I'm on iOS and RNTwilioPhone.calls returns [] inside the CallConnected listener event. RNTwilioPhone.activeCall does return a call. The call has an sid but no uuid. Have read in the code and there are different behaviors around adding calls to RNTwilioPhone.calls depending on whether an sid vs a uuid are present. It's unclear to me why the behavior is different