Expo-notifications background notification reception handling

Question

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?

score 4 · Accepted Answer · answered Aug 21 '22 at 22:25

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

Expo-notifications background notification reception handling

1 Answers1