Part1: Implementing Push Notifications in Expo React Native App

hi guys it's Marina from Tech Muse and today uh we are going to learn how to implement push notifications in an expo react native application we're going to do it from scratch and we're going to cover only Expo goal so that you know there is um a difference between implementing push notifications in an Android emulator which they don't work or in Expo go on a real device or or if you're doing an internal distribution build that's a bit uh different tutorial which I'm going to do um in the future okay or today if I'm in the mood so today we're going only to cover push notification push notifications in Expo react native application uh for Expo goal let's get started okay so we start with our terminal let's open up visual studio code I hope you have the environment set up for using um Expo and NP npm so let's open up the terminal and uh we going to CD into desktop I'm just going to CD into the directory where I want to build my app so it's called U apps folder and here I'm going to create a new uh Expo react native application by running this command and npx create react no no no sorry create Expo app and we will call it react native push notifications okay now we're going to wait few minutes okay our project is ready and we can open it up in Visual Studio code oh I clicked something different sorry okay file open folder desktop apps react native MO notific applications and here we are this is our bare template of an expo react native application so what we're going to do now is um we're go we're going to do all the codes in the appjs component I just going to I'm just going to clean it up a little so we start from scratch uh I don't think we need a status bar and we don't even need Styles sheet let's just return the text for now which will say uh Expo react native push notifications okay and I'm going to remove also the Styles uh of course here the style containers will not work we're just going to do margin top of I don't know 100 and that's it so uh here we're going to have a button from react native that will be called uh send push notification and somewhere here we're going to have um the function on press function which is going to be called send notification okay I'm going to create it real quickly now just conso login something const send notification equal to an arrow function and we're going to just console log uh something okay then we're going to go to our uh Chrome and we're going to look for Expo notifications so here we go we go to the export documentation as you can see push notifications they don't work on emulators on either of the emulators so if you want to test it out you have to use use the real device which is very easy show you later installation so yeah we have to install this expon notifications package let's copy that and uh I'm going to install it here and while it's installing I remember also that we have to have this exper device package let's look for it export device here we go um we're going to install that as well and I think that's it so far for the installations for Expo go push notifications so let's come back to the documentation and uh see what we have here okay we have to copy few lines like we going be we're going to be using couple of hooks from react we don't need uh use rep for now just going to use use State and use effect okay and um just so you understand the flow of how push notifications work is um first the device where you launch your application it has to to register for post notifications so it has to allow push notifications and U give permission right uh and uh what once uh the device gives permissions to send notifications it will provide us with a push notification token so here on use effect which is an anonymous function that will be will run on component load we're going just to console log for now that we are registering for push notifications okay for now it will not do anything then we're going to have a state which will be called the Expo push token actually we can we can even copy it from here you see exper push token set exper push token okay and now on use effect we have to register for push notifications for this we can copy these two lines even let's copy all of this block of code okay good and then what we have here is we have a function uh in use effect register for push notifications as sync and then we have access to the Token well this function is written here register for push I'm just going to copy all of it honestly you don't have to change anything except project uh except for project ID so I'm going to do I'm going to insert this function somewhere here and let's see we have register for push notifications as sync uh which first declares the token variable and then does some checks on the platform type and the device blah blah blah blah blah you don't have to worry about any of this the only thing we have here is the project ID where was it I no it's here okay you see it's written your project ID so later we're going to replace that with a generated project ID from uh EAS I'll explain later and now inside the use effect function here we're going to call for the function that we just created so we're going to say register and we can copy this as well it's uh right here register for push notifications to have access to the Token okay and uh instead of just setting our exper push token to the Token that we have I'm going to console log it first and then we're going to set it set our state to this token uh and I'm going to also catch an error in case anything goes wrong okay I think we're almost ready for testing out our push notifications and uh generating project ID let me just check so okay uh if if you launch this application right now it's not going to be working because um we don't have a project ID so what we have to do is you have to have an expo developer account okay uh I already have one if you don't have one you have to sign up to Expo and create one so I'm going to create a new project and I will call it react native push notifications create and uh as you can see here in some we already have a project an existing project we just have to run this command if you don't have EAS installed globally on your machine you have to run this command first I'm going to just run EAS in it with a a generated project it okay so let's go back to our terminal and I'm going to run this command and it's going to be okay project successfully linked so how do we launch our app uh we can do npx Expo start with a go command so we start in Expo go and now I'm going to open my camera and scan this QR code and you have to have a and you're going to have to have the Expo goal installed on your iPhone so you see now we are opening up a project I think I'm going to do like this so you can see both screens yay it's building so here we go this is our our Expo app uh let me just quickly do a bit of styling so it's at least centered okay where are we margin top okay and um align content align content Center no align items what's the difference oh sorry yeah okay and I'm going to just do a bit of margin here as well margin vertical uh let's say 30 okay so now what we want to do is um when we click on send push notification button we want to send a notification uh in the console here you can see I'll move myself here uh here in the console you see we have an error while fetching exper token it's because we have not inserted the project ID where it should go so let's return to our project here I'm going to copy this ID and we're going to insert it instead of your project ID here okay save and now if we reload our app we still have expect okay receive this is our project ID 02 ah sorry I didn't copy it correctly okay I get it now just missed one character and now you can see once you input your project ID correctly we are receiving a token exponent push token so I'm not going to save it in any database for now what uh we are doing here is uh we are saving it to our local state and now we can use this Expo push token to send a notification and basically when you send notification let's look at the documentation okay send notification this exper push API uh here they exp explain a bit of architecture of how push notifications work uh but what we need uh to do essentially is just to do a API request with a post method to this URL to send a notification and uh provide some headers as well as a message itself what we want to send as a push notification so I'm going to do that I'm going to copy this URL okay now we can come back to our send notifications function and here as written in the documentation we have to uh do an API cod with a post methods to this URI URL so we're going to do this function as a sync and here we're going to do a wait fetch to this URL okay that's it for now uh here we're going to construct our notification message and we have to provide an object so uh we can declare an object called message with the the following key value pairs first we have to do uh let's see two title and body so we're going to have two and uh here we we are providing an exper push token that we have just been provided with when we register registered for push notifications then we're going to have a title of the notification which will just be like my first push notification yay and we have to provide a body which will be I don't know this is my first push notification made with Expo Arn app cool also you can provide sound sound default what am I doing sound equal to default somewhere here so your notifications have a default sound there is um a way to customize it we're not going to go into that now but there's a lot of ways you can customize your push notification using this API so we have constructed our message now we can finish fetch methods uh as a second argument we have a an object where we have to provide a method that we're using which is post then we have to provide some headers and uh the API documentation even tells us which headers sorry uh which headers so we can copy this ones and post them here of course we need to customize a bit for example this will go into the um quotes and this as well and we have to have a commas everywhere uh this is as well in the in the quotes Okay and this two so here we go now we don't have any errors and the last key value pair which we have to provide in the second argument of the fet function is the body itself and the body is the message that we constructed here but we cannot send it as a an object that we created it we have to actually streamify it uh and that's it now if I open um I open my app here we can try out and send push notification it's working so here is my first push notification but uh you know what I think we need to change one thing here is that um should play sound we set to True okay and we'll try again so send and I received it again but there is no sound for some reason maybe because I'm in the call or something or maybe because no this one actually it's it's okay like that so let me try it out without sharing the screen without being in the call okay send and you see I received my notification I don't know if you can see that look and it plays with the sound so yeah it's working very cool that's it for today guys and in the next tutorial that I'm going to be publishing soon maybe in a week because now I quit my job and I actually have more time to focus on the content um before my next job comes around so I'm going to be doing weekly tutorials and the next time we're going to configure the push notifications for an internal internal distribution build which is a bit more difficult but but not really just need to understand uh few things thank you for watching and uh subscribe to my channel and I'll see you next time ciao

Channel: Marina Kim

Views: 7,850

Keywords: react native, react native tutorial, react native project, react native app, reacct native 2023, react native expo, react native tutorial for beginners, react native course, expo react native, expo react native tutorial, expo react, expo react native app, expo react native push notification, expo react native setup, push notifications, push notification react native, expo push notifications, expo push notifications react native, expo push notifications ios

Id: xK2ImAUsXDw

Length: 18min 10sec (1090 seconds)

Published: Tue Nov 14 2023