Pradeep Charan
Pradeep Charan

Reputation: 683

React Native Expo Background Notification Task Works in Foreground/Background but Fails When App is Killed (CallKeep Integration)

I am working on a React Native Expo project where I need to handle incoming call notifications using expo-notifications, expo-task-manager, and react-native-callkeep. The goal is to display an incoming call screen even when the app is terminated (killed/closed). Here's what I've implemented so far:

import { Component } from 'react';
import Routes from "./Navigations/Route";
import * as React from 'react';
import { registerRootComponent } from 'expo';
import { Provider } from 'react-redux';
import store from './store/store';
import * as TaskManager from "expo-task-manager";
import * as Notifications from "expo-notifications";
import CallKeep from 'react-native-callkeep';

const BACKGROUND_NOTIFICATION_TASK = "BACKGROUND-NOTIFICATION-TASK";

TaskManager.defineTask(
  BACKGROUND_NOTIFICATION_TASK,
  ({ data, error, executionInfo }) => {
    if (error) {
      console.log("Error occurred:", error);
    }
    if (data) {
      console.log("Data received:", data);
      let res = JSON.parse(data.notification.data.body);
      CallKeep.displayIncomingCall(res.uuid, "9999999999", res.instructorName, 'generic', true);
    }
  }
);

Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);

export default class App extends Component {
  componentDidMount() {
    // Any other initialization
  }

  render() {
    return (
      <Provider store={store}>
        <Routes />
      </Provider>
    );
  }
};

registerRootComponent(App);

The Problem: This implementation works fine when the app is in the foreground or background. When a data-only notification is received, the background task is triggered, and CallKeep successfully displays the incoming call screen. This is my payload

{
  "to": "device_token",
  "data": {
    "customKey": "customValue"
  }
}

However, when the app is terminated (killed/closed), the background task is not triggered, and the incoming call screen does not appear. I am using expo-notifications, expo-task-manager, and react-native-callkeep.

How can I handle incoming calls and trigger CallKeep when the app is terminated (killed/closed)?

Any suggestions or workarounds to ensure expo-task manager or a similar service can handle background notifications when the app is not running?

I tested this in Android

Upvotes: 1

Views: 585

Answers (1)

Edward L&#243;pez
Edward L&#243;pez

Reputation: 36

This information may be useful when generating the notification. When we close the application completely it stops receiving external communication so it and its processes are dead. According to the expo documentation for this to work you have to:

Android: You need to send a push notification that only contains data (data-only). This is important because if the notification has a notification field, it will be handled as a standard notification and will not trigger your logic in the background. Like this:

{
  "to": "device_token",
  "data": {
    "customKey": "customValue"
  }
}

iOS: You need to add specific settings in the app.json file:

Inside the ios.infoPlist key, add the UIBackgroundModes key with the remote-notification and processing values:

{
  "ios": {
    "infoPlist": {
      "UIBackgroundModes": ["remote-notification", “processing”]
    }
  }
}

Also, in the notification payload, make sure to include the _contentAvailable: true field. This will indicate that the notification should wake up the background application. Like this:

{
  "to": "device_token",
  "contentAvailable": true,
  "data": {
    "customKey": “customValue”.
  }
}

This structure is vital because when the device receives the notification it is raised in the background to be able to handle the notifications from the App.js or in your case before registering the App component.

The operation of the notifications in various states can be found within the documentation: https://docs.expo.dev/versions/latest/sdk/notifications/#background-notifications

If you are using Firebase to handle remote notifications, there are also other factors to take in mind within the request

Upvotes: 0

Related Questions