Expo Push Notifications in React Native (tutorial for beginners) | DEVember Day 14

hey no developers welcome back to demember today is day 14th of our month-long marathon of re native tutorials and today's tutorial is going to be focused on implementing push notifications I know this is a very important feature for mobile applications and a lot of you have asked us about covering this one and here we have it today we're going to start by by implementing and understanding push notifications in mobile applications how they work and how they are delivered uh then we're going to work and set up our Expo notifications then we're going to see how to do local notifications after which we're going to also Implement remote notifications and at the end we're going to test all the flow to make sure that everything is working perfectly before we get started I want to uh tell a couple of words about demember which is uh our initiative of daily R native tutorials during December so every day we're going live with a new project uh and everything is available here on YouTube so if you are a Rec native developer or if you are on the road to become a Rec native developer make sure to subscribe there is a lot of free content available during this month and if you have ideas we have an idea board where you can share what features you'd like us to build in the next tutorials but November is not only about learning November is also about giving back because during November we are organizing a fundraiser called education for children and during this we are supporting the efforts of save children organization in providing accessible education to children around the world so if you're interested in supporting this cause make sure to find the Donate uh popup here directly on YouTube and help with as much as you can we also have some incentives for people who donate and I'd like to say a big thank you to Rogelio Stuart uh Sagar valet Travis and everyone else who already donated also during this month for every 1,000 new subscribers we are going to donate $100 so by simply clicking that red button you are supporting this thank you very much and I think it's time to get started to have a look at the current application uh hello everyone in the live chat how are you doing guys hello Rogelio uh thank you for for all the amazing content 14 days and still doing strong actually maybe I should put it I don't know here let me see uh second just figuring it out with an new the new setup anyway you're going to be here for a bit um how to insert post notification icon in the game when you see the logo yeah we're going to try to to answer as many questions as possible about notifications throughout this can you try voice to text application that would be interesting Vladimir is asking is that a new camera it's the same camera but it's a new lens and a new angle and yeah thank you to cathaline um our video editor for borrowing it to me and I really like this this new angle it's much better I hope it's still a bit shaky because it's very temporary but I'm working on it so let me know what you think about this but anyway let's go back to our uh project here we have it and all the code all the uh the repository for this project you'll find in the link in the description below and here you'll also see two branches for every single day because I want you to be able to start from any day you you would prefer and be able to follow along with the tutorial that we have here so what you have to do simply clone this repository after that switch to the branch git checkout day 14 start and we're going to be on the same Branch starting from the same point go ahead and install dependencies with npm install and after that we can run our application on our device using npm run npx Expo run iOS to build it locally or if you don't have a mic OS um or Android Studio you can also do Android but if you don't have them locally in the previous episode yesterday we have uh we have learned how to build using Y um we learn how to build U native application using in the cloud so that is available to everyone and anyone can build and then start using it anyway uh I'm running the server here and the application is here we have some projects here for example in day six we had the Tinder swipe animation but today is day 14th and today we're going to learn about push notifications so let's go ahead and actually set up the project structure for this day um 14 because it doesn't have Pages yet and because we are using exper router all we have to do to create the pages for day 14 is going to be to create this day 14 folder in which we can take the index from some of the previous days uh and only change like the title description and so on so is going to be push notifications and the title day 14 notifications now when we press on this uh button I don't know if we actually need a button so I'm going to comment it out we'll see a bit later now I just simply will go to 14 it's not working but after a Reload by pressing RR r r we can go here and we see a push notification p page so we can start working on today's features in that day 14 folder hello Medina thank you for being here hello sankaran good morning thank you very much I'm learning a lot from your YouTube channel thank you I appreciate it alab solution thank you as well good morning Stuart so guys um let's go ahead and have a look at the libraries that we're going to use today starting with Expo notifications Expo notifications is a client Side Library that provides us an API to interact with uh with a push notification token and this is a token needed to send push notifications so this Library will allow us to read this token and it will also allow us to present schedule uh receive and respond to Notifications especially like local notifications for example um a local notification would be something that you schedule right from from inside the application maybe the user does something and you want to remind him in 3 days about that action you would set a local notification from the user device you schedule it on the same device to be present presented after 14 days for example or after a couple of hours so that would be a local notification and just by using expon notification service we are going to be able to do these kind of things now the next library that we're going to get into later is going to be and it's not actually a library this is a service this is the push notification service that uh maybe I will show you the the diagram better yeah a push notification service stands between your application or your backend uh and this is the Expo back and forth the push notification service and it simply uh helps us manage IOS and Android notifications the thing is that push notifications on Android they are delivered through Firebase Cloud messaging short fcm so you're going to hear a lot lot about fcm tokens and so on this is needed to be able to actually send notifications to Android devices however when iOS it's a completely different service it's called APN so to deliver a notification to I to an iOS device you need APN the problem is that we are building an expo application both for IOS and Android well if we would want to manage this routing ourself basically checking if the user we that we want to notify is IOS on Android and then redirect to the right service then we can do it even without Expo uh Expo push notification service but it really simplifies the whole process we don't have to manage and think about different platforms with Expo notification service we simply send from our backend or from our application a request to the Expo backend and then Expo will redirect it to Firebase and APN and V service yeah it's um will allow us to send push notifications for for example from one device to another let's say in a social media application when I like a a photo the like will be saved on the server and the server will know hey I need to notify the owner of that photo that there is a new like so this is a push notification from one device to another a remote notification in other words and anyway let's move back to the Expo notifications I just wanted to um introduce them to to have a clear understanding the Expo notifications is a client Side Library that simply allows us to interact with the um with a platform API for notifications such as reading the tokens that we will need to send notifications and also scheduling presenting and managing local notifications uh we're going to need this for both local and push notifications so let's start with um setting and learning about these Expo notifications to install them what we have to do is npx Expo install Expo notifications so let's start by doing that I'm going to open here a terminal and let's start by installing Expo notifications Library how is Expo notifications different from notif and fcm uh as I understand export notifications is very close to not t fe uh because not t is also a client Library I mean a library that allows you to interact with notifications uh while fcm is the native way of delivering notifications so delivering push notifications from your server to a user device you always have to run you always have to go through fcm in order to deliver Del it to Android and on iOS you always have to go through APNs this is the only method now you can integrate directly with with fcm and APN or you can have an intermediary service in this situation we talked about Expo notifications service not library and that service will redirect to the right APN of or fcm in fact we will still have to set up the APS and fcms and give this information to Expo so it knows where to to redirect requests but we're going to see uh more about that as we go now we have installed the notifications library and the next step is already about usage check out the sample snack below to see notifications in actions make sure to use a physical device to test it push notification don't work on emulators and simulators if we look at above push notifications only work on Android and iOS devices but local notifications they worked on Android on everything except web at the moment so here is the usage let's see let's see where we would want to to set everything up I think we're going to go ahead and create a separate file in our day 14 notifications. TSX but that is going to be a screen usually we would set up notifications in a in in a layout so let me simulate that uh that with a instead of having a screen I'm going to have a notifications dot not DOT notifications um folder in which we're going to have a index page index page here let's say it's going to be notifications home screen or yep uh and when we redirect Veer from the from the index we are going to redirect to day 14 slash notifications notifications is a folder here and it will take the index file if we don't specify anything so go to Notifications now because it's a folder I you'll be able to go here to day 14 uh and press on the button below go to Notifications I'm redirected to the notifications home screen but with this approach I will be able to add here a layout file that will lay out. TSX that will encapsulate all them that will wrap around all the screens inside this folder so usually layout files are places where we where we set up Global things that we need them accessible in multiple screens this can be a very nasted layout but most probably in your application that would be your root layout so the idea is going to be the same in a layout we configure stuff uh and you'll be able to take it from here and move it upwards in your uh navigation tree so that every screen for example will have access to it in our case we will want only this notifications folder to have notifications set up so the layout will be up with notifications layout something like that and it will return it will not return anything like that it will return actually a simple slot a slot will render the components below which is the actual page uh but now here we will do be able to console log or let's do console Warren setting up notifications here we would be able to set up notifications and they would be uh available in all the folder uh in all the pages inside notifications now we have only index but if we would have more all of them will go through the layout first so if I go to day 14 go to this page nothing happens I think I will have to reload because I added the layout sometimes it doesn't take into effect right away we need to reload and now we see the console war setting up notifications and we are still on that index page that says notifications home screen perfect let's go ahead in um now we're going to have basically to work with two files with a layout here is where we will configure everything about notifications and then in the page maybe we're going to have some buttons that will schedule notifications or interact with them or display them or something like that so let's go ahead we're going to work with these two files I'm going to keep them here and let's see the example from expon notifications documentation so what do we need first of all we need to set some notification Handler uh with some configuration to show alert to play sound set B and so on for that we're going to have to import the notifications from Expo notification again this is still configuration so let's do that in the layout in order for all the screens here to have this feature and as we can see above application basically when this file is imported it will automatically set the notification Handler with handle notification that returns some um an object that looks like a configuration should show alert should play sound should set page perfect now in our application what do we have well we have firstly an expo push token this token is going to be used to send a a remote push notification then what else do we have a notification listener yes let's start uh and our first goal is going to be to register for push notifications and to get the notification token let's do that by first of all defining this Expo push token state in our app with notifications layout so starting with a state Expo push token set Expo push token equal use State initially we're going to initialize it with null or even we will let it as undefined then when we Mount this um when we Mount this layout we want to request or yeah to request the the push token and save it in our state so in a use effect with an empty dependency array we are going to have to fetch Expo push token let's look back in the documentation to see how we can do that should I zoom in a bit let's see so they Define a register for push notifications a sync which is uh we Define it as a function here register for push notifications a sync it checks the platforms I don't know let's copy the whole uh function because it looks like a lot of lowlevel logic that I don't want to write ourself we can look through the code and see what it's trying to do so I'm going to add it just below our function I'm going to copy paste the the function register for push notifications as sync we see that we need access to the platform and this is something that we can import from react native and it's um it's an AP that allows us to check on what platform of application is currently running so what it's doing here it first checks if we're running on Android then using the notification um package it sets the notification channel to default it gives it a name it gives it some importance for the notifications under this channel a vibration pattern and a light color basically configuring notifications for Android um also so yeah uh notifications on Android and iOS in themselves they are a bit different in terms of what is possible and how they are handled in Android for example you create different channels with configurations and you send notifications to specific channels you can have some Channels with more uh with higher importance notifications and channels with lower importance notifications now um it checks the device device is device let's go ahead and see uh that it's where is it taking a device it's from a library Expo device that I'm not sure that we have but let's try to import it at the Top If not we're going to install it yes Expo device we don't have it yet so let's go ahead and install install this library with npx expo Expo install Expo device now this device Library will give us information about what device we are running on and it will tell us if it's an uh it's a physical device and not a simulator or emulator uh true if app is running on a real device false if it's running on simulator and emulator so only if it's running on a device it it will it will take the it will ask for permissions so sending notification require user permissions uh it will check if the permission was granted uh if it's not granted it will request them and it will check finally if even after requesting it if it's not granted it will simply alert uh that fail to get push token otherwise it will take the token using get Expo push token and here project ID I think we're going to have to configure them a bit later or maybe even now we'll see if we need to configure any project right now after that it will console log token if it's on Io if it's on simulator it will simply alert must use physical device for push notifications anyway this token will be returned at the end of the execution of this asynchronous function so what we can do is is in the use effect where we need to fetch the Expo push token let's call this register this function we know that if everything is successful it will give us back the token so we can say dot then the token that will be generated set it back in state set Expo push using the token string undefined string let's type it with string here now let's do console log token equal to token Expo push token now we're going to see that cannot read property Expo module name of undefined that means that we installed uh new libraries that depend on Native code uh and because we are no longer using expoo but a custom development client when adding new libraries we have to rebuild our application to include the newly added native code um and I'm going to actually run it right away on my uh build it for yeah we would have to build it again we can go through yes and build it in the cloud but I have X code set up locally so I can R build it locally as well and it's going to take a bit even less time because I have a good a good powerful machine so what we have to do is npx Expo run iOS and this will run on the connected emulator but if I'm going to provide device it will build it for my physical device that is currently connected to uh to my uh computer and I do that because the exper push notification token is only going to be generated for uh when the application is running on device on an emulator it will say must use physical device for p notifications not sure why we actually went this route because we need a token only for sending push notifications for local notifications I think we do not need this token so we're going to first get the token then we're going to learn about local notifications and only then use this token to send remote notifications but in the end we're going to have we should have both local and push notifications uh I selected my device to to build it for to build and run it V and we have a issue uh idea package supported yes what unable to find destination matching we provided destination for demember iOS placeholder should I try to rebuild clean what do you think if things like this happen uh rebuilding it using Expo pre-build then clean will remove IOS and Android folder and we'll rebuild it again would you like to proceed yes yeah it's removing and rebuilding recreating the IOS and Android folder simply recreating them it's not actually building and installing dependencies and another measure that I'm going to do is I'm going to remove the existing demember application from my phone in order for not to have any issues with mismatching versions like a wer version or something like that now after pre-building clean I'm going to run again npx Expo run iOS to build it so let's do it for the iPhone and I have the same problem H that's interesting user defaults from command line ID package to board use build development team unable to find a destination matching with provided destination specifier uh yeah that's interesting let me look in the documentation to see maybe I miss some h so thinking maybe this project iide did but I don't think that would be a problem during um building when we we have uh build errors like this what we can do is we can open the generated iOS folder in uh xcode and try to to build it from there to see maybe it will give us more details where is X code I need you so let's open an existing project and we're going to go to the project we go to know just Dev demember demember iOS and from IOS I'm going to open the the file with the extension workspace it will open it in X code from where I would try to run it on my device I see that it's not it's weird that it doesn't uh it it tells me to download new simulators maybe it made an update from yesterday and that might be the problem but why I don't see my my phone connected for iOS 17.2 yeah most probably is just a versioning of my xcode and the simulator tools so now it's downloading the iOS 17.2 and let's wait for and then we can try again does Expo notification work out of a box when up is in background or killed I use notify in Expo when up is killed there is no dogs that explain how to do this uh how to do this in Expo case let's see uh probably we're going to try to do that as well should I install Android Studio on my PC to run npx X for run Android yes npx uh Expo run Android that would build and run the native side locally uh to do that you need Android studio and the the Java setup on your system if you don't have that you can use EAS for that check out yesterday's tutorial the day 13th and you can use theas to build it in the cloud then simply download the APK for your development build put it in on your physical device and continue working like that so you have both options locally and in the cloud so it's downloading it's still downloading okay waiting waiting okay now I don't see the progress of download I don't know to to continue yeah let's let's continue with scheduling and displaying a notification because that will work on simulators as well and then we're going to see with this Expo push token that we need a bit later while we are waiting for my xcode to update and download the latest updates so also from this usage what we see there is we see a button that can schedule a local notification this calls a function that is implemented below schedule push notification let's take this code in our application and inside now this is not going to be in the layout in the lay out we set things up now on the page on a page we would have let's say a button a button import from rck native with a title schedule test notification this button will call notification this button will call a function and that function I copied it from the usage example schedule push notification what it's doing is using the notification service that we can import everything as notification ations from Expo notifications now when we press this button let's schedule this let's call this function on press let's schedule push notification what it's doing it's calling this schedual notification a sync it gives it some content like title body and data and at trigger uh that specifies that this notification is triggered after two seconds uh at the moment we're not going to see anything but we see this button we can press on it and actually nothing happens uh because we are not yet listening to Notifications so what we have to do is to register some listeners and display a notification when it is received because just by scheduling it we're not going to see it maybe we're going to see it actually if we schedule it for 10 seconds but still we do not have Expo modules we still have to rebuild so anyway we're going to have to wait to to rebuild to have this working is the stream Health everything good so back in our xod think where happening are we back are we back let me know if uh the stream has returned back to normal uh I think while xcode was processing that download file it made my computer stopped working properly anyway uh anyway yeah now here we have all the simulators and even my phone so I'm not going to I'm going to try to go back to uh the previous method of running it by executing npx Expo run iOS D- device because if the problem was with the with some updates that they didn't have uh I expect this command to to work and we wouldn't we don't have to go through the X code so let's try it again see what what's going on now yes back online perfect okay so it started building that means that we fix that issue by simply upgrading some XO Cod tools so in cases where you get errors you can open them in xcode if the error is running it on iOS or in Android Studio if you have issues with the Android native project and in the in xcode and Android Studio sometimes you can go deeper and see like the root of a problem come on let's see okay come on I don't want to continue uh with with the rest of a code um just because we already have done quite a bit and I don't want to confuse everyone so I'd rather wait a little bit for the build to finish test what we have at the moment and what what we have at the moment is uh asking for permission and getting Expo notification token and this is part of a configuration this Expo token we're going to use it to send a push notification later now we don't need it and this one will only work on a physical device another thing that we also implemented is a button that will schedule a notification we're going to play and test with this one as well um because it's not everything is completed here we need a couple of more steps but yeah so we have I have application waiting but I don't see it installed in my phone what's the problem oh no it's installing right now and I will bring it here so that you can see it as well on top of a emulator here we have my phone and I need to be on the same network I think I am I will stop this server and start it again and it starts with d d Dev client come on why it doesn't appear here give me one second uh maybe maybe maybe have to log in oh boy wait a second come on why are not running why are you not running let's try again iPhone usually this might happen when uh your phone is on a different network than your computer and it might be that's the problem it decided to to restart while I was typing for oh come on let's um let's do a build for our uh emulator Meanwhile by running the on the emulator is going to work uh and while we are waiting for this one probably I'm going to try to sign in in Expo to to my Expo account is it still uh is it again lagging sorry the build okay I need one time password I'm doing it one second okay okay okay okay so yeah now I logged in and it's still not fetching oh no after logging in it sees the running development server so I can connect to it here and it automatically allows to device the network okay so if your custom development client cannot see your running your current running Metra server uh just go ahead and sign in with your account and it will be able to fetch it so now as you can see this is my uh physical device I can go to screen 14 I'm looking in the logs if I go to screen 14 and go to Notifications we are asked to give permission to these notifications so if we allow initially token is undefined but then there is a possible and handle promise rejection because the export token the project ID is not a valid ID yes I was expecting that but we're going to figure that in a moment uh with that project IDE but now let's also test the schedule push notifications this schedule push notifications if I do them nothing actually happens right schedule oh no we see a notification in the tray we see the notification you've got an email here is the notification body this is the schedule notification so what we actually see is that these notifications are actually working um let me clear them again do some other tests for example if I schedule it right now and wait inside the application for 10 seconds um I don't think the notification should appear in the notification tray because when the application is in foreground notifications are handled a bit differently so we are we had the application open here and we schedule the notification after 10 seconds but if we're going to look here yeah we actually receive it so maybe maybe that's not what I was expecting but at least they're working uh so we can already scheduled these notifications and they will appear in the notification tray these are called local notifications again these are great when you want to the when the event that triggers the notification is on the same device as the person who as the device that should be notified I think this would be a great way to schedule notifications uh some daily reminders to use your application like to not lose a streak or something like that or uh yeah at end of every week if you want to send a notification for users to update something or to do an action you can schedule it right away from the application now back in our layout um this notifications we can also listen to them when the application is in foreground because maybe if the notification is received while using the application uh maybe you want to to do something differently maybe you want to display something or take an action so what we can do is we can uh subscribe to the notification received listener and we will save that notification in state so let's go ahead and get a state variable here for the Expo notification and in the use effect after we register for push notifications what we can do is we can create a listener so for that we are going to store that listener in using a US ref and we do that in order for in order to not reender the uh the application when the notification listener is changed we just need a reference to that listener and we were going to set it by calling ad notification received listener if we do that and set it back as a notification the state is going to be undefined but the type can be notification will that work notification or undefined notifications do notification okay what's the problem then yeah now it works and for the US ra here you probably have to specify like the type or no I need to import it from react that's what it was trying to do and the type is going to be um subscription object so we can type this reference as notifications do subscription y so what we are going to do is we're going to set it in state and after console loging the that one we can console log the notification that we received whenever we are we are setting up a listener when the component mounts we should make sure to remove that listener when the component unmounts the function that we return from a US will be called when the component unmounts or yeah before executing the next use effect so here we can unsubscribe using notification listener. current. remove so that's why we needed to save this listener into a a reference for later to be able to remove it notifications remove notification subscription maybe this way is better because maybe they have like some um let's do it this way better notifications do remove notification subscription this one and only if it's defined so if is defined then we're going to want to remove it perfect and as you can see there is also another notification another listener that we can subscribe to and this is about response received listener not exactly sure what that will do but let's set it up and see when it's being called so response listener is going to be another reference so I can even duplicate this line with response listener use ra we add that listener when we receive a response we will console log and in the return we should also do this if respon listener. current then we want to remove it using remove notification subscription respon listener. current so now let's try uh let's see if our project was built for simulator here because it will be a bit easier for us let's go to day 14 go to Notifications we see alert that we must use a physical device for push notifications this is for yeah remote push notifications because we cannot get them device token but for local notifications it's going to work so even though token is undefined and the current notifications is undefine if I schedule one test notification after 10 seconds we should receive here some information about them currently received notification let's see if that's actually true please come on I beg you no why Let's uh do maybe not 10 seconds but two seconds and let's see what's happening console log notification re received okay let's schedule it nothing happens maybe I will reload okay here okay schedule and it doesn't work will it work on a physical device let's drive it out let's look here 14 go to Notifications we see the undefined and we also see an something about a notification but after I press this schedle notification after 2 seconds we see a notification received console log and the data about notification here we see information like title you've got email identifier and so on what you can do you might want to render something on top of a screen with that notification so by simply rendering the slot here inside a component we can render something on top something like a view with a with a text of a notification I think I will copy something from here for body data and so one and I will also position it absolute in order to show it on top of the screens and maybe I will do it at the bottom 30 left zero and right left 10 and right 10 let's try it like this we need a view imported from react native and a text I think and this view will only be displayed if we have a notification so if notification only then render The View that will display it on top of our screens let's see that in action I'm going to go to 14 I'm going to go to Notifications and I'm going to send schedule a notification uh there is some promise rejection but after that we see the notification on the bottom with title you've got em mail with body and with data so what we can do here is a background color I don't know Gray a poding 10 uh border radius 10 um and maybe without a line Center like this for the title I'm going to have I'll style it a bit not much font family inter semi or even inter bold and for the rest I'm going to leave it them like this and it will also have a small icon to basically close it so let's import it from here at the anyway at the end I'm going to make it and I can also make this one uh position absolute go to notification schedule it will appear there and with style I'm going to do position absolute top 10 and right 10 to have x button Veer 16 is going to be enough and on press what I'm going to do on press is I'm going to set notification with null because if there will be no notification or maybe set notification we undefine because if there will be no notification this uh this component is not going to be rendered so I can simply press X come on I think I don't it's hard to to to to to touch it but now yeah we can send schedule notification they will appear inside our application um and also they will appear in the application tray here these schedule notifications Let's test if they will also work uh when the application is completely closed to test that what I'm going to do is in the index when we schedule this notification uh You've got mail from background Let's uh let's trigger it maybe after 20 seconds for us to to have time to close the application I'm going to clear out all the notifications no notifications now I'm going to schedule a notification and I'm going to close the application completely now let's look in the tray here to see if we're going to receive any notification in 20 seconds did 20 seconds pass or not yes after 22nd we received a notification even when the application was in background so by default we've simply setting up this notification Library we can schedule notification when the user is using the application you can schedule it very much uh a lot of time ahead for example maybe every Sunday you want to send a notification and even when the application is going to be closed the user will receive a notification You've got mail from background they can press on it and it will automatically open the application and if I go here to 14 go to Notifications everything is back how it was so yeah what did we do so far I'm not even going to mention the token because we're going to get into that a bit later uh but we uh we used the notification first of all yeah we use the notifications library to schedule a local notification then in configuration we set a listener when the notification is received and this is helpful when we want to take some action when the application will receive a notification while you are using it this is only called when the application is in foreground you're using it you're going to receive this uh this call and you can trigger you can display maybe in your application maybe you can check like what's the data so if you need to take some action if you need to redre the user if you need to display uh some information you can do all of that through this push notifications so yeah through data you can send any custom data uh and this can help you specify like what should happen there maybe you want to redirect to a post maybe you want to you have a campaign and uh once you receive a notification you want to display a popup with information about that campaign it's up to you how you design this because you have control over what what to display the title and the body this is uh what it's going to show in the in the tray here perfect let's go back to the documentation and follow along to see what else we can do here present a notification to the user first set the Handler that will cause the notification to show the alert should show alert true do we have it as true in the layout should show alert true yes we have it as true then we can call the schedule notification if a trigger is null it will be instant like at this at the same moment uh handling push notification with navigation that's uh cool because sometimes when you send a push notification you want to redirect the user to a specific screen for example if you send a notification about getting a new like or a comment on a post you would like to redirect to that post um and here we can do that both in exp router and react navigation uh with exper router we get automatic built-in deep links to handle incoming URLs from push notifications simply configure your root layout to listen for incoming and initial notification events um so use notification Observer add notification response received add notification received listener do we have it already add notification response but the first one add notification received listener no no no response received when is this one going to be called I don't know but when that happens let's see if that's actually getting called if I schedule a notification but it's for the schedule is for too long so I will do I'll even do yeah maybe two second one second schedule right away it's still doesn't uh doesn't conso look this one for the notification response received I'm going to look at the documentation to learn more about what it is doing so add notification response received listener listeners uh registered by this method will be called whenever a user interacts with a notification for example Types on it okay I understand so if I'm going to go ahead in the notification tray and press on an notification then I should see the add notification response listener okay so when we tap on a notification we should try to redirect to the correct screen using the a method come on using a method here redir it will receive this one let's copy this red direct uh I'm going to put the redir even outside this user effect the redir will receive information about the notification the URL will be the content data URL so if we send through data URL then is going to use the router that we should import from export router to push to that screen so now we can call this redirect when a response is received so redirect and then we need notification is it resp response do notification probably yes now if this data will if it doesn't contain a URL nothing is going to happen like I can press schedule notification we're going to receive it I can go there I can press nothing happens clear but if I'm going to have a URL here and if my notific my if I want to red to a specific screen for example maybe day six just day six I can do URL SL day6 and the information can be check out V new Tinder swipe animation if I send it right now if I look in the tray here we see check out this Tinder swipe animation if I click click on this one as you can see we are right away redirected automatically to the day six and I can go to Tinder and here it is so by sending this URL Pro a data when it's received and if there is a URL it will use router. push to go there if however we send a wrong URL that can also happen so let's go back back to scheduling a notification let's click on this in the tray we will be redirected there but it will show us that there is no URL like this okay perfect we saw how we can do that the let's redirect to day 14 slash notifications notifications so for example what I can do I can schedule a notification I can close the application if I will open it again from the notification center it will open the application uh and it will not redirect me anywhere actually it will stay on the home screen because that redirect will happen only when the application is in foreground or background if I schedule a test notification and when I click on it it will work no it Stills to a wrong place they not day 16 day 14 so we are here uh because why it's happening only when application is in foreground or background that's because we are registering this response received listener when we open an application from a close state by tapping on a notification we can get access to it in a different way and let's look here because I think they will integrate it yeah notification get last notification response a sync this is going to be the one that the the last notification that open the application so we can take it when we Mount the component when we Mount the component we can get the last notification open and if the last notification response was the one that opened the application we can check here the notification and redirect to that one is mounted is mounted um yeah is mounted it's in the use effect and then okay sometimes when we when we have asynchronous uh calls like get L notification response when we will execute this one the component will still be mounted but when we will receive a response the notific the the component might already be unmounted and it will try to do a direct and it might lead to errors so we can fix that issue by having a variable is mounted to true we will redir only when we are still mounted and when we unmount the component we will set is mounted to false and then we will prevent calling functions like redir when the component already has unmounted so this should take the last notification response and should redirect to the right screen when we open the application from a notification to test that I'm going to clear all the notifications I'm going to schedule a test notification I'm going to close application completely and from the notification I'm going to press and this should to open the the development client this is okay because this is only in development you're not going to see this page in production but as soon as we go to the our application um yeah It's tricky because you know what we are not calling this get last notification response in the root layout so this function is this app with notifications layout is not even mounted so that's why we don't see the automatic redirection in your application you would have to set and configure everything about notification in your root layout or at least in the root layout to check if there is a a notification response that open the app in our case uh we're going to see this code being executed as soon as we get on this notifications layout so if I go to 14 I'm still here in the index now if I go to the notifications page I will execute this layout and it will redirect but our function redirected to the same page so maybe I should do here back to day six slash Tinder and let's try it again to see if it will uh work schedule notification close the application click on our notification and as soon as I go to to the layout that has our notification we should be redirected to the day six in production do we need to where is a question in production do we need to configure Expo notification with Firebase yes if you want to send uh remote notifications for local everything that we do now is remote is local notifications so everything will work even without registering with Firebase but as soon as you want to deliver remote notifications yes you need to register with Firebase now as I said if I go to notification I expect to be redirected to the Tinder because that was last notification that open application and that's actually what's happening I can go back and uh I'm still redirected here will I always be redirected there I'm wondering yeah because I always get the last notification response add notification response redir okay okay so we saw how we can redirect to a specific screen why still this one here what am I doing no wait a second I simply changed like the link on the button and it was doing that but it was actually the link of a button so I I I was a bit confused why every time when I press it goes there uh instead of this I was supposed to change the notif the URL in the notification data so when the notification when the app is open with this notification I will go to the Tinder okay once again go here schedule close and open the application from a notification so if I go to day 14 and if I go to Notifications now I'm redirected to the Tinder but as you saw I'm redirected only after manage only after yeah like receiving this data so I can go back and I'm on this screen and I think the next time if I come here I'm I still go there because the last notification is still there so maybe we can somehow remove it from there well will it will that be possible remove no okay so that was handling push notifications with navigation give me just one second uh I'm going to take a one minute break and then we're going to follow up and integrate with the next step and now we are getting into Firebase and iOS for that yeah we're going to go through the configuration and that is going to be needed for us to send remote push notifications I'm going to be back in one minute e all right guys so any questions so far I have a backend with send notification messages using the Expo SDK uh do I still need to configure Firebase uh my question is do you at the moment are you using Expo go because if you're using Expo go Expo go has already them tokens from Firebase and APN so in development it will work but as soon as you'll build it for production you actually need the uh your own fcm token and APN token so in in um running it in Expo go while you're still in in development it will work because they made it simple to get started but of course you have to get your own tokens once you go to production so yes um sorry so we're going to go uh and continue our journey of working with Expo notifications uh we already saw how to send and display and interact with local notifications now let's go ahead in the next step in the configuration part because we need to provide some credentials to uh to our Expo project for uh for it to be able to send remote push notifications as I was saying for Android that is U managed through Firebase Cloud messaging and these are required for all Android applications to receive push notifications in your app except when testing in Expo goal because in Expo go it's set up automatically for us uh and for iOS we need to register the device and automatically enable push notification for so I think that um here we would already go to the to the next step uh in the documentation and this is the push notifications now we are getting into the push notification service this is already about remote notifications and as I explained before this is the Expo backend that St stays between our application and Firebase Cloud messaging fcm and APNs so in order to set them up we need to create a Firebase project we need to set up through App Store the the notifications and then we need to give Expo some keys in order to be able to send them there so let's go to the overview or maybe even to the right away to the push notification setup okay to get the client side ready for push notification the following things are required the user permission to send push notification yes we have already asked that in the layout in the process of registering for push notifications we get the permission and we requested permission the next is the user export push token for that to work I think we will have to let me check if I already have that one in the export Dev because yesterday in the in yesterday's tutorial what we have done is we have used y to create a project and to build deploy and so on I'm going to go in our expo. Dev in the project dashboard let me check in the project settings maybe General I'm I'm going to stop the screen sharing for a bit I don't see it here so we're going to continue through the documentation maybe I'm going to have to trigger another es build let's see we already have Expo notification Expo device and Expo constants installed maybe Expo constants we don't have but yeah we can maybe install all of them once again it's not going to hurt anything I'm going to stop it from here and run it again to have to install the Expo constants we have already minimal working example for the notification Handler we have the sending a sending uh a push notification this one is actually a remote notification we can either send them from here or we can use a a tool built by not by Expo to send test notifications we're going to probably use that one in a moment but yeah let's continue m H register for push notifications okay it takes the the token and it takes the project ID from constant. Expo config doextra doe. Pro ID so the project ID in this get Expo push token I think we already have it we just have to take it from uh y yes there should be a project ID no in the app. Gs there should be extra and there is the E and there is the project ID we can copy paste it there or we can use the constants uh the constants library to get access to this kind of configuration from Expo so yeah let's copy it from here in this documentation it's explained better so in our notifications layout where we ask for the get Expo push token here we need to specify the project ID let's go ahead and use it from constants and we will have to import constants from export constants and I think we need to import everything as constants back here constants there is no Expo config what do we have no it shouldn't be everything it should be just constants constants export config yeah in some cases there might be no y project not sure which one yeah what we can do here actually is we can check if there is a project ID or maybe if there is no project ID then we can simply alert no project ID found in app. Json and I'm going to return here and now here if we get here we are sure that we have it okay so we are using it from there we're taking and then we are rendering the token let's see if we already have a token actually we do right as you can see I'm running it on my physical device previously we had an error when uh asking for the token but now we actually have this Expo push token with some information so what I can do is I can take this Expo push token and maybe through the uh push notification tool at expo. d/ notifications I can do here the recipient uh title hello and the body will be body and let's close the application so if we go back here we see that our application is let's close it completely we don't have any notifications and if through this tool I'm going to send this notification we see Val credential could not find APN credential okay yeah because we haven't finished yet the the configuration and I want it to work back to the documentation VI we still have to to to do something to set the APM and Fire based because we followed them there is no way for the notification to be delivered again if you're using Expo go now for you it should have worked for us we need some some extra steps let's continue for the documentation using the previous example when you're registering for push notification you need project ID this property is used to attribute export push token to the specific project for project using yes the project ID property represents the universal ID of that project is automatically set when you create a development build however we recommend setting it manually in your project code to do so you can use Expo constants perfect documentation I would expect it to also be shown here in the Expo notifications get credentials for development bills for Android and iOS there are different requirements to set up credentials for Android we need Firebase Cloud messaging for all Android apps using Expos DEC and fcm is only for Android it's not currently available on iOS so to set up fcm what we have to do is we need to create a Firebase project for that we're going to go to the Firebase console let's open it up and let's go ahead and add a new project I'm going to do again uh demember um and let's continue enable Google analytics no I don't want Google analytics I will keep it simple nice user interface like the the new style of Firebase is it safe to expose a project ID probably yes uh because uh uh the projects are protected by by API keys so now after we created the Firebase we have to go to the settings project overview project settings and to add Firebase to your Android application so this settings project settings then General your apps and let's select Android from here the package name is the one that we uh defined when building our Android application we don't have it here right well if you have a an if you build it with you can check it from there if you build it locally you can open uh Android application Source uh main Android manifest and here in this manifest you're going to see the package name where is it package the Android scheme actually this one should also be in the ab. Json scheme well it's just demember number in Android Manifest this is the one that I'm looking for vember let me actually also check it in Expo for the builds for roid what is the package name does it show here anywhere show details full name no it doesn't show it overview well I know I know it for myself but I want to show you where you can find it in general in the submission oh boy anyway I'm going to take it from here but I I'm a bit worried because I believe it's not that one because for iOS in the info the URL this is only for URL scheme let me check it on up store how it was set I I I don't I believe that's that's a mistake like it should be a different package name but maybe maybe not so in the in the applications that we yesterday submitted here uh I cannot find the B bundle identifier up information bundle ID Yes actually that's true it's the one that I was seeing that that in both Android manifest and in this info so we're going to take this bundle identifier and go back to our demember to set it up here as Android package name the app nickname let's do demember and let's click register application app. Json but in app. Json I don't have it app. Json Android package yes it was here all the way so maybe my brain after 14 daily live streams is uh short circuiting but yeah the easiest way is just to open up. Json under Android you have here package and you copy it from here after registering the app we need to download the Google services thej file and place it in our project Rook directory this file contains unique and non secret identifiers of your Firebase project okay uh so let's download the file and we need to put it in your project throughout directory okay we can do that uh so going here in our project as the documentation says we need these Google services in the root directory here uh and it's supposed to not have any secret Keys only identifiers now what do we do with this file let's click next not sure if we need to do anything else but uh in our app. Json we need to add the Android Google service file and reference the newly created when newly added file in our application so in up. Json under Android we will need the Google service file so I'm going to copy it like paste it from here it's from the same directory and it's google-- services. Json double check the name to match it here perfect for push notification to work correctly Firebase requires the API key to either be unrestricted the key can all can call any API or have access to both Firebase Cloud messaging and Firebase installations API the API key is found under client API key. current Fielding Google services Json Google service nobody said to create any API keys yet yet Firebase also creates an API key in the Google platform credential with a name like Android Key autocreated by Firebase this could be a different key than the one found in Google services to be sure that both the the current key and the Android key in the credential console are the same go to the Google API credential console and click show key to verify ve their value it will be marked as unrestricted with multiple Android apps might contain duplicated data under the client array in the Google okay this can cause issues make sure to only have one client object with a correct keys and metadata and Google services okay so let me go into the Google services I'm not going to show you it now uh and it says that under a client we only have to have one I do have only one and for the current API current key we have an ID of a key probably that's not a secret so to check if it's that one I'm going to click on this URL Google Cloud API credential console to see the key is the same as in my once on this page uh I see that I was automatically redirect to a different project so just click on the uh project selector and search for the project that you're looking for I'm going to click now on that and we see here some some keys I can show the key and I see that it's that one that means that everything is correct uh but on this page we also see a warning because we need to create a consent screen with information about application I don't think we need that right now maybe we're going to come back later I think that one is for uh Google authentication uh so yeah these parts are a bit confusing in the documentation uh because I don't know if we need to take any action or we just need to confirm that the current key generated in our Google service file is the same as in our Google Cloud platform credentials I checked is the same let's follow along and it says that now we can rebuild the development build using as build command at this point if you need to create a development build see create a development build for a device we already have development builds for Android um let's go ahead and trigger a a new build using ES for Android and while we're going to do the same thing for iOS the build might be finished so back in our project let's go ahead and yeah I don't think that's a secret hopefully but I will delete it afterwards so in our project what I want to do is I want to trigger a new build but before that I'm going to do a git checkout minus B for a new Branch I will switch right away to day 14 and M should be end and I'm going to add the current changes uh setup notifications and let's trigger a new build for Android yes build platform Android and that's it okay using Expo server for Android credentials the key store and everything is ready the build has started uh creating and the new build will contain uh should contain the new credentials for fcm so when we will install it on an Android device we will be able to send push notifications we will also test that as well oh I'm not sure if I have a Android device but push notifications should work no they will not work on emulator Android device only so yeah not sure I'm not going to be sure if it works on Android or not but we can follow along and see what we have to do here uh there is also a way to send notification from a server so yes in order for Expo to be able to send notifications to fcm we need to um to allow to give Expo an API key that it will use to connect to Expo so in our Firebase console next to our project overview let's click on the project settings uh here I think I'm going to close everything and go back to our project settings uh Cloud messaging tab let's go to Cloud messaging and copy the token listed next to the server uh server key I didn't have a server key here uh because it's only part of the Cloud messaging API Legacy and at the moment is disabled so what we have to do is to enable this legacy mode inside Google Cloud let's click enable it's for the demember project now it's enabled if I go back and refresh this page I should see that it's enabled and there is also a server key that I can copy and with that server key with that server key I can go to to where to our Expo Account dashboard I'm going to have to select the project credentials then on the application identifier okay so let's first go to our our Expo account select your project and click credentials demember and I'm going to go here in credentials we have here two projects for Android and iOS I think I'm going to have to go to select the Android one and here uh if I scroll a bit I'm going to have server service credentials the fcm server key let's send up send push notifications to Android devices let's add this server key here uh and service account key file Google Cloud messaging token Google Cloud we're going to switch to Google Cloud messaging token we're going to paste the token here save and just like that we have a token here saved okay so for Android the configuration is uh finished what we have done is we have set up uh a Firebase project for our project that created a specific configuration file called Google services we imported it in our project and we linked it to our application through our app. Json Android and here we set it as the Google service file we triggered a rebuild for this new file to take into effect so that our application has access to uh the Firebase project and another thing that we have done is we have allowed our Expo project or allowed the Expo backend to send an interact with the fcm this way when we send to Expo a notification nexo has an API key that can send to fcm it will know that it's coming from us and that's how a user will receive a push notification now let's follow the iOS documentation on iOS if on Android we are using fcm to deliver the push notifications on iOS that is happening through APN a different service we but with the same purpose so yeah uh here you would need a paid developer account to generate the credentials uh make sure you have registered we're going to see probably we're going to have to do something there if you create a development bill for the first time you'll be asked to enable push notifications answer yes and follow the question when proped by EA CLI setup for your project generate a new Apple notification service key if you're not using EAS yeah I think for iOS uh it's going to be done using yes the the easiest way yes will automatically set it up for us and manage the tokens but let's see that register your iOS device because maybe we're going to have to do that development bills can be created okay or locally iOS device to register yes to register and any iOS device you'd like to develop onto your ad hoc provisional profile run the following command you'd have to do es device create in order to um to create a build a development build that can run on iOS so I already have it created so for me it's going to work but for you in order to test it on a real device first you're going to have to create that device using as device create um yeah it allows you to register Apple devices iPhones and so one for internal distribution uh internal distribution means that you won't need to upload your app to app store or test flight in our uh in our es. Json a development build has the distribution internal the preview as well internal and only production has doesn't have it so when using this internal we need to register and specify on what devices we want to run run it first or you'll need to choose backo account okay as I said I already have it but in your case follow these steps and you're going to register uh the device where you want to test it a physical device now all we have to do is go ahead and trigger a new build for iOS as well using as build platform is going to be iOS and I think we will also but yeah I'm afraid that I'm going to have to do it twice but we'll see we'll see but we don't need if I do just es build iOS that's going to create a a production build I want a profile a development build to test it out why am I not asked about setting the notifications in Json oh what I'm what I'm looking for wait a second guys uh if you create a development build for the first time you'll be asked to enable push notification answer yes to the following question how to set it up the second time if you are not using Okay test using wait a second why I'm not asked yeah yeah yes set notifications it's the same documentation yeah yes build doesn't ask uh uh for notifications for oh maybe I'm going to do that using the the credentials let's try that yeah yes credentials select the platform I want for iOS which build profile do you want to configure I want the development one for now do we want to log in yes okay and now I hope it that it will ask me about the what do you want to do build credentials push notification man your manage your Apple push notification key yeah I'm sorry guys yes that's the one that I'm looking for what do you want to do I want to set up a project to use push notification yes a simulator distribution does not require credential to be configured okay that means that I need to do what the to set it up for production let's write in production or maybe not production but what is previous error a simulation distribution and a simulation distribution is only this development because it has iOS simulator but a preview will not have it even though it's going to be internal but it's not going to be for simulator so yeah let's try to set it up for the preview not for the production uh I'm going to go ahead and do again es credentials our uh yeah for iOS development is for simulator preview is for physical devices so let's let's do that do you want to log in yes let's go let's go let's go and here let's do push notification set up a new push notification uh it asks me to reuse one uh I think I will just because they are still like my test projects you can set up a new one you can create new push ucation tokens okay it was assigned and I have to press any key to continue what do you want to do next go back go back and that's it I think I have it and I will have to trigger a new build for the platform iOS with a profile preview not development do you want to log in into your Apple account yes let's go and here it asks me to select my device for the ad hog build if you haven't created one you'll be able probably to to create it here but I have created and connected my iPhone to this development build so I can select it and the build that we create will only be able to run on my device okay it opens and I can go back to our to probably our project overview what we have here we have an Android build that is currently going we have an iOS simulator build that I'm going to actually cancel uh I don't need it anymore for simulator and we have this iOS build for internal distribution but yeah we still have to wait for the previous build to to finish for Android how much does it take well because I'm not going to be able to test Android let me actually also cancel it as well and test it only for iOS uh back to dashboard I want faster to test it on on iOS this is cancel this is cancelled and I'm waiting for this one on Android it's also the application ID in our build Gradle file yep thank you how to get notification when application is closed or phone is locked uh we we get it automatically like we already saw that when we handle the local notifications come on start so so yeah so far we have yes at least the build has started and after that we just want to we will test the this integration using the Expo push notification tool to see if if we can send a notification to a specific user device remotely and if that is working then the whole notification system is working so by simply sending and integrating with your backend and sending a request to the Expo push notification uh it will deliver it to the user device we have we are actually covering all of this in our Academy we have a specific module for the notifications but there we go more more in depth and we cover a lot more use cases of automated uh notifications as well so here in the notification system we learn both about in up notifications that you generating most of applications that offer interactions between users uh and also like automated out push notifications with a similar setup but also with backend integration of if something happens we automatically send there a push notification through fcm and APN so yeah if you're interested check out Academy at N.D for more information but now we are still waiting for our Apple build to create a new build that will contain configuration for remote push notifications yeah the build has actually already started and we're going to probably wait 3 4 minutes until until this finishes guys if you have any questions uh at this moment you can ask me um let's see what else we can check so far uh in this notifications layout where we configure the notification Handler I see here that it also has should set B to false what happens if we do should set B to true and now in my application if I'm going to go to 14 and and go to Notifications and schedule a notification uh maybe I can schedule it a little bit more in advance maybe I need to reload schedule maybe that's because we are uh we are still using with it with a development client we're going to see what happens later set badge we can also see a documentation in notifications for set badge maybe it only works when the application is in background most probably so I'm going to schedule the notification after 5 Second in order to have time to close the application so schedule come on for still doesn't set the badge we're going to see maybe if that is working not in a development client but in a proper application uh what else what else can we do here let's look through the documentation while we are waiting for our build to finish with navigation we saw for credentials now we have set up that we set up a Firebase okay and for iOS okay we can also configure export notification uh we can also configure like the icon which is going to be used uh by setting a local Puff the color and the sound and here is an example of how you can adjust that through the config plugins in up. Json you specify this array with a local icon color and sound oh so our build has finished that means that I can install it on a physical device let's click install I have to Simply scan this QR code on my phone that will open in iTunes and it will trigger installing an application we see it being installed currently and this should no longer contain the development client that means that when we opening the application it should right away go into the application without any menus and so on so yes as you can see we don't have any menus from that are coming from the dev client now if I go here uh yeah I can schedule a notification it still works uh when I build it I didn't have that uh that enabled that should set B so it's not going to it's not going to be here but what I can do is I might be able to send a over the air update in that way change some of the stuff because for example now there is no way for me to get the the token without rendering it somewhere on the screen uh right but maybe I can can get the same one or no okay let me let me do something and test it in this screen let's do notifications change only the title and try to send an over theair update we learned we have said that up in our previous episode and now we're going to use it to send an an update without having to rebuild the whole project and to do that we're going to do update uh and the branch is not going to be production but it's going to be preview and we don't need probably any message set up notifications are you streaming to Twitch as well actually no only to YouTube how do I come in contact with you you can reach out uh on on email Vadim noas dodev exported it's uploading to the server for iOS it's finished so remember to take to test a new overw update what we have to do is first of all close the application the second time we open V application it will download webd dates so maybe it's smart to wait a little bit here for web datat to be downloaded and after that is happened we will reopen it again for the new updates to take effect and if it worked the title of that page sorry should have changed so now if I go here yes as you can see at the top we have notifications so that means that the overway update worked uh that also means that I can display somewhere the Expo push token I can do that where I can do that Expo push token I will render it in a text Expo push token very weirdly I will do it in the middle of a screen or something like that with a position absolute bottom 100 and a background color red and here inside I'm going to actually show the Expo push token in order to get it somehow from this device um and in order to do that I'm going to have to send an another update with a message show push token let's go exporting okay we're exported uploading and I will start the same process after publishing open it once to trigger the download wait for a bit for it to finish then open it again to use the new update now if I go to 14th here we see the Expo push token displayed at the bottom of the screen I'm going to try to copy it somehow maybe like this give me just one second to to figure it out how to copy that code I copied something but I don't know what so I'm going to go to the expo. d/ notifications and let's try exponent push token and let me confirm that it's this one VW X FD I think it should be correct so if the message title will be hello uh remote notification and if I'm going to press send what look at what we see here we see this notification that was received in our application and we are rendering it with some custom UI it has title hello it has a body but this notification also was received here hello remote notification and so on if I will close everything and even if I will close the application someone was asking how can we send notifications when the application is not running so as you can see the application is not running uh and if from this channel I'm going to say hello from the background and also let's send some data like let's send a URL that will redirect to to slash day 6 slash Tinder if I go if I send this URL notification you're going to see that I received this notification here I should receive why I'm not receiving it Ah that's funny oh because it's not a valid the URL should also be like this everything is valid and the notification was actually received we see hello from the background if I press on this one it will open the page and it suppose like if you have a logic that we have here in notification layout for redirecting when we take the when we take the last notification if you have this logic in your root layout it will automatically redirect there however we have it in a different layout so it will only do that when we get on this layout but it actually works uh and it will also work if for example we have application open we have application open uh for example if I go here to our notification application if I'm going to send now a notification that will redirect to the four let's try to send it and move back to our application to see it has the URL day four but it didn't redirect but why I didn't redirect URL SL day4 and that was in the OD notification received I don't know why I was expecting it to to redirect for example day five maybe send notification we receive it but we are not redirected so let's try it again go here go to Notifications and send a a notification with some data that's a bit weird because it displays it receives oh but we are not interacting with it that's correct we are not interacting with it we are only going to be redirected when we interact with this notifications yes and we are redirected to the day to the Maps so now both our local notifications and remote notifications are working we know that the remote notifications are working because when using this push notification tool and sending a notification to this using the device token we see that the device actually receives it and from the previous tab where we handled and worked with local notifications the same logic applies uh to remote as well uh now the next step would be to send to the Expo service so if I'm going to go to the documentation to push notification setup maybe you're going to see that uh in The Next Step that you would have to do is somewhere from your back end you would have to send to to the Expo notification service a request with the Expo push token of the user a message and some data and the Expo back the the Expo backend will redirect it to the right place so our backend we simulated it using this tool but it's actually the same you can also look at references to see how we can uh overview let's see uh yeah here is the information about sending it from a server and there are libraries for a lot of servers for node GS for python um Java and so one so your for example if your backend is using nodejs you're going to look at this documentation and you will install it in your backend you'll create your Expo uh client and when you need you will do messages do no send push notification a sync and in fact you don't need any extra libraries to send that push notification you can simply send a post request using any fetch or even curl command to the exp. host and use your Expo push token and it will work like that we can test it out maybe this command by opening a terminal and changing here only the exponent push token so let's see if by sending a post request to this URL we're actually going to receive a notification on the device I'm only going to take this part of the export push token that identifies a device and if I send this one I expect to receive on the right a new notification here on the bottom with hello and body world let's see does it change yes it actually changes to hello world and at the top we see that we actually receive this one so now in order to send a push notification to a device all you have to do is send a post request to this URL with this data two which is an exponent push token title and body and that's it that's all you have to do to send a notification and it can be done even from a from a device from a from a client side you can do it from RE native without any backend as well okay anyway that was the push notification tutorial this video is a bit longer but we spent a little bit of time of building everything and configuring everything so yeah but in the end we have a fully working setup for local and remote notifications we tested it on iOS we didn't manage to test it on Android but everything should work on Android similarly if you have any questions let me know um let's see roel is asking can remote messages be sent from the fcm console if you want to send from fcm console it's going to be delivered only to Android devices because because back to this documentation to the scent to the pushed server as you can see through Firebase we can only send to Android well I think it's also possible to set up iOS with that but in that situation you're not going to work with Expo backend so yeah if you do it directly with Firebase that's going to deliver on I on Android if you do through Expo backend it can deliver through Firebase to Android and through APN to iOS devices hello from Brazil hello isak how are you doing what about sending Global notification without a specific Expo token that's an interesting question to do in an expo backend to be honest I'm not sure uh with with Firebase you can do that with Expo back end I'm not sure but that's a good question AR Mo thank you very much for being here this is clearer now I hope it is how to send notification only to certain user not all users actually the way we implement it is sending it to certain users and Rogelio was asking about sending it to everyone and I don't see it from from from out of a box right now to send a notification to everyone so what we have right now is sending it to a certain user knowing his Expo push token now in a real sit situation how everything is going to happen um in a real application you you would request the Expo push token and of a user and after that you'll have to save it somewhere in your backend in your database and Link it to the user because we took a little shortcut by displaying it in the application with text and then copying and using it but of course you you need to be able to access the a user's token from the place where you store data usually a database and after you have after your user model has an uh a field for the Expo push token you save it when the user gives permission and later one for example example uh activities will not happen between push tokens activities will happen between users for example user a likes user B post how to notify user B well we know the user information we know that we can get from the database his Expo push token if it if we have an expo push token that means that that user B has given permission to be sent push notifications otherwise if he didn't yet set up the his notifications we're not going to have his token so with this token we will know it and we will be able to send the notification to that user so that's why usually the the Expo push token is handled mostly on the back end and from our front end we are like working with users or with with our data let's see if we have any other questions where is our chat here finally I think it's one of the hardest theme do you need any extra steps when you want to deploy to App Store no for App Store everything is said uh we will only have to create the credentials for production as well so in the step that we have done to to do y yes credentials uh we have set up the uh push notification token for the preview profile we will also have to do it for the production by going here uh and following the same step to set up this build push notifications manage your push notification key so go make sure to to configure v as well I'm currently using Firebase function to send notification when something from the user changes in the database and it's working fine yes that that would be a good solution as well is push token a constant uh the push token identifies uh an application installed on a device so if a user will sign in to your application from different devices uh he will have two different Expo push tokens in that situation you can change a little bit your data structure uh if you want to support like if if usually the users of your application are signing in from different devices you would want to save all the Expo push tokens because if you only save the last one the user will receive a push notification only on the device that he used lastly with your application if it it makes sense because you will always override however if you keep track of a list of tokens um link to the user maybe an array of Expo tokens when you want to notify that user you can go ahead and send to all the all his Expo push tokens and this way he might receive a notification on his phone on his um on his uh iPad on his web if he's using your application so yeah that's also good uh question uh well explained like I said earlier I landed the Expo token of the use on the back and when the user give access to push notification the notification token is safe for each user yes how do you handle badges when you dismiss a notification I actually haven't seen the badges working at all for us so from for some reason the badges are not working is there a maximum of notifications which I can send in one second from a server uh the Expo notifications service here they will have an FAQ and limit of sending notifications so there is a limit of 600 notifications per second per project that can be sent if you exceed this rate will fail until the rate Falls below 60 per second yeah so by default the Expo notification service will um have this limit of 600 per second uh notific iOS doesn't support the ification icon I think it supports or it takes the icon from the icon of the application that's why I haven't set up an icon for an application that's why it's missing there but anyway guys uh we are live for almost three hours thank you very much for being here and I hope that this tutorial uh was avilable to you and you learn something important about building mobile applications and this is sending push notifications a very powerful feature that can help you improve the engagement of your application and keep your users uh using your application um yeah uh don't forget that during December we're going live every single day with a new

Channel: notJust․dev

Views: 16,648

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, mobile development, DEVember, Expo Push Notifications, Push Notification Tutorial, Mobile App Notifications, Remote Notifications, User Engagement, Expo Notification System, Notification Management, App Notification Strategies, Notification Testing, react native notifications

Id: cziFOUtXxrQ

Length: 153min 57sec (9237 seconds)

Published: Fri Dec 15 2023