React-native-fcm: Not showing notification banner when app closed Android

[justineraze]

I don't receive notif when app is closed and not pass by initial notif (undefined)

exemple of send

{
"data":{"test":"data de test"},
"priority":"high",
"notification":{"title":"NOTIFY","body":"content notif","click_action":"huhschool.story"},
"to":"deviceToken"
}

and it works when app background

RN : 0.33
RN-fcm 2.3.2
Android 6 device
App not running

[evollu]

investivating

[evollu]

@justineraze are you seeing notif in tray?

[Cat61]

We are having the same problem. We see the notification in the tray but it does not popup/show banner.
example of send:
{
"to" : "/topics/test",
"priority": "high",
"notification" : {
"body": "HELLO",
"title" : "HELLO"
}
}

This works when the app is in foreground or background because we create a local notification with priority: "high".
Even though we send "priority": "high" with the remote notification it does not show the banner.

[evollu]

that's the limitation of FCM. They don't show banner even you set priority high.
One work around would be creating a message receiver in native code

[flaviarodriguesf]

@evollu: Thank you for the clarification. Do you know if this problem also happens with GCM?

[evollu]

GCM doesn't build notification for you at all. So you need to build it yourself anyway

[evollu]

I guess Firebase doesn't want to do it is because android notification is so rich that building a default one won't satisfy everyone?

[stefanwuest]

Hi, I have tried to get remote notifications to work when the app is closed both with GCM and FCM, but neither of them showed any notification. It worked when the app was active or in background.
Could it be an error in the Android Manifest?
One interesting thing that I have noticed, that remote notifications arrive even when the app is closed on Android version 4. However on version 6 - no sign, no sound, nothing.
@evollu: Can you elaborate on the limitation of FCM? What would a message receiver in native code have to cover that this module does not?

RN: 0.38.1
react-native-fcm: 2.5.5
My AndroidManifest.xml looks as follows:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="---my.package---">

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

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
        <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"/>
          <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
      </receiver>


      <service android:name="com.evollu.react.fcm.MessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
      </service>

      <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
        <intent-filter>
          <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
      </service>


      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:launchMode="singleTop"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

        <intent-filter>
            <action android:name="fcm.ACTION.HELLO" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>

      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

[JohnProg]

any update? I'm still getting the same error.

[evollu]

try adding android:exported="true" for both service?

[JohnProg]

I solved the problem sending from the server (I'm using python and pyfcm) to fcm with the following data payload:

data_message = {
    "custom_notification": {
        "title" : "Test title",
        "body" : "Test body",
        "color": "#00ACD4",
        "priority": "high",
        "show_in_foreground": True
    }
}

IMHO the solution here is to send in the data payload the custom_notification.

[evollu]

ah. i guess your issue is that the banner doesn't show up? FCM only creates system tray icon, no banner. so "custom_notification" is the solution here

[JohnProg]

Yeah that is the solution since all notification will be received on onMessageReceived from FirebaseMessagingService when the app is foreground/background/closed.

Btw, the method sendRemote from react-native-fcm/Examples/simple-fcm-client/app/PushController.js only works when the app is in foreground/background but not when app is closed.

[evollu]

@JohnProg right because that is just JS code. If you want to show local notification when app is closed, use schedulelocalnotification

[arun542]

Not receiving notification in tray when app is closed even after using custom notifications on the server end. I am using pyfcm on server and used data message as suggested.

[arun542]

@JohnProg can you please help as you used the same code on server

[arun542]

Got it working, it was just issue with the android phone. Thanx ")

[Norfeldt]

@arun542 would you mind sharing you code on how you setup the pyfcm. I'm totally lost

[jvfiel]

@JohnProg

I'm using Python also

I tried:

    payload.update({
        "custom_notification": {
            "title" : "Test title",
            "body" : "Test body",
            "color": "#00ACD4",
            "priority": "high",
            "show_in_foreground": True
        }
    })

    print payload

    result = push_service.notify_single_device(registration_id=test_id,
                                               message_body=payload['short_message'],
                                               message_title=payload['title'],
                                               data_message=payload, sound='default',
                                              )

Result:

{u'name': u'3f14282126', u'title': u'Test Lab/2017-09-19/Assignment test Lab', u'image': u'', u'custom_notification': {u'body': u'Test body', u'color': u'#00ACD4', u'priority': u'high', u'show_in_foreground': True, u'title': u'Test title'}, u'messsage_type': u'HOMEWORKS', u'message': u'Science and computer homework, pass it tomorrow 9am in the Senior high building', u'short_message': u'Assignment test Lab'}

and it succeeded, but still I didnt get any banner just a notification in tray. Any idea?

[jvfiel]

@JohnProg Working now thanks!

[jvfiel]

@JohnProg tried this when app is on background but it won't work. custom_notification doesnt work on background?

[jvfiel]

@JohnProg Its working now I found out that "custom_notification" won't work if "notification" exist

[ducpt2]

@jvfiel can you explain pls, i use custom_notifi in example code, notifi only show on tray, not show banner? Any help? Thanks.

[jvfiel]

@ducpt2 can you share your code here

[ducpt2]

@jvfiel i change server code become custom_notification, and it work. Thanks. But it seem like not a elegance way to push notifi (change server code, server code need to know device is ios or android). Or do you know another way? Thanks?

[jvfiel]

@ducpt2 if you want to know what device refer to http://www.reactnative.com/ios-and-android-device-information-for-react-native/