Part 2: Implementing Push Notifications in React Native App for production

hi guys it's Marina from Tech Muse and today we will continue to study the implementation of push notifications in a react native application but for the development build or for the production build so if you haven't watched the first part of this tutorial where we implemented post notifications for the Expo go project then just follow the link below and watch that video first awesome let's go to my GitHub you can find the link to my previous video where we have built the react native application and implemented push notification for Expo Go app under this video in the description and you can go to my GitHub to clone the repository I'm just going to go to my repositories and I have 30 followers that's cool and uh let's go to the Arn push notifications repository click code copy the URL and I can close the [Music] browser and let's open the visual studio code our terminal I will CD into desktop that's where I want to clone the repository and I'm going to say G clone and uh insert the URL okay done now let's open the folder in the visual studio code okay first thing I want to check is uh I can see that we've done everything in one component which is not a good practice but it's very convenient for the tutorial and here if I'm not mistaken we have project ID field that needs to be completed by your own project ID so I'm going to go to my export def account login and I'm going to find the RN push notifications project here we go this is my project ID let's copy it and insert it instead of this placeholder okay saved now I will not run the the app yet I'm just going to show you the steps that we need to complete uh before building the APK file for Android and IP file for iOS so this was the first step I can see also that in our project directory we don't have yet the e. Json file so because we're going to be building using the Expo application services or how it was called EAS build yes so first things I would like first thing I would like to do is to actually configure at the EAS build so we have our e. Json file let's go to the documentation create your first build and Expo user account okay if you don't have EAS CLI installed globally just run this command first I have it already installed so I'm going to move on to EAS login let's um let's close everything and open the just the [Music] terminal and here I'm going to type EAS login let's try again I think I'm I'm on this account okay yes so logged in I'm going to clear everything The Next Step what we need to do is e buil configure so let's copy it and run it which platforms would you like to configure for EAS build I would select all and that's it now we have our e as. Json file here I'm just going to close the terminal for a while uh what's next next we can run a build but I think it's too early for us to run a build and to build our uh installation files let's go to internal distribution internal distribution is basically what I mean by building installation files which is an APK for Android and IPA for IOS as you can see here in the documentation it says that the steps will guide you through adding internal distribution uh for projects that are already set up to build with EAS build so I think these are the steps that we have just done yes login build configure okay now let's go to push notifications push notification set up somewhere here in the documentation uh we will find the reference to the fcm the Firebase Cloud messaging and here we go you see it's written that for Android you need to configure Firebase Cloud messaging fcm to get the credentials and set up uh our exper project so without this step the push notifications will not work in the development build they will only work in expo. goo so if we launch our applications through Expo uh setting up fcm to create Firebase project go to the Firebase console okay so let's go to the Firebase console and create a new project I'll call it RN push notifications continue I will disable the Google analytics we don't need it at this stage prepareing your project now we have just to wait few seconds or minutes okay cool the Firebase project is ready let's click continue m what do we have here uh okay let's go back to the export documentation it's written project overview and then open project settings uh let's go to the project overview open project settings and here uh we it's written there are no apps in your project uh in the documentation of uh on Expo website it's written that we need to select Android app so let's click on this little guy and um complete this uh one field that is important it is important that it should be the same as the one in our app. Json file in the app. Json we don't have it yet so but later when we're going to build it it's going to be it's going to appear here and it's important that they are the same name so I'm going to give it a name it's going to be named maybe it isn't we don't have it yet okay I will call it com. Marina Muse do rn rn push notifications okay I'm going to copy it then we do Register App and we have the Google services. Json file we can download it download next uh next uh we can skip actually okay so in our downloads We have Google do Google services. Json file which we can move to our project directory setting up fcm so we have done this we have done this and this in app. Json we need to add this line under Android so we go to up. Json we have Android here and we are adding this key value pair uh okay making sure that in Google services. Json file you have your Google platform API key parase also creates an API key okay I think we are good almost good upload server credentials this is an important step for export to send push notifications for our service from our service and use your credentials you have to upload your secret server key support okay in the Firebase console next to project overview so let's go back to Firebase we have this Cloud messaging Tab and here you see Cloud messaging API which is legacy and it is disabled currently but we are going to go and manage API in Google Cloud console and we're going to click enable so confusing so many steps I don't know when they're going to simplify it okay so now if we reload this page we will have the server key here I'm going to copy it and then we're going to go to our uh Expo def account to our project and here on the left side we have the credentials tab let's go there and choose this one this identifier instead yeah sorry it's a bit confusing let's copy again our Cloud message in fcm token so from here we copy it in the in the Expo def account here and that's it that should be enough to work work let's look for Expo react native build APK file build apks for Android emulators and devices uh so we need to generate a APK format to be able to install it on our Android phone to do this let's check that our es. Json is in the same format so we have preview Android build type APK and we don't so let's added under build we should have a preview under preview we have distribution internal and let's add also Android uh build type APK okay then we have preview two preview three and preview four I'm going to copy it and paste it here okay now you can run your build with a the following command yes let's copy this command open the terminal not now and we will run this command okay and now I don't know how long it's going to take usually in my experience it's like 15 20 minutes um but first let's answer some questions would you like your Android application ID to be this yes do you want to proceed yes and that's it I will be back when the build is ready okay our build has failed and I have a suspicion that it's because in our Google services. Json our package name is called like this and it should be identical to the one that is here so I'm going to rename it and try [Music] again yes proceed build cute okay see you a bit later okay so our build was success sucessful as you can see here all you have to do is just copy this uh link and open this link from the Android phone where you want to install your app I will open uh it right now and here we go and when I click push notification yay it's working now let's let's do the same only for iOS yeah for iOS trust me with push notifications it's much much easier let's clear everything EAS build platform iOS and um go here what what would you like your iOS bundle identified to be we can can leave it the same cannot find or to link into your project make sure that you have Expo package installed a buil command fil let's try to install to run npm install and see what happens cuz we should have done it in the beginning after just right after cloning the project but I completely forgot about it so my bad now we have installed all the dependencies and let's let's see get status nothing to commit okay let's try to E s build for platform iOS again do you want to log into to your Apple account here we go yes please this is my Apple ID logged in okay team Marina ke uh but again to do this your Apple account has to have the Apple developer account subscription at least the personal one reuse the certific ific I have already the certificate I can reuse it you can create a new one it's not important I'm going to say yes generate a new Apple provision profile yes and uh this kind of uh you see would you like to set up push notifications for your project yes Apple does it kind of automatically and it's a very cool currently Val in apple servers yes that is is awesome and uh I will be back when our build is complete and I hope we will have no errors and we'll have our IPA file so I'm going to show you how to install that on iPhone okay and we built our IPA file so we built for internal distribution for iOS what we need to do now is um you're going to have to have a MK um a markbook or iMac I'm going to open the application called trans Sporter I have to install it and here we're going to click on this plus sign oh sorry first of all let me click on this IPA file and we're going to open it and it will download on the computer so now it's called Uh 254 IPA now in the transporter application we will add uh this IPA file and open it all right uh because we don't have this application Let's uh go to App Store [Music] connect and uh log in with our Apple ID that has Apple developer subscription yeah so here in the App Store connect we have this tab called apps in this app we can create a new application I'm going to create new app here and it will be called error and push notifications app platforms iOS language I'll say English bundle ID is going to be this one I think yes it's the same as our bundle ID here mhm so SKU you can use the same like the same as your bundle so it just has to be unique and uh I'm going to say limited access and create okay so we have our new application in app store connect now we can go to our transporter app I don't know where it is now transporter and add the AP file that we have just built and now we can click deliver continue without ex code it's just going to take a few seconds and uh this app the transporter it just helps us to deliver the IP file to App Store connect delivered okay what's important here is that every time we build a new new version we have to go to app. Json and increment this verion uh version value okay so I just go 101 102 like this so now that our transporter delivered the IPA file we can see it in test flight tab not right away we can see that it's loading we need to give it few minutes and uh then we're going to proceed I'm just going to keep refreshing the page okay not yet in the meantime we can add the users for internal testing because in iOS there are uh there are certain iPhones that can test the application so you have to authorize every device um manually in Android you can just send to everybody the APK file they can install it on their phones but here let's click internal testing and add like testing team it can be called whatever create and here in the testers we don't have anybody I'm going to add and you see I have my Apple ID here already improved if you want to add an email that is not here you can you you can add it in users and access but you can only add emails that are Apple IDs for my example I'm just going to select myself and add myself as a tester so now um if we go to the test flight again we can see that our version 1 is already here all we have to do is manage missing compliance I don't have encryption yet for this app click save and uh it's going to be ready to submit so basically it's ready to be tested Now on my phone uh in order to install this uh application my phone has to be uh trusted device so you see e device create when you run this command it generates a unique link that you have to open from an iPhone where you want to test this application we already here my iPhone is already a trusted device so all I have to do is I have to download from App Store the test flight uh application and wait for the invitation to test the app it's going to come to my Apple ID the email yeah so I have received uh the test uh the email from test flight and it says Marina Kim has invited you to test react RN push notifications app uh here in the email I click view in test flight and I can accept this invitation to test after that I can click install app and it will be installed on my phone now I open it and it asks me if I allow push notifications and I allow and here we go the app on the iPhone as well let's check that push notifications click and received yay finally thank you so very much and I'll see you next time

Channel: Marina Kim

Views: 5,205

Keywords: expo react native push notification, push notifications, push notification react native, expo push notifications, expo push notifications react native, expo push notifications ios, push notifications react native firebase, push notifications react native expo, how to implement push notification in react native, how to implement push notification in android using firebase, how to implement push notification in android, expo react native build apk, expo react native build ios

Id: 4yArnF92XII

Length: 22min 51sec (1371 seconds)

Published: Wed Feb 14 2024