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

CodePudding user response：

Twilio developer evangelist here.

While you do seem to be having a problem with the currently connected calls when calling RNTwilioPhone.calls that might not stop this working for you right now.

From what I can see in the source code, the TwilioPhone.endCall method takes the callSid as an argument. So, you should be able to keep the active callSid in the state and then use that to hang up.

So, you should keep callSid in state:

const [callSid, setCallSid] = useState(null);

When a call is connected, set the callSid in the state.

twilioPhoneEmitter.addListener(EventType.CallConnected, ({callSid}) => {
  setCallSid(callSid);  
});

And then when you want to hangup, use the callSid to end the call and set the state back to null:

const HandleHangUp = () => {
  TwilioPhone.endCall(callSid);
  setCallSid(null);
  navigate.goBack();
};