In the previous article, I have instructed you to set up the iOS side and this article I will continue the remaining task of setting the Android side.
I. Create Application On Console.
You go to the firebase console page. Make sure your google-services.json is placed in the correct directories.
Download the google-services.json file and place it in the directory tree as follows.
2. Install Firebase Module
You install it Here offline.
Reconfigure the gradle file. Please use the latest firebase dependencies available while following this guide. You can find official FCM instructions here. For your reference, my class files are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | dependencies { implementation fileTree(include: ['*.jar'], dir: 'libs') implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.facebook.react:react-native:+' //Add these lines implementation "com.google.android.gms:play-services-base:16.1.0" implementation "com.google.firebase:firebase-core:16.0.9" implementation 'com.google.firebase:firebase-messaging:20.0.0' implementation 'me.leolin:ShortcutBadger: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a4b544b54484b3a1b1b08">[email protected]</a> ' } //Put this on bottom of file apply plugin: 'com.google.gms.google-services' |
And setting here.
1 2 3 4 5 6 7 8 9 10 11 12 13 | buildscript { repositories { jcenter() google() maven { url "https://github.com/layerhq/releases-gradle/raw/master/releases" } } dependencies { classpath 'com.android.tools.build:gradle:3.4.2' classpath 'com.google.gms:google-services:4.2.0' } } |
Setting image displayed on Notification for android 
3. Receive Push Notifications
Please run the application with the virtual machine. Note that, In Android, if you want to test on the emulator, you need to install the Google Play Services package.
Below is a snippet of my Notification Listeners setting. You can consult
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | componentDidMount() { this.checkPermission(); const channel = new firebase.notifications.Android.Channel( 'channelId', 'Andpad', firebase.notifications.Android.Importance.Max ).setDescription('Andpad'); firebase.notifications().android.createChannel(channel); this.createNotificationListeners(); } // Lắng nghe sự kiện khi app đang ở chế độ Background async createNotificationListeners() { this.notificationListener = firebase.notifications().onNotification((notification) => { if (Platform.OS === 'android') { notification .android.setChannelId('channelId') .android.setSmallIcon('@drawable/ic_stat_ic_notification') .android.setColor(color.vermilion); firebase.notifications() .displayNotification(notification); } else if (Platform.OS === 'ios') { const localNotification = new firebase.notifications.Notification() .setNotificationId(notification.notificationId) .setTitle(notification.title) .setSubtitle(notification.subtitle) .setBody(notification.body) .setData(notification.data) .ios.setBadge(Number(notification.data.badge)) firebase.notifications() .displayNotification(localNotification) .catch(err => console.error(err)); } }); this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => { const { data, android } = notificationOpen.notification; android.setAutoCancel(true) // Điều hướng cho notification sau khi click vào message push urlParams = data.url var slipRegex = ['\/abc/', '/def/', '/gmn/']; params = urlParams.replace(config.uriPrefix + "orders/", "").split(new RegExp(slipRegex.join('|'), 'g')) this.notificationParams = {params, notificationId: data.notification_id}; firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId); this.setState({ initialRouteName: this.HOME, }) }); const notificationOpen = await firebase.notifications().getInitialNotification() if (notificationOpen) { const { data, android } = notificationOpen.notification; android.setAutoCancel(true) urlParams = data.url var slipRegex = ['\/abc/', '/def/', '/gmn/']; params = urlParams.replace(config.uriPrefix + "orders/", "").split(new RegExp(slipRegex.join('|'), 'g')) this.notificationParams = {params, notificationId: data.notification_id}; firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId); } } |
You can request Notificaiton access of the device using this function.
1 2 3 4 5 6 7 8 9 | async requestPermission() { try { await firebase.messaging().requestPermission(); this.getToken(); } catch (error) { console.log('permission rejected'); } } |
Or maybe verify it already has less permissions
1 2 3 4 5 6 7 8 9 | async checkPermission() { const enabled = await firebase.messaging().hasPermission(); if (enabled) { this.getToken(); } else { this.requestPermission(); } } |
This article hopes to be a piece of material for you to refer, or have a problem somewhere during the installation process.
4. References:
https://medium.com/@anum.amin/react-native-integrating-push-notifications-using-fcm-349fff071591