React Native Push Notification Not Working Properly

问题

Push Notification function:

PushNotification.configure({
  largeIcon: "ic_launcher",
  smallIcon: "ic_notification",
  onNotification: function (notification) {
    PushNotification.localNotification({
      autoCancel: true,
      message: 'Test Message',
      title: 'Test Message',
      vibrate: true,
      vibration: 300,
      playSound: true,
      soundName: 'default'
    })
    console.log(notification)
  },
});

Problem:

When I run application, if I send notification from php server I am getting response in console.log

but

condition 1: PushNotification.localNotification() foreground not working.

condition 2: PushNotification.localNotification() background not working.

If I send notification from firebase server I am getting response in console.log

but

condition 3: PushNotification.localNotification() foreground not working.

condition 4: PushNotification.localNotification() background working.

And after I get first notification from firebase server, i.e. condition 4, my application started receiving notifications from all other 3 conditions, mentioned above, also. Strange but I tested many time

If I click on notification then notification still visible in bar
And on OnePlus9 device overall notifications are not working.

I am getting response from php server:

    {
       "data": 
       {
          "message": "Your order with order no OID63112 has been dispatched. Expected time for arrival is 30 min", 
           "title": "Picked up order", 
           "vibrate": "1"
       }, 
       "from": "326331584681", 
       "messageId": "0:1607089521078208%d58aa421f9fd7ecd", 
       "sentTime": 1607089521064, 
       "ttl": 2419200
   }

I am getting response from firebase server:

   {   
       "channelId": "fcm_fallback_notification_channel", 
       "color": null, 
       "data": {}, 
       "finish": [Function finish], 
       "foreground": true, "id": "-1787502606", 
       "message": "Enjoy your meat! Order Online!",
       "priority": "high", 
       "sound": null, 
       "tag": "campaign_collapse_key_4040075812614528488", 
       "title": "Freshcut", 
       "userInteraction": false, 
       "visibility": "private"
    }

My Configurations are

"@react-native-firebase/app": "^8.4.7",
    "@react-native-firebase/crashlytics": "^8.4.9",
    "@react-native-firebase/database": "^10.0.0",
    "@react-native-firebase/messaging": "^7.9.0",
    "react-native-push-notification": "^6.1.3",

android/build.gradle

 ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 19
        compileSdkVersion = 29
        targetSdkVersion = 29
        googlePlayServicesVersion = "+" // default: "+"
        firebaseMessagingVersion = "+" // default: "+"
    }

android/app/src/main/AndroidManifest.xml

    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <permission
        android:name="com.freshcut.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />
    <uses-permission android:name="com.freshcut.permission.C2D_MESSAGE" />

<!-- Change the value to true to enable pop-up for in foreground (remote-only, for local use ignoreInForeground) -->
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
                    android:value="false"/>
        <!-- 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>

I am not able to get the exact problem, I read all other issues too and tried different solutions but nothing worked out. I am new to react-native-puch-notification.

回答1:

You have to subscribe the firebase notification to receive notification. So first subscribe firebase notification using onMessage() method of messaging. After subscribing whenever message will receive from firebase, fire the localNotification to pop the notification in foreground more with the title, message and other data that you have received in remoteMessage as below :

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    PushNotification.localNotification({
      message: remoteMessage.notification.body,
      title: remoteMessage.notification.title,
      bigPictureUrl: remoteMessage.notification.android.imageUrl,
      userInfo: remoteMessage.data,
    });
  });

  return unsubscribe;
}, []);

来源：https://stackoverflow.com/questions/65145011/react-native-push-notification-not-working-properly

标签

firebase

react-native

firebase-cloud-messaging

localnotification

react-native-push-notification