Push Notifications for a Chat App with React Native 🔴

we are live hello everyone hi not just developers how are you doing today and welcome to a new live stream uh in this live stream we're gonna continue our chat application that we have started previous week and we're gonna complete it with a set of extra new features which will take this obligation to a completely new level so yeah we're gonna implement today push notifications uh ui customization and also threads threads similar to slack um yeah but the focus of today's video is gonna be push notifications because this is the feature that a lot of you have asked during the previous live stream if it's possible to implement push notifications and today i'm going to show you how to do that so everything is going to be done in rack native or for the notifications we're going to use firebase firebase notifications and uh for our chat api and everything else is going to be glued together using stream chat sdk and yeah by the way stream chat is the sponsor of today's videos as well so thank you very much stream if you didn't follow the first video let me tell you a bit more about stream sdk and what we are doing so yeah stream chat sdk is an api that allows you to build a chat messaging application real-time chat messaging application very very fast and really easily you just combine a couple of components create your application on stream and everything is working out of a box uh yeah in fact i'm going to show you a small demo of the application of what we managed to build during the previous live stream and yeah like the amount of features that we managed to uh do with stream chat sdk like it's insane like it includes uh features like message reactions threads url enrichment user present if a user is online or not flexible permissions slash commands for sending gifs images sending other type of content like attachments and so on these are just a very small list of features that you can implement and configure with stream chat um yeah blah blah car is using taskrabbit is using what else like adobe is using stream chat as a case so it's a very um very scalable solution for building chat applications and the good thing about uh streaming stream chat sdk is that they provide a completely free account for small teams and for startups you can access the makers account following the url in the description below the video or following gstrm get stream dot io not just dev and if you uh fulfill these requirements of having five or less team members and less than 10 000 monthly revenue then you get all of these features for free so yeah once again thank you stream for sponsoring this video and let's continue with uh with our video all right so uh if you want to follow along this tutorial what you're gonna need uh first of all you're gonna need a coffee thank you very much alexander for the coffee um yeah you're also gonna need you're also gonna need the asset bundle which you can get at assets dot not just the dev chat to get this presentation and any other materials that you might need you will need the expo environment set up you can check it out here and a stream account that you can get either for free forever with a makers account or you can get a 30 days free trial just signing up for stream right so uh this is as i said this is the second part of the video um and if you didn't follow the first part i highly encourage you to check it before starting this video because it's just three hours but we are we managed to build a lot there so all the fun is there i'm gonna show you in a moment what we managed to build here however if you want to start from this point that's also possible i'm trying to supply all the source code for you guys to be able to start from uh each video that you like so follow this url the repository and check out the part one branch that's going to be the branch with a code that we are using today to start from after that install all the dependencies run the project with npm start or yarn start and then run it on your simulator emulator and here is what you're gonna see okay yeah so initially you see a list of chat rooms that you are talking with and previous time we talked a lot with people these are actual subscribers so might be people from the live chat at the moment so yeah here it is um there was a a chat room with a lot of things there so you you see like how many features you can do here you can send you can send a gif let's do like this what else you can do photos attachments um replies uh yeah replying to a message yeah everything from here we build during the previous video so go check it out also you can see a list of users that are registering the application and you can start a chat with any of them here you see how many unread messages we get here on the left and so on alright so first of all i forgot to run the intro let's run it now [Music] [Applause] [Music] hola amigos hello everyone who is joining in the live stream in the chat how are you doing today guys um saludragosh permission to dance a referral system yeah i heard about referral system idea maybe we're going to do it in the next project how long will this stream be hopefully it's going to be like two to three hours can you make this in firebase we're gonna use firebase for the notification here but yeah like only for notifications okay all right guys so let's uh let's start building and the first step to do it is yeah definitely let's open our chat documentation docs uh for the react native let's open the ui components part i'm gonna zoom in a bit and here you will see the documentation for the push notifications uh that you need to do all right so the first step is to create a firebase project let's open uh yeah here is a url on how to create firebase projects let's go to firebase.google.com and here let's go to the console if you don't have an account you can register to firebase for free and here let's add a new project add project and the name of a project is going to be what's the name of our application uh messenger messenger clone let's see continue uh yeah let's enable google analytics as well uh i'm gonna create a new account for this messenger clone save location let's select our location so select your country in my case i'm going to select spain and let's accept the terms create project let's wait a couple of seconds until it creates but while we're doing that we need to we will need the bundle identification uh of our application uh and yeah this is the native bundle identification that identifies each application one for example google play store or on the apple uh apple store app store so in rec native uh in uh using expo how we can do that we need to open our what do we have here app.json from the root folder and here for ios let's provide the how is it called bundle identifier and the bundle identifier looks very similar to an url the only thing it it is inversed so if my application will be hosted on let's say uh it doesn't have to be hosted like i'm just saying like messenger dot not just dot dev then the bundle identifier is reversed like dev dot not just dot messenger so the first part identifies your organization and the second part identifies them application so messenger probably is okay messenger clone let's do and the same thing for android here uh we're gonna say but here is not bundle id but its package package name package yeah just package and let's copy the same name come on here we go uh so we have set the ios bundle identifier and the android package now let's go back to our firebase and here we see that our new project is ready let's continue and from here this is the home page of our application like this probably you will see better let me zoom in a bit so first of all let's press on this settings on the top left corner near the project overview and let's go to the project settings in the general tab if you scroll a bit down you will see your application here so here we need to link our firebase project with our specific native projects for ios and android so let's start with android and here we're gonna put the package name that we just set in our app.json here this is the package name and for the nickname i don't know like it's not required but let's do messenger clone let's register the application and now let's download the google service json this is a configuration file that needs uh to be included in your build in order for your application to connect correctly with a firebase application okay so um we don't have to follow these uh rules because we're gonna set it up a little bit differently so just press next and here next and continue to console now let's do the same thing uh but for ios right now so ios it's the same bundle identifier and the same name messenger register application if your application is hosted on app store you can provide their app store id as well or you can later on update whenever you upload your application on app store now also let's download the google service info file this is the same configuration but for ios and yeah next next next continue that's it from the console now the next step is to install the react native firebase package in our application so let me let's uh see the documentation of our stream chat is decay so first of all create firebase project register ios and android application we did that download the configuration file for ios and android perfect and now let's install rec native firebase so we do not have here the documentation but i would like to go there to react native firebase yeah it's this one rn firebase.io and here there is the getting started guide uh it starts with a documentation about how you can install fire rack native firebase in a rack native project in using rack native cli however our project is using expo so if we scroll down a bit there is the where is it come on expo here so uh with a new version of xbox now it is possible to work with libraries that contain native code in expo this is this was not possible to be done before but from the expo version 41 this is possible using the config plugin system so we're going to try to do that today and see how it goes so integrating with x-rays possible in both in both workflows the only thing is that react native firebase will not work in the expo go application so you're gonna see how we're gonna build it but and run it on the device the same way but it's yeah it's not using the expo go application that we are used to okay so yeah let's um let's start with him installing the react native firebase slash application this is the core uh where is it let's open our i'm gonna stop the server we're not gonna need it anymore and let's do npm install react native firebase slash application and also react native firebase slash mass saging with e right no it's with a messaging okay so the first one react uh firebase application is the core of react native firebase but the messaging is specifically for notification and cloud messaging so we're gonna need them both let's wait until we install and yeah after installing it we need to add the config plugin to our plugins array in our application.json and we need to provide the puffs for uh the two files that we downloaded recently for google service and google yeah google service files so let's go ahead and do that while we are waiting for it to install but i think it already did yes okay i need to upgrade my npm and we're gonna do later so now we need to using the plugins system of expo we need to link the firebase plugin so here after our web we're gonna do plugins and the plugins is an array with plugins that you have so it's i think i have it copied react native okay i need double quotes here react native firebase slash application and that's this way we are linking the package which contains native code with our application and by doing that expo will make sure to include everything from the native code like android manifest file and all our dependencies in our uh native android application uh another thing is for ios here we need and for android we need to provide links to our configuration files so let me uh okay let's bring these two files that we downloaded google service json and the google service info to our to our project here now to google service file google service file i i can copy them so google service file this is for android okay in the android object here after the package we can specify the google service file which we'll take from the same directory here google service.json this one and the same thing for ios ios let's add a comma google service file and it's valver file okay all right and next rebuild your application as described in the add custom native code guide okay so when we add custom native code which we did right now with plugins we will need to run the project a bit differently it's with expo run ios and export on android so let's open our tools here and do expo run android i'm gonna work in this video with android because uh testing ios notification with the emulator is a bit more difficult so i'm gonna try to keep it simple with android device because with android you don't have to publish your application in order to test push notifications however this should work both with android and ios and now we're gonna have to wait until expo will build a specific version of our application that is going to be able to run as a standalone version without expogo so let me close everything here and yeah we're gonna have to wait a bit all right like this perfect when we started the course i have pre-ordered did you receive email notifications emails from me because i sent emails to everyone who have joined the course during the pre-sale campaign so please if you didn't receive any mails just let me know write me an email at vadim at notjust.dev and i'm gonna make sure that you are all set why is everyone using expo because it makes your life easier it's easier to get started is it's easier to debug to install libraries and yeah that's one of the reasons of course but yeah like they both like rack native cli and expo they have very specific use cases so i'm not saying that one is better than another but in the context of building fast prototypes and building uh even building production ready application in most of the cases expo is a very good tool that will save you a lot of time specifically with cloud builds that they provide like you can have a perfect ci cd that will deploy your application like in minutes when you push new codes so yeah what's the difference between react native cli and expo expo is just a set of tools built on top of react native that like v we do a lot of things but let's start from the beginning like it makes it way way easier to get started and get your first react native project up and running with expo you don't have to install android studio you don't have to install xcode in order to get started all of these native projects are managed by expo behind the scenes and you just have to install the expo cli initialize your project and you're good to go to test it another benefits is that you can test your application right on your phone uh and specifically if you are building ios if you want to test the application on an ios phone but you have a windows device with frag native cli you cannot do that with xbomb you are able to test it directly on your physical device on ios physical device we have without having to connect any cables and so on you just have to be on the same network we started us some some of the benefits that they like yeah build successfully all right okay and now it says that it's opening our application on our pixel device android bundling complete and here we have it here we have our application so i'm gonna sign in with the same account okay and yeah everything is working as it was working before uh now however okay let's test a push notification i'm gonna close the application and let's go back in our firebase where is it did they just close it let's open firebase dashboard go to console and let's open our messenger clone and let's scroll down in the left panel until we get to the cloud messaging under the engage tab so cloud messaging and from here let's press send your first message hello there how are you uh okay notification image no we don't need that next application let's select which application we want to do it let's select the android one you can send to both of them actually where is it okay to specific version you can send scheduling now conversion next additional review and publish the campaign was successfully saved the campaign was successfully started and in a moment we should receive a notification here sometimes it takes a bit of time until it reaches so we're gonna wait a bit come on hmm [Music] will you work let's try one more time but i think it's just gonna take a bit more time next android next next review and publish come on come on let's cheer it up hello one khan how are you doing should i be inside the application but i don't think so it should work behind the scenes as well next next review publish try opening application yeah i did that same result cloud messaging um google service file it's here it's here uh come on let's check with the commentation maybe i've missed something so next rebuild your application as described in adding custom native code okay uh maybe it doesn't have oh yeah okay okay yeah i think i know why um we will need to ask permission to receive these notifications so uh to do that yeah this is how we will request these permissions so uh in the get stream um documentation if you scroll down a bit you will see this method request permission so let's copy this one and let's go in our project in the app.tsx in the app because this is the first screen and here is where we want to ask user for this permission so let's add them [Music] the request permission method okay we will need to import messaging so let's import mess jing from react phase firebase messaging here and i like to keep it here we also can delete a couple of things from here like selected channel isn't that important right now but still okay so when should we ask for the permission whenever we open our application so for that reason i'm gonna do a use effect which we'll call add the empty dependencies array to run it only once and let's call the request permission here save and will you ask for permission authorization status one which means that it's uh enabled which means that everything is okay with the permissions but let's try again now after doing that so let's do a new notification and next android review and publish and come on you can do it the bad thing that when i was uh testing before the notification were not like in real time they took around like 10 seconds or 15 seconds or 20 seconds to reach so now i'm staying like i don't know if i should wait or it's not working all right next next review publish and receive a notification but not on well no no no something else man that's quite sad to be honest so it has access request permissions okay and still no notification you can test this campaign by entering or selective uh that token of your development device below okay let's try to get this token by calling uh get token so i can do here wait messaging dot get token and this will cost token console.log token this way we take the token of this device and we're gonna try to send here is this token in the debug tools oh come on and from firebase let's add the new token here and let's test send test no no notifications send okay i see it it's there it's there yes you see we are receiving finally receiving notifications so if i send a text message to specifically my device i will see it here final receiving notification and if you press on it it will open our application nice i the only thing is i don't know why uh let's try one again once again just by doing sending to all users here next now review and publish is it some issues with this no now i receive okay now you see finally receiving yeah okay fine uh it's good that now it works it probably needed uh some time to update because we didn't change anything uh the only thing is that yeah we set everything up and we requested these permissions the only thing that we did is get token so maybe unless you you generate a token for that device when you first call this get token function and that's why until now it was not working that also might be the case that also might be the case so if you're not receiving try to get the token of a device send manually uh from here to your device send a test message and you will see if it works or not come on send should work yeah you see it here it's working if it's working that's good now we can move uh to the next step and the next step is where is in our get stream documentation here so we skipped a couple of steps let's have a look what we skipped here so firebase setup now this tab is complete we tested it we know that it works so we can move to the next step uh okay integration with stream all right so from firebase we need to get the server key and to provide it to stream sdk platform all right let's go back to firebase i don't know why i keep closing it and let's go to the console and messenger clone okay in our settings here on the top let's go to the project settings and let's choose the cloud messaging tab here from the tab from the cloud messaging let's copy the server key but you see here copied and now let's go back to our stream and but we need to go to no documentation but to the console so get stream i'm going to open it here dashboard and let's select the application not just messenger and for the chat here on the top you can see the chat let's go to the overview and let's scroll a bit let's scroll a bit and see until we see firebase okay let's enable firebase and we will paste in here the server key that we just copied from the firebase copy paste and save real time settings successfully updated okay okay here our step is done uh we integration with stream get the stream server key get the server key we copied it and we uploaded it to um to stream in order for stream to be able to send this notification because stream is going to be the one the back end of stream is going to be the one who will send push notifications regarding new messages new mentions and so on so yeah now the next step is registering a device with stream at the moment stream that has no idea what's the token where is it this user token and without the user token stream has no way to push notification to a specific user so we need to somehow take this token and tell stream sdk like here is the token of this user if you need to send any push notifications send it to this token so uh okay once you configure firebase server key okay uh here is one specific node like uh the function at the device which will send the token to the server should be called after connect user after you sign in the user in the application because if you if you call it beforehand stream sdk does not know which is the currently sign-in user so it doesn't know with which user it should match this token so first of all do the connect user and after that do the other device in order to add the token the firebase token so here they are doing it a little bit differently because we are doing it in the same component but what do we have we have a request permission which we already added in our application every time you open the application if the user did not give permission we're gonna request it um then uh what do we need okay we need to get the token we need to put it there all right so the same thing that we are doing here to get the token let's copy it from here because we're not going to need it in our application component we will need to go to our authentication screen is it to authentication screen or is it here user id because here we also know when the user now let's go to the authentication because youtube is saying that it does not receive any data my streaming software say was there any drop in my frames or it was working fine all the way because now i see that it's okay but weird okay okay okay yeah everything seems to work back to normal so in our sign up screen uh let's do a register device for notification notifications should we do it here one way would be to uh to do it here because in the sign up screen is where we connect the user but the thing is that we are setting the username in the global state and this way we have access and we know if a user is signed up or not here in our application right because our application is responsible for holding the user id which will if it's empty string it's not signing if it's if it has a value that means that the user is signed in and we can safely register the um the device so let's define it here in our application register device first of all we're gonna get the token and the function should be a sync uh yeah let's get the token and after that using the client other device a weight client yeah because here is where we have a client that's true client dot uh add device oh come on and device hey edan thank you very much for the donation that's so nice of you uh it ain't saying just arrived do you use firebase for this chat app we are using firebase for the notification for the notifications for this app and yeah only for notifications add the device and the device the device will be this token from the messaging and here the second parameter should be what type of token is this and this is a firebase token save and anything else not at this moment so when should we call register device because right now we just define it we are not calling it anywhere we should call it in a use effect i use effect let's call it register device however it should run every time this use effect it should run every time our user id is changed so and we also will need to check if user id only then called register device rare register device should be called only if user is authenticated like this register that's why we're checking here user id that's why we have user id as a dependency whenever the user id will change we will run this function again and we will check if we need to register this device okay what let's try to run the application where is it here messenger all right let's login and everything is okay so far um okay okay um so now we need a way to test if stream sdk is able to send notification to our application uh there is a tool uh interact with push notification we're gonna get there but if we scroll down to troubleshooting uh push notification i think it's in the readme here we have uh vr cli and we very cli you are able to send push notifications yeah using vcli stream chat where is the documentation about the client okay nonetheless yeah i don't remember where is the documentation but um we have a cli which will help us test our uh notification and not only it's able to help you with different kind of tests so to install it let's install it group globally with npm installed minus g dash g get stream c l i okay um hey am i making a music app from your spotify clone that's nice kudos to you i heard that a lot of people are actually building startups and building application based on that spotify clone which which is always encouraged good job guys the question is why didn't you create a music player screen in that and can you tell me how can i add that screen in the application i didn't do that just because i didn't have time to build it in in the live stream and how you can do that it's a very very very general question so um i don't know how to answer it it's not possible probably to answer it in in a sentence like you have to do that and you achieve it like i showed in that build how you can add different screens uh for example for the home screen and for the for the album screen you can replicate this to create a new screen for your music player when you take the logic from the widget of a music player and put it in that page adjust the styles adjust the ui and here you go here you have it but yeah i understand it's not that easy and probably i cannot explain it in an answer here all right so uh we have it now uh we need to configure it so let's call stream config set uh what's your full name i don't know vadim what's your email address um is it this one associated i hope so what's your stream api key let's go to the dashboard and in the chat overview where is it wait a second where is the keys should be yeah up access keys so my key is this one and the secret is here so you can copy it let's leave default this one uh environment we are working in development yet so development uh error tracking true and yeah your stream sli configuration has been generated perfect now uh the way to test push notifications here first of all let's close the application let's put it in background it's not closed it's just in background and we're gonna write stream stream uh chat push and test and here with dash u we need to specify an id of an user so if you don't know your id you can go to explorer and the id is a username that you are using to login in the application so users mine is uh vadim right with no there should be one with this one medium wave lowercase v so let's try that landing and let's check it yep but dim there is a member who messaged you if i press on it it is supposed to open back the application awesome so let's check also if it works when replication is completely closed like i closed it so let's check another notification there okay yes it's there and if i open it will you open the application but that's probably not the problem with our application i know what's happening but here it is so um yeah guys this just by doing this we enabled push notification for our application we have tested using the cli we make sure that we receive these notifications there now to test it with two devices to be honest it's a bit more difficult so unless you build this application and upload it to play store to your internal tests or to apple app store it's a bit difficult to test it with two devices the only way we could do that is to open our android project in android studio build the application then open two emulators here and with that apk run the application on two different devices and then try to see if the notification will go from one device to another i mean when you message from one device a user to another device they should receive this notification so i'm thinking should we get into that yeah let's try to do that so i'm gonna open android studio hopefully my pc will not catch fire come on android studio where are you android studio you are requested please come here [Music] it just doesn't want to open so let me force quit it doesn't want even to first quit why don't you start one in web and one in emulator uh because on web it does not work i could start it on ios i could start in on ios but with let's try to start it on ios most probably it will not work because let's see because android studio just doesn't want to open for some reason add this application to play store seriously please add it uh like this application is ready to be added to play store like it has everything but maybe we can add it for educational purposes because i don't see any other reason to add it to play store as it is please make a video on ubereats clone using firebase and javascript all right we'll see i cannot promise that but i'm gonna do uber it's with firebase uh but we are working on over it so it's gonna come somewhere in future but we are already preparing it because it's gonna be mind blowing that would be even more difficult to test on iphone since it's hell getting up on the apple app store hmm the only thing is yeah like the easiest way and the fastest way to test it right now and to show you with two different devices that it works is to actually build it from android studio but my android studio doesn't want to open or where to connect from another computer another application the same api key and then from there to send messages that might work let me try um um but i'm playing here like if the live stream just drops just know i'm trying to run android studio on every machine that they have around me right now um what did they wanted to do so i'm just trying to run the same application on my another machine on a windows machine and maybe this way it will work so um oh come on um save come on come on come on android studio and indexing okay i'm waiting for things to install on everywhere [Music] uh publishing application to app store uh that's something that we are definitely gonna get into that like i have a very long list of basic things that you would need for every application and i want to create individual videos for that we started with authentication screens if you didn't see check them out on the channel and then we're gonna slowly get uh to building application deploying publishing updating and all of this thing like we're gonna cover everything but yeah like only uh bottleneck is the time so yeah i really am very very low on time uh with working on the course which is gonna be ready by the end of this year and by the way if you didn't see also in the description you can find the waiting list for the course right now the enrollments are closed and we are testing it with the early birds with people who bought it during the pre-sale campaign and yeah most of my time is going there nowadays oh my god just add it as a snack on expo for testing that wouldn't work we already have some native code here on expo and with this native code we already don't have usual export development tools and we are actually no wait a second i started saying that because we added a native code which is coming from the firebase for our push notifications uh i think that we are not able to run it with expogo application on my device but that's actually not true um first of all let me try to do it with two devices here and then i'm going to continue my footwear oh messenger would like to send you push notifications allow allow oh it works on uh this device as well and if i open it here will it work here as well ios ios sign in and here we have vadim and vandy sign up okay it it's looking good it's looking good let's go to the user to the ios and start the chat you saw automatically open up hello boom we sent it there now let's put in the background on android let's go to our chat here on ios and say hi send boom we have a notification a push notification about the new message ios which is the name of this user it has also the user id maybe we can adjust the title here we'll see and down below we see the message hi so how are you doing oh come on send automatically right away how are you doing message and if i press it should open the application i'm not sure why it doesn't but it should how are you doing boom it's here and it works even if you close completely your application not just in the background um wake up send come on send and the notification is there hello awesome everything is working perfectly guys uh on ios it's not set up yet because it needs some extra steps and you would need to uh have a developer account and publish it there so i'm not going to cover this use case here because this tutorial is mostly how you can integrate a stream with push notifications with firebase and this is what we have done here if you are interested in a specific video regarding notifications how to integrate firebase notification in any application let me know down below and we might get into that soon all right so uh yeah it works finally everything with notification works what else can we do here all right let's open it here no we do not receive it here yet all right so um interacting with push notifications let's have a look at this step when a user interacts with your notification by pressing on it the default behavior is to open the application this notification we are only displaced only only on the application is in the background by the way yeah that's also true uh the application should be in background or closed for the notification to work because if your application is on foreground and you send some messages you will not receive any push notification it makes sense because you don't have to receive you need to receive only when the notification is in background now you do receive okay so uh the application will always open yeah for in our case i don't know why it's not opening but okay on android you can set click action open activity one in firebase notification template click action open activity one you can set in firebase notification template maybe that's the reason um so click action on android you can set this one notification template let's go in our stream dashboard chat overview let's scroll down until we see firebase and here for the template uh click action yeah it's open activity one why are not working come on open activity one yeah here we can also the channel name because but yeah like it depends but in our case it didn't look very well so we can for the title we can keep only the sender.name so if we save and we send a notification now it's not going to have those numbers it's just going to have the who send it and the message itself message dot text sound default all right okay to test the next things like in many cases cases it is useful to detect whether the application was open by pressing on a notification so you could open a specific screen for example yeah this is what i want to do if i press um on a notification from a user i want the application to open and automatically open the room the chat room with that user without me having to go there so there is this possibility but with this issue that the notification does not open the application by default this is a bit weird yeah like why you're not opening by default um push notification does not open up android personification does not open application yeah but it's something that we are struggling with i've added this at the end of a post but it probably should be here i found the problem the click action parameter was causing the problem my api provider set url address as value of his parameter to help himself on the website and that was it big thanks probably the click action should have a different parameter here click action open activity one open activity one android maybe it's not activity one android source main java main activity main activity click action let's see what value click action expects firebase click action in the documentation if it's better if we find it fireblaze firebase cloud protocol where is it title yeah click action optional string the action associated with a user click on the notification corresponds to category in the apn payload if i just delete because it's optional if i just delete it from here let's try x save will you work receive notification press on it yes now it works i think it's just the name uh open activity1 but the actions are shaded with a user click on verification yeah but what should it be open action click action come on no information about it um i'm just gonna try with main activity but most probably it's not gonna work where is it firebase template click action and here open main activity the thing is that i don't need to set it because without it it works yeah let's just remove it because it works without it uh let's save and let's double check to make sure that it actually works okay send boom and i open the application but when i press on that notification i want to open the application directly in this chat to see the message that i just received so to do that it's possible and we are gonna close everything that we don't need and go here so in many cases it is useful to detect whether the application was open by pressing on a notification okay verac native firebase provides two apis for handling interaction get initial notification this is the method when the application is open from uh after it being the first time it opens basically not coming from the background but when you close it all together and you receive a notification you're gonna receive this in the get initial notification uh however when you receive a notification you press on it but the application is in background you will receive on notification opened up you can access the notification data in both of this function make sure you have set the correct notification template in the dashboard please check push templates docs for more details on the template to handle both scenarios the code can be executed during setup for example using rack navigation we can set an initial route when the app is open from a quiz state and push to a new screen when the app is in the background state uh okay what application all notification open okay that's what i'm gonna try to do and get initial van yeah let's uh let's start with your messaging on notification open remote message all right so in our app.tsx i'm going to close everything up.tsx register device should we mess it we can do it in very quest permission because vcu's effect is related to our notification permission and so on so let's do it here what will we have messaging on notification open messaging dot on notification opened and here is gonna be the the remote message remote message so first of all yeah let's just simply console.log uh similar to what they do notification codes have to open from background state and the remote message but we are console logging so here we will probably receive this event so let's go to ios ios sign up and to our chat our application is it in background no it's not in background so first of all let's open the application on our android and move it to background i'm gonna also sign up here it's not required but let's do it uh okay it should be different should be i sign up to a different account hello unplugged welcome here thank you very much for your support sign up and now if i put the application in background to be here if i send here a message uh let's open it here and we see this notification caused application to open from background state and the object of our remote message which contain the data from message id notification body title and so on channel yeah this is the channel okay and uh what else uh we are getting here the channel and the message probably we will only need the channel so let's remotemessagedata.com id okay so let's try to take the channel not this one but this one channel remote message object is possibly undefined uh or undefined here i'm gonna say all right so with this channel this message belongs to the channel with this id okay and the second one is the messaging get initial notification which is going to be called when our application is going to be in background so this is the first one i'm going to add here comment for background notifications and the second one is going to be for notification in when up is in quit state so messaging get initial notification the same function a remote message so yeah probably will have the same logic but yeah let's keep it like this notification cause up to open from quit uh quiet state quite quit what uh channel let's do the same as we did here for the channel the message we don't actually need it now let's uh check it one again once again let's scroll down and let's completely quit the application this time let's close it completely it's not here perfect so ios let's go here wake up send and this will send this notification here if i press i should see notification code caused up to open from quit state and we have the same data for the notification all right all right so this message belongs to the channel with id i with this id now we need to navigate to that channel but the thing is that navigation is not defined here yet in our app function we don't have navigation our navigation is where is in the navigation index it's here what's happening here i'm gonna have to close and open again my vs code no better yeah so our navigation is here uh how do we do that um give me just one second and i'm gonna be back so i'm coming back we continue with our navigation to open specific pages on our in our application yeah [Music] all right so um what's the idea in the application.tsx we do not have our navigation should we just add what um like as like a splash screen or something like that or should we do it in the bottom tab navigator or simply in web in the top one screen because that's where we end up the first time in the tab one screen basically here so username this is where we always end up so let's move the logic this logic [Music] uh in our screens where is it users screen or channel screen no channel list screen this is this the screen on the right so yeah let's copy these two these things these two methods oh my god it's so much here yeah let's copy these two methods on notification open up and get initial notification from here and just leave request permissions and let's go to the channel list uh here and we are going to add they use effect here on top use effect empty this one let's also import the use effect from react use effect and let's paste in our functions save we need to import messaging in this compo in this component from mass jing from uh react native firebase messaging and use effect and we will need navigation but navigation we already have so let's copy this but yeah let's go uh down below here and whenever we get the channel of the notification we can do navigation navigation navigate navigate to a channel and the channel will be this one let's copy this one from here and add it here as well okay let's i think we need to run it again because yes it could cannot let's do run on droid hello hey my name will really appreciate another part of uber clone up to make it complete what what specific features would you like to see there i'm gonna try to think how we can take this feature that you are interested and ever include them in different builds in another builds were to create individual videos that will cover those specific features why are we using stream and not aws apart from the fact that the stream is today's sponsor uh well it's a lot of differences between stream and aws so i'm gonna compare the two use cases that we have done very recently on this channel it's this application that we're doing today and it's the signal clone application that we finished uh two weeks ago so the signal application was done in a traditional way with aws with amplify everything was customly built we have designed the database we are managing all the infrastructure all the logic behind it we have implemented also all the features and so on it took us six videos to implement some of the most like some of the basic features for that real-time chat application and from some of the most advanced features in that application are what uh yes we implemented uh real-time messaging we implemented the image audio uh messages we implemented sending emojis and so on but it's still very far from the amount of features that this application that you see right now on the screen has and everything here was done in a three hours live stream and it has way more features when we implemented ourself in signal so here like there are two choices like to go and implement everything yourself and reinvent the wheel and build it on either aws or firebase or a custom server with mern or to use the solution the solution from stream which provides all of these features already built out of the box and will save you i would say probably more than half a year of building all these features in a production ready and scalable way so yeah like the choice is yours also in this equation you get the price uh with if you build customly with aws your price might be less uh initially than stream than the price of stream but here is what you have to balance like are you willing to spend half half of half a year to implement the chatting features in your application or is it better to spend a little bit more time more money up front for stream sdk or even to get it for free if you are eligible because there is a maker account so these are the things that you have to to um to weigh and to balance and to think like what's best for your solution because none of this solution is best in general for any use cases it's best for a specific use case and like simply to simplify your decision process i would say that if you are building specifically chatting a chat messaging application like you're you're competing with whatsapp and with telegram like you are building a chat application then most probably you will have to do it yourself uh because my you might it might be um better if you think in terms of in future for example if you grow this application to millions of users it might be better if you do it yourself however if your messaging is a part of your application and i'm gonna take some inspiration from the application that already uses stream so if i go to chat messaging for example blablacar does not offer messaging application it offers ride sharing application but we have messaging there so in that case it makes very much a lot of sense to focus on providing in-house good services for ride sharing features and to outsource and to leverage stream sdk to provide a chat feature in your application same with taskrabbit it's not a chat messaging application it's a application i don't know specifically what taskrabbit is but they have messaging there so they are instead of spending time to implement all this feature they're better uh using something like stream so yeah that's a simple way how i would look at it uh your english is perfect great job thank you very much it's still far from perfect especially when i'm uh editing videos i'm always like why do you pronounce install install what but yeah okay all right so we're going to continue our discussion in a moment when we are going to have q a um i see a lot of questions there but now let's let's check the navigation because that's where what we are we stopped at so on our android device i'm gonna close the application here i'm gonna send a message hello send i'm gonna open here our notification i'm going to press on it and define is not an object channel state membership that's interesting because here with navigation channel usually we are expecting an actual channel as you can see here on channel pressed but in this case we only have an id of a channel so we should somehow find the channel by id and then send it there right channel id uh okay let's go for some documentation i want to get a channel by id so it shouldn't be that complicated let's go to the client channels creating a channel watching a channel updating querying channels okay query channel filter but i want to get it by id filter command filters messaging and team support channel queriable build oh the idea of a channel okay let's do it like this i don't know where but somewhere here so channel channel notification not notification something like this is going to be that one but our channel itself is going to be do we have a client here do we have a client here we don't have a client here but do we have a client in the channel page probably yes so i'm thinking i will send here just channel id console.log channel id dot id same thing here channel id and i'm gonna go in our screens channel screen and here yeah we have here the channel but we also look i'm gonna better destructure it here channel and channel id channel id from params or from an empty object because params can be null in that case might crash and so on so if uh channel is not provided we need to find a channel using this id to do that we need an access to our client where is our const client equal use channel client yeah channel [Music] oh channel context and we just destructure a client so uh const channels equal a weight client let's try to find two to find a channel a channel using chat client query channels query query channels does not exist use channel context what exists there oh come on uh screens in what screen sign up you sign up use chat context and client use chat coin text from stream chat api expo use oh use chat chat context and it should be imported from not from here but from stream chat expo no wait a second yeah it's from here client all of this thing should happen in a use effect so i use effect here um let's define const fetch channel equal a sync and here let's do fetch channel uh but when should this use effect uh happen whenever the channel id changes here so if channel id changes we need to check this so channels await query and the filter is going to be filter filter filter members no id id equal [Music] equal to the channel id will it work like this you know what i'm gonna simply i'm not gonna use channel here i'm always gonna send the channel id because this is actually better in navigation to send only ids not a whole object so let's remove it from here and now our channel is going to be capped in state in chan channel set channel equal use state you state null let's take it from react here and first of all let's console log channels channels i want to see what channels uh it finds we when querying this channel id params okay and now uh going back to our channel list screen whenever i have this on channel pressed i'm not gonna send the whole channel i'm gonna send channel id to channel dot id so if i log in here let's open here objects are not valid as a react child found object with keys if meant to render where is that i'm not export default um where is it is it in our navigation index no i don't think so we didn't do anything in navigation is it an app so okay it's not in our application because we see this one sign up okay everything is okay so let's test if i press on a chat channel uh i should see something an erection found object with if meant to render a collection of children use an array instead a channel screen created by scene view channel screen what did you find there if channel display text but we are not setting it anywhere um use a fact what's happening here sign up and if i press on something objects return console channel i'm trying to think if it's something for from here like if it reaches here at least yeah let's just do it like this and i'm gonna get back if i see that it's not this issue so let's sign up press on it's still there so um what channel not found channel screen what's happening there can you answer if channel return text 100 likes let's go back to stream um you use chat context what's the issue okay no it's something we've with navigating here navigation navigate channel id we're navigating to the channel page channel screen channel id channel id all right what might be the problem uh but yeah the issue is saying that it's it's in there chat provider film pro navigation channel screen that's how uh it's to live or go live with react objects are not valid found object object object if you meant to render a collection channel screen use state this is the simplest component right now it just returns a text let's see if it will also given us an error by d so here by them and here buddy objects are not valid do you think is because of the import not from expo no it's not from that one navigation index what's happening here tab one tab one screen channel component channel screen if i simply replace with not found here will you work this screen does not exist okay channel screen screens channel screen channel screen it's because it's a sync oh god yes that happens that happens guys so don't worry just remove a sink from here drink some water and try not to throw the pc okay it's good i'm pretty sure that yeah now it's gonna work so let's uncomment this one uh fast channel channel id meds just answering your component is a thing wait a second yeah people thank you very much view meds and everyone else who wrote that my component is a sync okay um [Music] where i was with this channel idea right it's on the channel list screen here i'm still sending channel channel id okay all right i just want to console my channels and see them here all right let's do that here oh come on uh why don't you use typescript to prevent that i actually use it but because it's it's a live stream i don't manage to fully um use typescript as i use it in my like projects when i work so even if it has a red error i am trying not to waste a lot of time to to fix it so that's why and that's a good idea i like to to use it all right so if i press on this one channel not found array zero um but why console log channel id it didn't find any channels it's this one so let's have a look in the dashboard if there are any channels with this id dashboard selecting application chat overview no chat explorer and channels yeah it's this one uh okay maybe i wrote it so filter status last message at member count created that team last updated that channel queryable built-in field the following channel fields can be used to filter your query here is lowercase here is uppercase querying option state watch limit offset maybe id equal channel id and yeah now it works very weird very weird that that's actually one of the feedback that i'll give to the team because i complemented their documentation like publicly and to them personally to the development team but the documentation is very very well built but we think that the names are in capital and if i use them in capital they are not working that's a bit weird so okay now uh let's check if channels dot length is more than zero then we found a channel so we can set it in state set channel channels at zero save and yes now it works channel says 0. all right will does that mean that our yeah let's check ios okay i can add or here i can say loading or just add an activity indicator or something like that all right so does that mean that it will automatically open that page because right now we are come on we're not even there oh one team so if i go here and write hello let's try to open the notification hello and it automatically opens this the chatroom very nice very nice so even if we are in a different chatroom here and i put it in background no not there here and i open it it should move to a new one boom automatically and it doesn't channel id so if i'm on a different channel and i send a message here it still loads this one console channel id if channels yeah but channel screen changes okay fetching channel okay let's go back fetching channel okay i am here i close the application i send a message i open the notifications fetching message members are you saying that let's debug let's debug console log um updating channel state else console log no chan channels found updating state perfect if i go here okay did it even start channel it yeah because it's one second let's go to another user here update channel state oh that's fun update channel state update channel state in our state the channel updates but here it doesn't um console log displaying channel channel id updating channel state displaying channel this one updating yeah in our state it works correctly but on the screen it's a bit different mmm channel channel channel i'm thinking that they we are not updating it whenever we send it basically we are not listening for where i'm doing something bad here if i send a different channel i don't know let's see the documentation for the channel watching channels it creates a channel if it doesn't no i'm gonna go to donks racknative components you're always selecting channel 0. yeah because i'm searching by id and i expect always to receive an array with one element like at least and at most because it should be only one it can be the case that there are they return an empty array so that's why i'm checking if it's more than zero i'm taking the one at zero and in my state it actually updates i think in their state uh it's not updating so if i check the channel the channel comment is the main android 2 let's see components takes an instance of a channel as a prop as you can create you can create a channel or you are navigating from channel list access the selection we have okay create and watch watch i need to somehow trigger a channel instance close suggested compress image copy message delete disable do doc upload requests nope do mark no enforce unique reactions uh flag message force there are a lot of parameters that you can adjust your channel with like blocking user copying what if um i need to to trigger a reset to this channel what if i initially set channel with null this will render this part this might trigger a render layer so if i go to this one i close the application i send a message yes yes it works yeah so basically when just sending a different channel the the channel behind the scenes is actually cached and it's not updated um yeah this is also something that i should note down to to give them uh feedback because as i understand we just have to um to update internally the channel whenever the prop channel is updated okay so what did we discovered here documentation there was them and okay all right so uh that means that our notifications are fully completed now they not only you receive notifications uh on your device but also whenever you press on that notification it will open uh our messaging application and it will open that specific screen from the chat room that you receive a notification this is a very uh good example of how you can improve engagement in your application and whenever you receive for example a comment if you press on that notification it's better if you open that post whenever you receive a message you click on that message you open right away the chat room so you can answer there all right okay so um yeah this was the main part of today's live stream and this is what i wanted to cover the push notifications so with that being said we can do git add git commit push notifications and all the code you can access in the link of the description okay um what else would you like guys us to to cover in today's video i am thinking about threads to cover threads so whenever you will for example you can open here a thread reply but it does not work so if you want that we can get started with threads oh that was that was intense i would say that but with like native notification push notification it's always like that so if you are struggling and if you have issues with this just remember like everyone is having is struggling everyone is having these issues something is not working like we need to debug and so on so don't have the impression that um everyone on youtube that you are watching tutorials if they're doing everything from the first try it doesn't mean that they are actually doing it from the first try they are preparing a lot they are post editing editing it uh the video and yeah that's why a lot of you prefer the live streams to see uh how we go about when we encounter some errors how we debug how we try to solve it so here you go okay uh so let's have a look at the threads and with that being said i think our chat application is going to be complete so hello stream chat i think let's see where is the thread here so there is one more high-level component that stream chart for react native provides out of a box and that is the thread uh stream chat support threaded messages and the message list supplies a ui for threads out of a box but as a fraud on a mobile messaging app generally exists in a separate screen it is up to you to handle thread selection and subsequent navigation in your implementation thread has no required props as it relies heavily on the context to function the simpler simple code snippet can be extended to include thread and keep track of a thread state similar to channel by utilizing on thread select prop on the message list the code snippet now has a fully functional channel list and message list and thread list although currently it provides no way to back out of pseudonavigation for additional information on thread component check the thread so it has a channel infrared okay so the message list on thread select friend reply so if i select here fred i should be redirected to this specific thread you want to do it with a different navigation screen can you learn react and react native without knowing html css and javascript basics i'm doing a career switch and i'm curious so simply said just basics you need nonetheless like this is a this is a must without it you're gonna have um a lot of problems and that's gonna lead uh to anxiety and you're gonna give up so start with javascript basics but if you want to get into react.js um i would suggest for you to start with html and css then to get in javascript basics and once you know html css javascript basics from here you can either go to react.js or to react native so here you go okay you need a client that is an instance of us um our thread should be in the channel our friend should be in the channel let's do it like this so in our screens channel screen let's have a state or let's keep a state variable for our selected thread set thread use state i think it's message type versing or null initially it's going to be null okay now for the message list here we can provide on thread select and this is the function that is going to be called whenever we press on this one thread reply so if i do it like this on thread select i can do set fred said fred oh my god set fred and then let's inside the channel here let's check if we have a friend then let's render the thread otherwise i'm going to do it like this otherwise i'm gonna render the message list and the message input like this so let me open the application again uh and here let's press on the thread and i see i see that fred right yes this is the thread but now if i go back it just goes back there okay we need a way to get back from that fred reply thread reply and this will yeah this will open the friend now i'm thinking it's most probably better if we add the thread as a separate um as a separate screen as a separate stack screen the only thing that we're going to need to do is to send the channel id layer and similarly do everything so it's going to be very similar to our channel screen but it's going to render only the thread so channel screen let's copy and duplicate this file and i'm going to call the copy thread screen let's open thread screen and rename it thread screen now um i'm gonna delete the message list i'm gonna leave only the thread and actually i'm gonna delete everything like this and display it like um similarly fred said fred hmm um that's that's a bit weird how will it work all right i'm thinking how will it know which thread is opened but probably it keeps track of the last open thread uh of a channel based on the thread that you click and after that it displays it like this yeah probably it's like that so i'm gonna delete because log so the thread screen again it will receive we don't need to keep the threading state but it will similarly receive a channel id because we need to fetch it i'm gonna delete everything else yeah it's very very similar to to our message list but back in our channel screen here i want to remove the thread and leave only our message list and message input the same with a thread from here and with this callback function now let's go in our navigation where we have a channel screen let's duplicate to thread screen thread screen and back uh down below in our route navigator where we have a channel i'm gonna also do thread thread thread screen brad screen okay thread screen now back in our channel screen the message list on um thread selected i will do navigation navigation dot we don't have here navigation right uh yeah for that reason i'm gonna take it navigation use navigation from the rack native core and here navigation navigate to our thread it doesn't show auto complete and also it shows here with red just because in our types.jsx for our root stack param list we do not have here fred thread okay and channel screen navigate to fred and i'm gonna pass here channel id with channel but we have it as channel id so we can keep it like this let's see if it will work let's go here if you press on one thread it doesn't do anything loading um on fred select let's go here fred i'm thinking that here i will have to send the whole channel might be the case that we keep it here so channel i don't need this use effect let's just try it like this just sending the channel so now if i press thread nope nope fred screen channel channel um what might be the issue let me just try to display some the message input here just to see if something works on that page yes it works the message input but the thread doesn't [Music] on thread dismount thread component docs let's check the documentation for this specific thread component to render friends replies for a message along with an input box for adding new thread replies this component internally uses message list and message input component okay oh you can send the thread to the channel here all right that's what i was interested on on how the channel knows which thread to display here so um besides the channel message id i'm gonna need also the message let's let's go back to the case where we were receiving not channel but channel id and then finding the channel that's i think better because we are sending only an id to the navigation and here message id and i can take this message id and send it fred message id so channel screen channel id equal channel id and here we should receive the thread fred let's send it as message id fred dot not sure but let's try okay not working um just id no message id instance of stream client close thread and set the thread and thread messages in the channel disable when through vendor link input box will be disabled on thread this mount function which will get called one frame component and mouse reload thread a message object that uh when set indicates a thread is open when used with thread component this will display the thread when used with standard message list component this will prevent any singleton components maybe it should be the whole not just the where is it not just the messenger but the whole fred you know or just let's call it fred so fred yes it works so here in this thread um we can chat in a separate yeah like and we can also say uh to fred and also to the whole channel this feature is very similar to slack and also discord right now introduce threads and it's a way to keep yeah for example this message to fred and also to the whole channel was sent here and also if we press on the thread it was sent here and boom this way we have implemented threads and if i go to the different one we can keep our conversation categorized and we see like how many fred replies we have there and so on when loving it when will you be getting verified on youtube i don't know i don't know i don't know what's um i didn't even research about that when does that happen usually notification on icons please one on the top right corner what do you mean the one at the top right corner now if all right so yeah like uh threads are done notifications are done and um yeah that's mostly everything that i wanted to show you let me do git add git cam meet um threads and get push origin main awesome there is also possibility to add internationalization if you want to provide your application in different languages and these yeah if you deploy your application to users who speak another language you'll need to internationalize internationalize sdk components are available in multiple languages out of a box and want to support the following languages and more will be added in future english french hindi italian dutch the stream provides static translation for react native components from the stream chat sdk stream chat stream okay okay streamy 18n will default to english if you choose to use the default english settings with dhs you do not need to deal directly with an instance of this is taken care if you choose to change the language translation over date handling you will need to provide your modified instance to the component setting language okay so let's try to have our application in a different language and see how that works so in our app.esx let's open okay let's copy this one and this stream 18 should come from stream chat expo i guess so now we also need to send it to our to both overlay and the chat right to overlay i instance and to that chat as well save and let's try to open our application yes actually it works for example here i will not try to pronounce it but i see that it is in a dutch so if i change it to yes uh you can't use the channel after okay let's try to reload does not exist local for yes there is no spanish okay but there are these available languages you can also add your own language like this for example copy message and so on so if i do it in hindi yeah it works i cannot read it but i see that it definitely works or you can also use the device locale to set the language so using the react native localize you can get the user device language and then you can set it uh to the streaming but you should make sure to let it exist there first okay this is internet internationalization that's really nice that they support it and yeah it makes sense because if you want to launch your startup or your application in different countries you definitely need internationalization okay regarding filming we have covered it in the previous video a bit so it also supports dark mode which is very nice especially for us developers if you'd like to support dark mode in your application you can create a and apply different themes depending on the uh current color scheme provided by react nate to prevent unnecessary deep merges and re-renders we suggest keeping the current theme in state and only change it when theme color scheme changes get them all right so um we are already almost three hours in and i think that we ha we have covered a lot in this video let me know down below what else are you interested me to integrate implement in this messaging application maybe i can show you in a separate video or we can do it in on our not just the dev blog we'll see but yeah that was a really fun build this application is almost ready to be deployed uh i mean yeah you just need to build it ship it and then yeah also the authentication here for us it's not fully complete because we have implemented a very simple authentication just in order to give you the ability to sign up and chat here with me so um yeah questions and answers guys do you have any questions regarding this build or we can start our weekend uh the one on the top right the icon notification of the simulator i think that number uh is displayed by default from the system like android system will take care of that number to show you how many new notifications you have okay okay [Music] so if there are no questions guys thank you very much for watching this video till the end i hope you enjoy it and thank you very much stream for for sponsoring this video and for making uh this api and sdk that makes it a lot easier for us developers to implement a real-time chat messaging application um yeah what else subscribe to the channel turn on the notification bell because we have a lot of plans for the near future if you might saw like only this week we have published three videos and that's what we're gonna try to keep up in future to have at least two videos per week every week so you don't want to miss that out and that's why you need to subscribe down below also let me know down in the comments what other builds and whatever tutorials would you like to see on this channel and i'm definitely gonna uh take them into consideration i have a huge list of bills that people are asking and usually before starting them i ask uh in the community to vote and which one yeah basically democracy you are voting you are suggesting and i'm building and i'm teaching you and with that being said yeah let's run the outro and um yeah see you next week check out the video that is coming on on tuesday and next friday at the same time 3 pm gmt we are going live so check out also this video this video this video this video subscribe here everywhere okay guys

Channel: notJust․dev

Views: 7,835

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, whatsapp clone, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app, sonny sangha, react native push notifications, push notifications, firebase push notifications, android push notifications, ios push notifications, firebase cloud messaging, firebase react native

Id: EWTF9i0e9jU

Length: 166min 38sec (9998 seconds)

Published: Fri Oct 29 2021