Firebase FCM not being caught by the onMessage()

Question

I'm having trouble implementing FCM into my react native application. The documentation isn't great at all so have to come here for some assistance. I set up a cloud function that will send a notification to the given token. Only problem is, there aren't any errors, and the function doesn't send a notification.

Cloud Function

exports.sendNotification = functions.https.onCall((fcmToken) => {
  console.log(fcmToken);
  console.log("in the func");
  const message = {
    notification: {
      title: "850",
      body: "2:45",
    },
    token: fcmToken,
  };

  // Send a message to the device corresponding to the provided
  // registration token.
  admin.messaging().send(message)
      .then((response) => {
      // Response is a message ID string.
        console.log("Successfully sent message:", response);
      })
      .catch((error) => {
        console.log("Error sending message:", error);
      });
  // See documentation on defining a message payload.
});

React Native Listener

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage))
})

Invoking the Cloud Function

const token = await messaging().getToken()
functions()
  .httpsCallable('sendNotification')(token)
  .then(async (response) => {
    console.log(response)
  })
  .catch((error) => {
    console.log(error)
  })

Answer 1

I think u should not use it in useeffect.

I was using that on index.js before Appregistry

import messaging from '@react-native-firebase/messaging';
async function onMessageReceived(message) {

 
  console.log("background message: " + JSON.stringify(message.data));
}
 messaging().onMessage(onMessageReceived);
 
function HeadlessCheck({ isHeadless }) {
  if (isHeadless) {
    // App has been launched in the background by iOS, ignore
    return null;
  }

  return <App />;
}



 AppRegistry.registerComponent(appName, () =>HeadlessCheck );

Like that