End call button doesn't work

[bradydoll]

I have been able to get the example app running and have been able to place outgoing calls from it, however I'm having trouble ending the call from the app. I see this issue in both the iOS simulator and when running on a real iPhone.

When I click on "End call", the iOS call-in-progress indicator (green bubble around the time) goes away, so it appears the call to RNCallKeep.endAllCalls() is successful, but the Twilio call does not disconnect and the app's in-progress indicator still shows. It's not until I end the call on the receiving end that the app correctly ends the call.

Before clicking "End call":

After clicking "End call":

[dolsem]

I'm having the same issue on iOS. Sometimes endAllCalls works properly, and sometimes it doesn't

[2DTW]

@dolsem @bradydoll You need to set the callSid in your Call Connected listener. Then in your hangup function, add TwilioPhone.endCall(callSid).

Something like this:

  const [callSid, setCallSid] = useState('')
  const [to, setTo] = React.useState('');
  const [callInProgress, setCallInProgress] = React.useState(false);
  RNTwilioPhone.handleBackgroundState(callKeepOptions);

  React.useEffect(() => {
    return RNTwilioPhone.initialize(callKeepOptions, fetchAccessToken);
  }, []);

  React.useEffect(() => {
    const subscriptions = [
      twilioPhoneEmitter.addListener(EventType.CallConnected, ({callSid}) => {
        setCallSid(callSid)
        setCallInProgress(true);
      }),
      twilioPhoneEmitter.addListener(EventType.CallDisconnected, () => {
        setCallInProgress(RNTwilioPhone.calls.length > 0);
        RNCallKeep.endAllCalls();

      }),
      twilioPhoneEmitter.addListener(
        EventType.CallDisconnectedError,
        (data) => {
          console.log(data);
          setCallInProgress(RNTwilioPhone.calls.length > 0);
          RNCallKeep.endAllCalls();
        }
      ),
    ];

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

  function hangup() {
    TwilioPhone.endCall(callSid);
    RNCallKeep.endAllCalls();
    setCallInProgress(RNTwilioPhone.calls.length > 0);
  }

[bradydoll]

@2DTW Isn't calling TwilioPhone.endCall() handled by this library?

In /src/RNTwilioPhone.ts there is a listener for the RNCallKeep 'endCall' event that calls it:

    RNCallKeep.addEventListener('endCall', ({ callUUID }) => {
      const sid = RNTwilioPhone.getCallSid(callUUID);

      sid && TwilioPhone.endCall(sid);

      RNTwilioPhone.removeCall(callUUID);
    });

After re-trying the example app, hangup is working for me now. I'm not sure what is different with my initial testing that was causing the issue.

[nguyentuanit97]

@bradydoll the root cause because the funtions RNTwilioPhone.getCallSid(callUUID) not working when your app killed. It mean it's only working when app is live or background. I face this issue now.