Local Notification not show in background with firebase-messaging and react-native-push-notification

[ifanfairuz]

version that i used:

• react-native-push-notification: 7.4.0
• @react-native-firebase/app: 12.4.0
• @react-native-firebase/messaging: 12.4.0

I tried to show local notification triggered by firebase-messaging data only with manipulate data before show it

on foreground notification is shown but on background state notification not show except I open the app

my index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { init_notification } from './src/actions/notifications';

init_notification();

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

  return <App />;
}

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

init notification

export async function displayNotificationFromBackground(message: FirebaseMessagingTypes.RemoteMessage) {
  try {
    .... manipulate some data like decrypt or something

      PushNotification.localNotification({
        channelId: 'incoming_message',
        title: data.user_name,
        subText: 'New Messages!',
        message: decrypted_text,
        vibrate: true,
        vibration: 300,
        group: `incoming_message_${data.user_id}`,
        groupSummary: true,
        priority: 'high',
        visibility: 'private',
        ignoreInForeground: false,
        soundName: 'default',
        playSound: true,
        userInfo: {
          category: 'incoming_message',
          user_id: data.user_id
        }
    });
  } catch (error) {
  }
}

export function listenNotification() {
  const onMessageUnsub = messaging().onMessage(displayNotification);
  messaging().setBackgroundMessageHandler(displayNotificationFromBackground);
  configureNotification();
  return () => {
    onMessageUnsub();
  }
}

export const init_channel_notificaiton = () => {
  PushNotification.channelExists('incoming_message', exits => {
    if (!exits) {
      PushNotification.createChannel({
        channelId: "incoming_message",
        channelName: "New Message!",
        playSound: true,
        soundName: "default",
        importance: Importance.HIGH,
        vibrate: true,
      },() => {});
    }
  })
}

export const init_notification = () => {
  init_channel_notificaiton();
  get_session().then(sess => {
    console.log('init');
    if (sess && sess.id && sess.token && sess.token != '') {
      unsub();
      unsub = listenNotification();
    }
  });
}

my manifest

<manifest ...>
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

   <application ...>
      ....
       <!-- Change the value to true to enable pop-up for in foreground on receiving remote notifications (for prevent duplicating while showing local notifications set this to false) -->
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground" android:value="true" />
        <!-- Change the resource name to your App's accent color - or any other color you want -->
        <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@color/white" /> <!-- or @android:color/{name} to use a standard color -->

        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
          <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED" />
            <action android:name="android.intent.action.QUICKBOOT_POWERON" />
            <action android:name="com.htc.intent.action.QUICKBOOT_POWERON" />
          </intent-filter>
        </receiver>

        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false">
          <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
          </intent-filter>
        </service>
      ....
   </application>
</manifest>

firebase.json

{
  "react-native": {
    "messaging_android_notification_channel_id": "incoming_message-4-300",
    "messaging_android_headless_task_timeout": 1000
  }
}

[GoldMyr1994]

I don't remember if had the same problem or just i wanted to get rid of a warning, but maybe it can help.

I fond this issue https://github.com/zo0r/react-native-push-notification/issues/1454

export const setAndroidBackgroundMessageHandler = () => {
  if (Platform.OS === 'android') {
    messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('Message handled in background!', remoteMessage);
    });
  }
};

And i use it in the index.js
setAndroidBackgroundMessageHandler();

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.