Expo-notifications background notification reception handling

Issue

I am using expo-notifications package in react native (expo) to handle incoming notifications. I am getting notification correctly when the app is in background and foreground - for sending notifications I am using 'expo-server-sdk' package in the backend. I can handle foreground notification reception using addNotificationReceivedListener() function from expo-notification package.For handling background notification reception in the expo documentation (link: - https://docs.expo.dev/versions/latest/sdk/notifications/#handling-incoming-notifications-when-the-app-is-1) they are saying we can use expo-task-manager library to handle it. The code that i have written by referring expo documentation is given below.

...
import * as Notifications from 'expo-notifications';
import * as TaskManager from 'expo-task-manager';
...

//This code is written in root file and outside any react component

const BACKGROUND_NOTIFICATION_TASK = 'BACKGROUND-NOTIFICATION-TASK';


TaskManager.defineTask(
  BACKGROUND_NOTIFICATION_TASK,
  ({ data, error, executionInfo }) =>{ 
    if(error){
      console.log('error occurred');
    }
    if(data){
      console.log('data-----',data);
    }
})

//This code is written in App.js root component
useEffect(() => {
        Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);

        return()=>{
               Notifications.unregisterTaskAsync(BACKGROUND_NOTIFICATION_TASK);
        }
},[])

Also in the expo documentation. they say that this background task will not work with expo go app. so O executed expo run:android and build the app into my physical android device. Even After doing all this, When a notification arrives this task is not running and I am not getting any output in the console log from the code console.log('data-----',data); neither getting output for the code console.log('error occurred'); which means 'BACKGROUND-NOTIFICATION-TASK' is not getting executed when notification comes when app is in background. Can anyone please tell me what the problem is?

Solution

Basically, the only mistake you made was to call

Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK)

inside useEffect which I am guessing is inside a react component, this code must be written outside the react component as you did with TaskManager.defineTask... Take a look at this simple App.js example for further clarity

import { StyleSheet, View } from "react-native";
import * as Notifications from "expo-notifications";
import * as TaskManager from "expo-task-manager";

const BACKGROUND_NOTIFICATION_TASK = "BACKGROUND-NOTIFICATION-TASK";

TaskManager.defineTask(
  BACKGROUND_NOTIFICATION_TASK,
  ({ data, error, executionInfo }) => {
    if (error) {
      console.log("error occurred");
    }
    if (data) {
      console.log("data-----", data);
    }
  }
);

Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);

export default function App() {
  return <View style={styles.container}></View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});

No need for useEfect

Answered By - Proff Mushiana Mulweli