WARN No task registered for key ReactNativeFirebaseMessagingHeadlessTask in react native?

Question

I have created a push notification using react-native Firebase and react-native-push-notification. i have implement all types of notifications like local, schedule background and quit. But i have sent the push notification by FCM when my app in quit state. so i have shown an warning on console which is WARN No task registered for key ReactNativeFirebaseMessagingHeadlessTask. so how can i solve it.

code:

import React, {Fragment, useEffect} from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import PushNotification from 'react-native-push-notification';

import messaging from '@react-native-firebase/messaging';

//1
const checkPermission = () => {
  messaging()
    .hasPermission()
    .then((enabled) => {
      if (enabled) {
        getToken();
      } else {
        requestPermission();
      }
    })
    .catch((error) => {
      console.log('error checking permisions ' + error);
    });
};

//2
const requestPermission = () => {
  messaging()
    .requestPermission()
    .then(() => {
      getToken();
    })
    .catch((error) => {
      console.log('permission rejected ' + error);
    });
};

//3
const getToken = () => {
  messaging()
    .getToken()
    .then((token) => {
      console.log('push token ' + token);
    })
    .catch((error) => {
      console.log('error getting push token ' + error);
    });
};

const NotificationTwo = () => {
  useEffect(() => {
    checkPermission();
    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      console.log('Message handled in the background!', remoteMessage);
    });
  });
  const calledLocalNotify = () => {
    PushNotification.localNotification({
      /* Android Only Properties */
      title: 'Hello world Local Notify', // (optional)
      message: 'Successfully!, Implement the Local Notifications', // (required)
    });
  };

  const calledLocalScheduleNotify = () => {
    PushNotification.localNotificationSchedule({
      //... You can use all the options from localNotifications
      message: 'Successfully!, Implement the Local Schedule Notifications', // (required)
      date: new Date(Date.now() + 60 * 1000), // in 60 secs
      allowWhileIdle: false, // (optional) set notification to work while on doze, default: false
    });
  };
  return (
    <View style={styles.container}>
      <Text>Push Notification</Text>
      <View style={styles.button}>
        <Button
          color="green"
          title="Local Notification"
          onPress={calledLocalNotify}
        />
      </View>
      <View style={styles.button}>
        <Button
          color="purple"
          title="Local Schedule Notification"
          onPress={calledLocalScheduleNotify}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    margin: 10,
  },
});

export default NotificationTwo;

Answer 1

When the application is in a background or quit state, the onMessage handler will not be called when receiving messages. Instead, you need to setup a background callback handler via the setBackgroundMessageHandler method.

To setup a background handler, call the setBackgroundMessageHandler outside of your application logic as early as possible.

Although the library supports handling messages in background/quit states, the underlying implementation on how this works is different on Android & iOS.

On Android, a Headless JS task (an Android only feature) is created that runs separately to your main React component; allowing your background handler code to run without mounting your root component.

On iOS however, when a message is received the device silently starts your application in a background state. At this point, your background handler (via setBackgroundMessageHandler) is triggered, but your root React component also gets mounted. This can be problematic for some users since any side-effects will be called inside of your app (e.g. useEffects, analytics events/triggers etc). To get around this problem, you can configure your AppDelegate.m file (see instructions below) to inject a isHeadless prop into your root component. Use this property to conditionally render null ("nothing") if your app is launched in the background:

Try this on your index.js file in app root folder.

// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('Message handled in the background!', remoteMessage);
});

function HeadlessCheck({ isHeadless }) {
  if (isHeadless) {
    // App has been launched in the background by iOS, ignore
    return null;
  }

  return <App />;
}

function App() {
  // Your application
}

AppRegistry.registerComponent('app', () => HeadlessCheck);

source