backToForeground not working

[azhararmar]

Bug report

• [ ✓] I've checked the example to reproduce the issue.

• Reproduced on:

• [✓ ] Android

• [ ] iOS

Description

backToForeground does not invoke the app when the app is in background or quit state

Steps to Reproduce

I have following code in index.js

const options = {
    ios: {
        appName: 'App Name',
        imageName: 'logo-trans'
    },
    android: {
        alertTitle: 'Permissions required',
        alertDescription: 'This application needs to access your phone accounts',
        cancelButton: 'Cancel',
        okButton: 'Ok',
    }
};
RNCallKeep.setup(options);

messaging().setBackgroundMessageHandler(async remoteMessage => {
    const { data } = remoteMessage;
    if ('voip' === data?.type) {
        RNCallKeep.backToForeground();
        RNCallKeep.displayIncomingCall(data.uuid, data.handle, data.callerName);
        return;
    }
});

displayIncomingCall is invoked but RNCallKeep.backToForeground() does not do anything

Versions

- Callkeep: 4.2.0
- React Native: 0.61
- Android: 10

Logs

Paste here

[azhararmar]

Any pointer here is really appreciated. No solution is working for me until now.

[AvibhavChoudhary]

I'm also facing the same issue. If anyone managed to resolve this, Please share!

[azhararmar]

I made it to work. After tons of debugging and wasting a lot of time, I cross checked the android source from node modules and latest copy available and found that the copy from node modules is from previous version. I then forced updated the library and made some changes and it worked.

I also moved the RNSetup and answer/end call event to index.js this is what my index.js looks like now.

import 'react-native-gesture-handler';
import 'react-native-get-random-values';
import { AppRegistry, Platform } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import RNUnlockDevice from 'react-native-unlock-device';
import RNCallKeep from 'react-native-callkeep';
import App from './App';
import { name as appName } from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

RNCallKeep.setup({
    ios: {
        appName: 'App Name',
        imageName: 'app-logo-trans'
    },
    android: {
        alertTitle: 'Permissions required',
        alertDescription: 'This application needs to access your phone accounts',
        cancelButton: 'Cancel',
        okButton: 'Ok',
    }
});


messaging().setBackgroundMessageHandler(async remoteMessage => {
    const { data } = remoteMessage;
    if ('voip' === data?.type) {
        RNCallKeep.displayIncomingCall(data.uuid, data.handle, data.callerName);
    }
});

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

RNCallKeep.addEventListener('answerCall', (data) => {
    if ('android' === Platform.OS) {
        RNUnlockDevice.unlock();
        RNCallKeep.endAllCalls();
        RNCallKeep.backToForeground();
    }
});

RNCallKeep.addEventListener('endCall', (data) => {
    RNCallKeep.endAllCalls();
});

I use event emitter https://www.npmjs.com/package/eventemitter3 to communicate from index.js to my root component where I handle all the redirection.

[azhararmar]

I suppose we cannot call backToForeground before displayIncomingCall which I tried to do. Where I changed my approach mainly is to call backToForeground in answerCall event

[AvibhavChoudhary]

I was already calling it in the answer call listener but didn't work out.

[dackom]

For me this is also not working. My steps on android are:

1. it receives the call, I invoke displayIncomingCall()
2. Default android UI popup shows up with options to answer call or decline
3. When that popup shows and I tap answer, my app goes to background, and any of RN code is not executing anymore
4. I must manually go back to my app with task switcher, then RN code is continuing an the call starts end everything works as normal

Wherever I put RNCallKeep.backToForeground() it actually doesn't work, because the moment I show incoming call, my app becomes totally inactive.

Is there way around this?

[azhararmar]

@dackom I had to struggle to make RNCallKeep.backToForeground() work for android as well. Finally I noticed my app was not using the latest version of code, although I had installed the latest one. Perhaps, it got installed from my cache.

I suggest you to check yarn.lock (if you are using yarn) and make sure it is using 4.3.1

[AliSaeed090]

@azhararmar can you please share how did you use https://www.npmjs.com/package/eventemitter3 in react native. if you share your code snippet it will great. Thanks

[glesperance]

There seems to be a race condition if the app is already in the foreground when you answer the call.

Here is my understanding of what happens:

1. The app is in the foreground
2. It receives a call
3. The call is accepted
4. backToForeground() gets called -- while the app is still in the foreground.
5. The OS switches to the phone UI

This solutions is not elegant at all but worked for me:

RNCallKeep.addEventListener("answerCall", async ({ handle, callUUID, name }) => {
  for (var i = 0; i < 10; i++) {
    RNCallKeep.backToForeground()
  }
})

[ch3tan03]

Any update on this?

[minhka195]

same isssue

[taekeunn]

same issue on Galaxy Z Flip only(latest version of android). Any update?

[ShelbyIB]

Facing same issue and @glesperance's workaround works.

[Dat-Mobile]

try to enable this permission

Settings app > Other permissions > Display pop-up windows while running in the background

this fixed in my case, Xiaomi 11 phone

[vamsimudadla]

There seems to be a race condition if the app is already in the foreground when you answer the call.

Here is my understanding of what happens:

1. The app is in the foreground
2. It receives a call
3. The call is accepted
4. backToForeground() gets called -- while the app is still in the foreground.
5. The OS switches to the phone UI

This solutions is not elegant at all but worked for me:

RNCallKeep.addEventListener("answerCall", async ({ handle, callUUID, name }) => {
  for (var i = 0; i < 10; i++) {
    RNCallKeep.backToForeground()
  }
})

This worked for me