React Native Push Notifications for iOS and Android

video we're going to set up push notifications in react native so we're going to use the react native push notifications library to set up notifications in both Android and iOS so basically in our application if the user is logged in but they're not actually on the application they're in an inactive state so if one person sends a message to the other person but they're in an inactive State we want to set up a push notification such that they can see the message now there's a couple of um nuances with setting that up the documentation it's slightly it's it's pretty good but it's just there's a couple of details in it for iOS that makes it a little tricky so for example iOS by default it shuts off the soccer connections when you go inactive so we use a timer background timer library to be able to detect or account for that and then we set up um you know the notifications for both IOS and Android so if you want to set that up check out this video foreign [Music] let's do a demonstration of the push notifications so on the left hand side I am logged in as John pink and on the right hand side on the iPhone emulator I'm logged in as Larry Smith so if I go to the log the home page so I'm no longer on the application you'll see that that's changed to active four hours ago that's just hard-coded but what we're working on is the push notifications so I'm going to say hi John sent him a message and then you can see you get this push notification on the Android then when you click on that you see that you get that message there and likewise if I am going to be off the Apple application I can still see I can send a message I can say by Larry send him a message there and then you see that you get this nice notification here and it preserves the chat so let's see how we can build this out so first things first we need to get a package so we need to install the react native push notification package and you can copy the code that I'm going to show here but there's a few nuances to it um and iOS has a few extra steps so you'll also need to have the um same package but slash push notification iOS so if I just come to visual studio code and what I might do is just open up the package.json just to show [Music] some of the dependencies here so actually I might just get up the the changes and then open this package Json here like this so you will need to install rack native Community push notifications we also need react native background timer because iOS Android lets you do some background stuff so when the app's not open but iOS doesn't so we'll need a package for that and that's the react Dash native background timer package and then the react native push notifications and then I just got a couple of these types so the same package but the types there um so after you install that you'll need to go into the iOS folder and do a pod install and after you do that you can go through the documentation but there's a couple of extra steps so um that aren't shown in the documentation so this video will be handy to pick up on some of those so basically you go to the build Gradle file and that's in the Android folder the build Gradle folder and we'll start off by trying to get the react native notifications going so you need to have this Google Play services version and plus just means the latest version and then 21.1.0 is the of Firebase now we're not actually using Firebase um but because um you know this is built on Google I think there's some Google analytics stuff uh related to Firebase so you just need to have that there um and then we go to the Android manifest file in the source folder in app in Android in the main folder there and then what we need to do is we just need to add a couple of user permissions for the phone to have access to Internet and to vibrate and then we also just copy and paste this this is just all from the documentation you just copy and paste this rack native push notification uh stuff in here so this will take care of things for Android um so then what we want to do is we're using this color here as white um so we'll just come to the colors dot XML file in the values here um and then we'll just go ahead and get that resource there now that takes care of Android um iOS is a little different um so basically you you have to open up xcode and you have to open up one of the files in xcode um and if you go to the iOS folder there's this Facebook Messenger Dot xcw um workspace and then you have this sort of stuff in here that would get updating but you can actually just right click and reveal it in um finding folder and then you can open it up in xcode so if you open up xcode at the top here we've got this Facebook Messenger folder and you go to this signing and capabilities tab and you just click on ADD capability and then you can add the background modes and then you click remote notifications and then you can also do the same thing and get the push notifications and then you can come to the app delegate file and then you can just add this user notification snippet here and have this interface here so you just copy that from the documentation or from GitHub and that app delegate files here so there's a DOT HR and there's also a dot m file so you come to the dot m file and then you can just copy and paste some stuff in here as well so we just copied and pasted this snippet here and some of this this code here so let's go back to visual studio code so now we've installed things and remember you need to do a pod install from the iOS folder in addition to the installations of the packages and after we've set that up uh we can actually start to create the or register our code and configure it so we come to the index file and it's important you do this in the index file because it needs to be outside the scope of um any life cycle methods that are happening so outside of the component so basically in the index.js file here and I might just collapse a few things here to make the code a bit bigger essentially what we want to do is we just want to import the push notification and also the push notification iOS and then we can use the push notification and then we can configure it and then it takes a configuration object and it has an on register method which we're just console logging out the token from the Callback which isn't important we have this on notification which has a callback where you get the notification and there's a bit of a extra thing here for iOS because this package here sort of interacts and builds off this one here but there's some extra configuration in the iOS so you just need to have this when you finish the notification it's received um you need to explicitly push the notification and you know fetch the result which you know there's no data here but keep it to the iOS device so essentially iOS stuff has more extra permissions and stuff like that I just need some uh you know this extra line here to let the device know that a notification is received uh and then you need this channel ID I've just put Channel ID one this could be whatever you want as a string and there just needs to be a way to IBI there needs to be a way to identify that these permissions are for Apple or iOS so we're giving it some sound on iOS and all these sorts of things here so as you'll start to notice iOS the rules are a little stricter than Android uh see you know you just have to do a couple extra stuff uh pop an issue with notification I said that's a true um and this is all from the documentation it's just copying and pasting basically um and then request permissions so on iOS you actually need to request permissions to accept that you can receive notifications um so if you're on the iOS device you just set that to iOS um so then basically what we got here is we have this friends context file here so this is where we have our conversations and our messages I think I was using um in the previous video I set up the conversation when you actually click on the conversation um so I've just made some adjustments to move it to the Friends context so if you look at the friends context here and you can see if we go to the top here we've got the friends uh the conversations and the messages here so what I've done is I've just added a friend and I've also added uh two methods here um so send a message um and set a friend so when you click on a conversation uh from the particular conversation you're in we want to be able to say oh okay that's where we can know that we've got a particular friend selected and then we can also send a message from there and then handle this all in this friends section so potentially I could have called this instead of friends context probably could call this chat context um but chat is related to friends so hopefully it's not too uh unclear or anything like that in terms of the naming um so yeah I just added these into the interface here so the send message you want obviously the message the text um and then I also have the conversation ID which we're getting from the particular room that we're clicked on so that's getting passed in and then we're setting a friend here it's just a Setter for an active friend um we need to cast an empty object and set it as an active friend to keep typescript happy here um and then we just add in those um you know those signatures there um for the context uh let me just add some State for the friend and setting the friend and also the conversations which would move from the other file and then we have this use effect hook here so we have conversations if the conversation's length is greater than zero we'll just return um we also need to have as dependencies the chat socket because we want to be listening for the get all conversations and that returns all the conversations and then we can set the conversations to all of the conversations uh and then on cleanup we just turn off that uh listener there and then we have another use effect hook um so it's listening for the new messages and then we're just looking for the chat socket or listening to the chat socket to detect any changes although it should only change if you log in again um now to a different account that is as well this is where we can just set the messages we get back um and then on Android we have this push notification where we need to create a channel and this channel ID is the same as what we've caught it here this could be called whatever you want it just needs to be a string I've just called it the string one uh channel name here that's sort of optional I think um and then after you've created the channel so this will only happen once so if it's already created it will just it's sort of like a Singleton or something like that we'll just return the channel and then we have this local notification um so basically we just attach the message there um so we can say okay if it's iOS let's we have to use the iOS Library where you can just call this add notification um and then instead of Channel ID takes ID and then we've just sort of attached the message here so the title probably could be based off the user as well we have that data anyway so we could just put that in there um but I'm not too concerned about that at the moment and then we'll just turn off the socket on cleanup then we'll have another use effect here with a chat socket is active and it's logged in as dependencies so if you're not logged in or you're active it's going to just return so it's not going to do anything but if you are logged in but you're not active so your app's open but you're and you're logged in but you're on a different something doing something else on your phone then in that case this is where we need to use the background timer and then I can run a background timer and every three seconds we can emit to the server that we're still there and they'll keep the server alive and then they'll allow for messages to be received on iOS because on iOS by default it shuts off the sockets when you are not active so this is sort of a hack to get around that and then we can return the background timer and stop that on cleanup so just to go to visual share code in the chat Gateway I've just created a very simple method here so we have this at subscribe message ping and it's literally doing nothing all it's doing is just keeping the connection alive so let's just ping in for that so if I return back to visual studio code here if I go to the friend.tsx file basically what I can do is I can import the friends context which we've just sort of created or extended on and we can use that set friend methods so basically whenever is active changes we can set the friend to the particular friend that we're on so the friends passed into the friends list Loop through all those and for every friend that renders a friend and we can set that data whenever is active changes um so and that means we can use that data um so let's come to the index file and you can see up here it's from the chat folder in the chat screen so essentially we just want to when you click on a button um we essentially just want to say okay well we can just send the message um and then they'll go to our contacts because in the chat page so we're in a particular chat uh room we have access to the text that we're about to send and we also have access to the conversation ID so we put in the text and we get the conversation ID if we have that then that um cause the send message

Channel: Jon Peppinck

Views: 28,418

Keywords: react native, react native push notification, push notifications, react native push notifications for ios and android, react native push notifications, react native notifications, react native scheduled notifications, react native tutorial, notification react native, push notification, react native local push notifications, push notification in react native, ios notification, andriod notification, notifcation coding in react native, react native for beginners, react native app

Id: MjdF5HM05ls

Length: 19min 26sec (1166 seconds)

Published: Tue Mar 14 2023