9

I have used react-native-firebase in my react native project[android platform] to show the app notification. With this library i am able to show the notification when the app is in the foreground/background/closed state.

According to the react native firebase documentation the onNotificationOpened should be triggered when the app is opened by the notification tap. However this is not happening in my case, the onNotificationOpened method is never called and getInitialNotification method always gets a null value.

I am also using react-native-splash-screen library to display the splashscreen.

Here's my code from App.js >> componentDidMount()

 firebase.messaging().requestPermission()
            .then(() => {

                const myAppChannel = new firebase.notifications.Android.Channel('my-channel',
                    'my Channel', firebase.notifications.Android.Importance.Max)
                    .setDescription('my channel');
                firebase.notifications().android.createChannel(myAppChannel);


                this.messageListener = firebase.messaging().onMessage((message) => {

                    const {title, body} = message.data;
                    const notificationDisplay = new firebase.notifications.Notification()
                        .setNotificationId('notificationId')
                        .setTitle(title)
                        .setBody(body)
                        .setData({
                            key1: 'value1',
                            key2: 'value2',
                        }).setSubtitle('notification')
                        .setSound('default');
                    notificationDisplay
                        .android.setChannelId('my-channel')
                        .android.setSmallIcon('ic_launcher')
                        .android.setAutoCancel(true).android.setPriority(firebase.notifications.Android.Priority.High);
                        firebase.notifications().displayNotification(notificationDisplay);
                });


                this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {
                    //never gets called
                    console.log('onNotificationOpened was triggered on notification taped');

                });

            })
            .catch(error => {
                // User has rejected permissions
                console.log("user rejected");
                console.log(error);
            });

AndroidManifest.xml

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

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

        <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

        <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:launchMode="singleTop"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTop"
            android:windowSoftInputMode="adjustResize" />
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

UPDATE: Problem was caused by the react-native-splash-screen library, I was able to fix this after removing the react-native-splash-screen library from the android project. However i am still not sure how i can make this work when using the react-native-splash-screen.

Selvesan Malakar
  • 511
  • 2
  • 7
  • 20

1 Answers1

3

Adding intent-filter to MainActivity and click-action to notification JSON did the trick for me.

    <intent-filter>
        <action android:name=".MainActivity" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>

Notification JSON

{
"to":"ID",
 "notification" : {
      **"click_action" : ".MainActivity",** 
      "body": "Message Body",
      "title" : "Call Status",
      "sound": "default",
      "badge":"5"
   },
  "data": {
      "type": 1,
      "body": "Message Body",
      "title" : "Call Status"
  }
}

My manifest.xml looks like this

 <application
      tools:replace="android:allowBackup"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
        <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>
        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:launchMode="singleTop"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:launchMode="singleTop"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustPan">
            <intent-filter>
                <action android:name=".MainActivity" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Hope this helps

Hariks
  • 1,852
  • 1
  • 19
  • 34
  • Thanks for the reply. I removed the react-native-splash-screen from my project and choosed some other approach for displaying the splash screen. But i will give this a try. I guess the ios should also have the same problem please let me know how did you solve for the ios – Selvesan Malakar Sep 12 '18 at 17:28
  • Hello, can you check this question please @Hariks https://stackoverflow.com/questions/57171787/navigate-to-screen-after-opening-a-notification – DevAS Jul 23 '19 at 22:54
  • @SelvesanMalakar Can you suggest an alternative to react-native-splash-screen ? – Muaz May 31 '20 at 16:03