Android Setup

17 min

push notifications for react native on android introduction this guide will teach you how to use parse to send push notifications to your react native application on android you will set up firebase and configure your back4app app to send them via dashboard and cloud code functions at any time, you can access the complete android project built with this tutorial at our github repositories javascript example repository https //github com/templates back4app/react native js push notifications typescript example repository https //github com/templates back4app/react native ts push notifications prerequisites to complete this tutorial, you will need a react native app created and connected to back4app https //www back4app com/docs/react native/parse sdk/react native sdk understand how to deploy a cloud function https //www back4app com/docs/get started/cloud functions on back4app an active account at google, so you can use google firebase goal send push notifications from parse to a react native application on android, using back4app’s dashboard and cloud code functions 1 setting up firebase firebase is the most used service provider for sending and receiving push notifications on android it’s used by a wide range of companies nowadays, together with the other various tools let’s start by creating a firebase project for your app following steps 1 and 2 from this documentation https //firebase google com/docs/android/setup#console after creating your app and before exiting firebase’s console, make sure to download and save the file google services json and also go to the project settings, over the “cloud messaging” tab and retrieve the following keys server key; sender id 2 enabling push notifications on back4app to link your firebase project with back4app and enable sending push notifications through your dashboard and cloud code, follow these steps go to back4app website https //www back4app com/ , log in, find your app and click on \server settings\ find the “android push notification” block and click on \settings\ > \edit\ the “android push notification” block looks like this 3\ add the firebase \server key\ to the \api key\ field and the \sender id\ to the \gcm sender id\ field 4\ save it and you are done 3 installing and setting up dependencies on your react native project, let’s install the \react native push notification\ library, which will integrate the application with firebase and enable you to handle any received notification run the following command on your project root directory yarn add react native push notification after installing it, you still need to add some configurations to the \android/app/src/main/androidmanifest xml\ , \android/build gradle\ and \android/app/build gradle\ following the library docs https //github com/zo0r/react native push notification make sure to also add in the \androidmanifest xml\ file a \meta data\ containing the default notification channel id for your application(let’s use \guidechannel\ as our example) you can add the name directly to the directive or include it in the \strings xml\ file also, place your project’s \google services json\ file at the \android/app\ directory 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> in the next step, we will learn how to use this library and combine it with parse 4 handling push notifications let’s create a file with new methods related to push notifications called \pushnotificationmethods js\ (or \pushnotificationmethods tsx\ ) and add the following function, that is responsible for initializing the \react native push notification\ , creating a notification channel, and also setting up parse to recognize our device’s push configuration javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid string = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } open source documentation more information about the \parse installation\ class can be found here https //docs parseplatform org/js/guide/#push notifications note that the event handler \onnotification\ method has a code that triggers a local notification in the app after receiving a remote one parse requires this code because firebase doesn’t trigger popup notifications with data by itself more on that and android notification types can be read here https //firebase google com/docs/cloud messaging/concept options#notifications and data messages call this \configurepushnotifications\ method in your \app js\ (or \app tsx\ ) file after initializing parse and before declaring your \app\ content app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4	 5 // your parse initialization configuration goes here 6 // 7	 8 // initialize pushnotifications 9 configurepushnotifications(); build and run the application you can now see an \installation\ table in your app’s back4app dashboard with an entry corresponding to your app 5 sending push notifications via dashboard we are now ready to send the first push notification to our app follow the steps below to send a push message via back4app’s dashboard go to back4app website https //www back4app com/ , log in, find your app and click on \dashboard\ click on \push\ > \send new push\ and create an audience for your push notification 3\ write your message and look at the preview by clicking on the \android\ option 4\ if you have already reviewed the push notification and you want to send it, click on \send push\ you may explore the other options for push notification at \parse dashboard\ there, it’s also possible to look at \past pushes\ you sent and the \audiences\ you created for them 6 sending push notifications via cloud code using cloud functions starter guide https //www back4app com/docs/get started/cloud functions , you can detach reusable methods from your front end and get complete control of all your backend resources via the master key let’s use cloud code functions to send a push message first, create a cloud function called \sendpush\ which calls the \parse push send\ method there are two ways to select which users will receive the notification querying the \parse installation\ class or via notification channel names it’s more common in android apps to use channels to distinguish between the users, so let’s use it make sure to deploy this function on back4app before go ahead open source documentation please check the open source documentation https //docs parseplatform org/js/guide/#sending options for more details about the \send\ method 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); let’s now call the function from the react native app add this function to the \pushnotificationmethods js\ (or \pushnotificationmethods tsx\ ) file and call it in a button inside your application’s main screen 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } note that this case of allowing a user to trigger a push notification by himself is not common, we used it here just to show how simple it is to integrate the push notification sending with parse conclusion at the end of this guide, you learned how to send push notifications using parse to your react native application on android in the next guide, you will learn how to send them on ios