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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With