react-native-push-notification

react-native-push-notification copied to clipboard

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
  }
}