Build A Realtime Chat App In React Native and Socket.io | Socket.io Tutorial

okay everyone and welcome back to a new video so in this particular video we are going to create this chat application using react native and socket so let's see what exactly we are going to build so as you can see that this is our home screen and here we will be having this welcome button on click of this uh this will basically navigate to this particular view now here let's say if you are coming for the first time so you have to register so let's I'll give some name here some dummy name rows and if I click here login so you can see that please register first and if you are already registered so for this one you don't have to register again you just have to login another very important point is that we are not going to use any back end or any database to store the user information currently we will be doing or managing every state from client side using context API so we actually tried to keep everything very simple so that it will be very easy to understand so now let's say if I give my name here and I will try to login so you can see that I'll be already logged in and these all are the groups that are already created now let's say I want to create a new group so I'll give here for example view JS and if I click here add so this will be automatically added now if I now go back so this is our message screen and I'll type here hi sangam this side so if I now send this so you can see that we'll be getting this message here if I now go back and this is the last message that we are having now on click of this logout we'll go back to the home page now let's say if I now uh give some different name let's say ronak if I now registered and go back you can see that this is the last message that we are having and if I click here I'll give here hello this is when you send this you can see that this is the message that current user message will be showing on the right side if you now go back log out again now type here sangam and login again and you can see that if I click here so this is the last message this is the message from ronak and if I give here how are you and if I send here so this is the latest message from my side now let's log out and then if I type some different user for example John and if I log in so you can see that you are getting please register first so I'll give here John and then register go back and you can see that he will be getting all the messages on the left side because this is from sangam this is from Roanoke and this is from sangam again so I'll give here hi John this side and if I send this one so you'll be getting the message here and let's test once again so if I go here give ronak login go here and you can see that this is the last message and then after that we are having two more messages so this is actually real time so this is what we are going to build and for this one we'll be using react native socket IO to create the server uh site code and also socket our client to implement the same in the client side and also will be using context API to manage any kind of state now another thing is that if you're coming to my channel for the first time please give a like and please subscribe to my channel I'm targeting my first 1000 subscriber and also my like Target for this particular video is 100 and thank you all for your support so without further wasting any more time let's get started and good luck all right everyone so let's get started so you can see that I created empty folder here so here I am going to create two more folder so one will be for back end and another one here what I'm going to do we need to create the react native project so here I already open the official Doc and let's go to our guides and here we'll go to this environment setup and we are basically going to use Expo so to create react native project what you need to do you have to use this npx create Expo app and then the name of the app that we want to keep so just copy this and we'll go back and here I'll just open another terminal and here we are going to create and we'll give this one name as let's say front end now this will basically install the react native project that we need and another thing is that to run this particular project we are going to use this emulator uh sorry let me just show you this is the emulator that I have already opened so for this one I am using Android studio and if you don't have any idea I already created some videos in my channel so there I mentioned in details that how you can run a react native project uh in your local machine using this virtual emulator so you can check that uh particular video so what I'm going to once this will install all the packages we are going to basically do npx Expo start and then what we are going to do we will be basically opening that particular project in this uh emulator now let's go to our backend folder and here the first thing I'll open this backend folder in another terminal and here we will first do npm init now here it will basically ask some of the queries and then what we are going to do we will be basically uh installing all the packages that we need from our backend site so we'll keep it like this entry point index.js this is fine and git repository will keep it empty keyword author I'll give my name here you can give your name and this is fine so we'll type yes and this will create a package.js and here now here we need to basically install all the dependencies that we need so the first thing we need we need course we also have to install Express we need node Mon and also we need socket IO because the same we are going to use in this particular project so what we will do will do npm install first we'll do chords then we need Express also we need node Mon and we have to also install socket dot IO now this will basically install all the packages now once this is done before that we need to basically do another thing you can see that this is already completed so go to our package.json and here we will add another script that is the start script because we are using node mon so what we can do here we'll use node mod and then the entry point will be index.j so I'll keep it like this so this will be index.js so here what we have to do we'll create another file and we'll give the same name which is index dot JS all right now here let's quickly uh create the basic setup so the first thing what we have to do we have to basically record some of the packages that we installed so we'll start with Express and this will be recover Express then we have to do const app and you have to trigger this Express also you need HTTP so for this one we are going to do recover HTTP module and then we are going to use this sorry we have to do this on outside dot server and then you will pass this app next we also have to get chords so we'll do require chords here and after that we need to basically uh Define a port now for this port we are going to use port 4000 so we'll keep this one in a variable so that it will be basically easy to use now next we also need the socket IO but for now we'll uh don't do anything related to socket because once we'll start working on the front end part then we'll be adding those um code one by one now here what we'll do we'll take this app and we have to do certain things so the first thing is that we have to use this Express dot URL encoded and here we'll keep the extended as true then what we need to do we have to also sorry we have to do app dot use and this will be Express dot Json and also you have to use the chords so here we'll just use this course and we will trigger this one that's it and now what we need to do we have to basically listen to this particular port and for this one what we are going to do we'll do app dot gate and here let's use this particular endpoints will give API and this endpoint and this gate will take a callback method and here we have to pass the request and response object now here we whenever we'll be basically uh creating the code related to socket IO let's we'll be creating all the chat rooms and those things so that chat rooms we have to pass as a response but for now we'll just log something here so let's log this request and response we'll do those things later now this is done now what we need to do we have to listen to this particular Port So based for that we are using this HTTP so this will be HTTP Dot listen and here we have to pass this port that we have created so this is the port and this will also take a callback method and here let's log console.log and we'll let's give this one as server is listening on this particular Port so we'll take template literals here and we'll pass this port here that's it if I now save this and now let's open I think we already opened this one here so you can see that in our package.json we have this start script so if I now do npm start let's see what is happening so you can see that now server is listening to Port 4000 so that means the back end is up and running so that's all about the basic backend structure we need now let's do one thing in the next part we need to install all the packages for this front-end side or basically the app side and then we have to create the basic structure so that we are going to do in the next part all right everyone so now let's uh do one thing let's install all the app related packages that we need so I'll open another terminal and here uh let's install all the packages so the first we will start with react navigation because we have to navigate from one screen to another screen so for this one we are going to use this react navigation slash native this package we also have to use the native stack package so for this one we have to do react navigation slash native stack we also have to install this react native safe area context we've also installed react native screens and also you have to install the socket or your client package because that we have installed that is for the back end one so or basically the server side package and this one will be socket dot IO and then you have to use this client sorry this will be client and I think that's it so if I hit enter so this should install all the packages in the front-end side now let's do one thing once this is done let's wait for something all right now let's go to our package.json and let's see if everything looks fine all right so we are having all the packages now what we are going to do we have to start this particular project so for this one we have to use npx Expo start now this will start this particular package and sorry this particular app and now here I'll show you one uh very important point is that you will get so many options so you see that here if you play say it will open uh in Android now because we already using this Android stimulator or basically the simulator here so for this one you have to type a if you are using like if you want to use in web you have to press W let's say you are opening in your mobile device so for this one what you need to do you have to install this Expo Go app and then based on that you have to scan this particular QR code and it will open in your mobile device so here I'll type A and you will see that it will automatically detect this pixel 3 at this particular device here and this will open the project here so let's see so it is the the node modules are basically built building so I'll just minimize and I'll keep it here like this let me do like this okay I think this is fine so let's wait for something once this is done we'll be able to see our uh the final output here so let's go to our app.js and you'll see that we will be able to see this particular text in the screen all right so you can see that we are seeing the same thing here now let's say I want to change something so this will be like chat application foreign save this you can see that the changes are happening here all right so that's all about all the packages that we need now what we are going to do first thing is that we have to create all the screens and all the components right now when we discuss uh the demo you see that we are having mainly three screens so one will be for the home page then we have to go to the chat rooms page where we will be creating all the rooms and then individual room will be having a message page where user will be basically typing the message or they will interact with other users so mainly we need three screens so here I will create a folder and I'll give this one as screens we will also create another folder and this will be a components folder and also we need to create a context folder sorry not here we have to create this one out sorry inside this front end so we'll create a context because we are going to use context API for our state management that's it and also let's create a YouTube's folder sorry not here again you have to create it inside front end so this will be utils now here in our screens we will create uh three files so first one will give this one as homepage dot Js sorry this will be Js then we will create another like let's give this one a chat clean dot JS and also let's make this one as screen instead of page and we'll create another one and this will be our message screen dot Js alright so now let's quickly create all this component let me just close this so this will be export default function this will be our home page and for now we'll just return something here so let's return view from react native and inside this we are going to return text and we'll give this one as home page now let's copy this will go here we'll paste it this will be our message screen I think I've given wrong again I think this should be screen not page and this will be sorry this will be message screen now let's copy this and this will be our chat screen and also make this one as screen awesome so now we have created our main three screens so now we need to basically implement the navigation so for this one we have to implement the navigation in this app.js so that we are going to do in the next part let's implement the navigation so we have already created all the screens so the first thing is that we have to import all of this and then we have already installed the react navigation package the same we are going to use here so the first thing is that let's import all the screen shares so the first one will be our home screen and then we have to import the chat screen and also you have to import the message screen that's it also you have to import all the navigation related components so the first thing is that in react navigation you have to import the main container wrapper which basically in react router Dom is also known as the browser router so that is actually similar so in react navigation sorry in react native navigation that basically called navigation container so that means whenever you will wrap your component or your screens inside of the navigation container you will be able to access all the properties related to react native navigation so the first thing is that you have to import navigation container from react navigation slash native also because we are going to use the native stack package so you have to create all the stacks so for this one we are going to import this create native uh stack Navigator and this will be from native stack that's it now here the first thing is that what we need to do we have to create the stack so here I'll take a variable I'll give this one name as stack let we have to keep this as caps and here we have to use this create uh Native stack Navigator that's it now what we are going to do the first thing is that we have to wrap all our screen inside this navigation container so that means we'll take this navigation sorry navigation container and then we'll just cut it from here and then we'll paste it here now here what we need to do we have to use this stack and then you have to use this Navigator here and then inside this we have to create all the screens so that means you will create all the screens here that's it so first we'll start with so we'll take stack dot screen and then here the first thing is that you have to pass the name so the name for this one will keep this one as home page also you have to pass the component that which component you want to render here so we want to render home screen sorry let's give this one as screen also you can pass some additional option here so that will be discussing in a minute so let's copy this and we'll paste it two more times and for this one we'll give this one as chat screen and for this one we'll give this one as message screen and this will be message screen and this will be chat screen now that's it let's remove this part from here and I think now let's format this and let's save this and let's see what exactly we are getting here I think uh let me just reload this here sometimes you will get some error whenever you you will install any particular packages so that's I'm first what you can you can try reloading this application if that is also not working so what you can do just stop the server here and then again run npx export start so let's do that and here what I'm going to do let's go to the home page and I'll just close this and let's wait for some time and here now what I'll do I'll just open this one in Android so it will automatically detect the same and let's see what is happening now all right everyone so you can see that now we are getting home screen so and you can see that we are getting this header here now this header and also this is called the status bar now let's say you want to hide this particular header from this screen so as I already told you this will take some additional options that you can pass so here you will pass option and in this option will pass a call that is called header soon so that means whether you want to show the header or not and for this one you'll make this one as false and let's copy this and also you can also change the title and here we will make this one also false the final format and save this and you can see that we are not able to see that and also let's say we want to hide this state as well so for this one what we can do right uh but before that let's do another thing because we are going to implement the context in this particular application so let's quickly create a global uh state so in this context I'll create another file and I'll give this a name as index.js if you don't have any idea on context so context is basically used to manage any kind of global state so whenever you are having some nested components or screen and you want to pass data from one screen to another screen but you don't have direct connection so in that case this context can be very helpful so this basically consists of three step first you have to create the context then you have then you have to provide the context value or basically the states and then you have to consume the context using use context two so the first thing is that what we need to do we have to create the context so I'll give this one as let's say Global context and to create a context we have to use this create context from react and I'll give a in initial value of null now here we'll create const let's do like this we'll do function will give global state and now this will receive the children children is basically all the nested components or screen in this particular application and then we'll return This Global context and now these will give us a provider and then we are going to pass these children here and at the end what we need to do we have to do export default and we have to pass this Global state so this is now your Global State now to consume this what we need to do whatever screens that we have created we have to wrap this Global State means you have to wrap all the components inside This Global state so I'm going to import the same here so this will be Global State and then I am cut it from here and then I'll paste it here so now let's save this so obviously nothing will change but if we are getting some error because we haven't passed a value property so for now we'll pass a value property and pass empty object that's it all right so now this is fine now let's go to our app.js now you see we have to hide this status bar from here so to do this on what we are going to do we are going to import this status bar I think it's already there from Expo status bar now here we are going to pass this uh prop which is hidden and we'll make this one as true if I now save this and you'll see that we're not able to see the same here all right so that's all about this particular Also let's remove this text and view from here so that's all about the implementation of the navigation here so what we have done we have imported all the screens and then we created three stack screen using the screen component here and then you have to pass the name so this name can be helpful whenever we want to navigate from one screen to another screen we have to pass the component and if you want to pass some additional option you can pass it here so that's all for this this panel in the next part what I am going to do I will be start working on this home screen so for that you can see that we are having a asset folder here so here I'll just paste on image and the same image I'll also give in the GitHub repo so that you can download the same and you guys can use the same here so let's do that part in the next part all right everyone so let's start working on the home screen and also you can see that I just added this image here uh under this asset folder so the first thing is that let's remove this text from here and also we are going to use the style sheet so we'll create a styles variable and this will be equal to style sheet dot create and here we'll give this one as let's say main wrapper and will give Flex as one and for this one we are going to use style which will be equal to Styles dot main wrapper let's save this and now here inside of this the first thing is that because that will be image background so we will be using this image background component from react native and here we have to also import the images we'll import home image from we have to go to assets and then we have to use this home image here so here what we need to do we have to pass the source so for Source we will be passing this chat image sorry basically this home image and then also you have to pass some style here so let's do one thing uh we'll do one thing we'll create another uh variable here so let's give this one as image or we'll give this one as home image and inside this we will use with as hundred percent you will use flex as to and we'll use justify content as Center and here we'll use style which will be equal to Styles dot home image that's it and let's save this and let's see what we are getting so you can see that we are getting the image here that is fine so now what we are going to do we will create all the views here so you can remember in the design we are having here we will be having some text and there will be a button that is called get started on click of that button we have to basically switch to another view where there will be two button one is register and login and there will be a text input correct all right so for this one what we'll do we'll take a view now inside this particular view we'll take style so we'll create a Styles dot let's create this one as content and will create the same here and that we are going to create in a minute so inside this we have to basically check whether this is the get started I started screen or basically the login screen so we have to manage some kind of state so that on click of that we will be able to toggle to that particular view so what I'm going to do will go to our context so we have to start working on the context side by side so we'll create a state here so we'll give this one as so login View and this will be set so login view so that means if this is true we'll show the login uh screen here what else will show the get started message and we'll do this one as you state of false and here we are going to pass this so login View and set so login View now let's copy this from here save this and here we will do const we'll paste it here and this will be equal to use context of global context let's save this and here what I am going to do I'll check if the store login view if this is true this will show that though those particular register and login button with the text input or else will show the get started screen I hope this is clear now here what I am going to do so for now we'll just keep this one as view here and here we'll take another view and insert this what we are going to do we have to we will take another view and inside of this we will take a text and we'll give this one as enter your user name then after this we'll take a text input from react native and then we are going to pass some properties will make the auto correct as false we will do a placeholder we'll give this one as enter your username we will use some style so for style let's give this one as Styles Dot Login input and also we have to handle this particular text input so for this one we will take another state here so let's give this one as const current username set current username which will be going to use state of empty and then we'll pass it here and we'll paste it here let's format this and the same we will use here so just extracting those value from Context and here what we'll do we'll do on change text so here what we will get will get the value and we'll make this Set current user name as this particular value that means whatever user will be typing here that's it and also you have to pass a value property so for Value we'll pass this current username that's it now after this particular view we will take another view here so this is for the buttons and here we will do let's take a pressable property so this is another property that we can use or basically component sorry not property and inside this we will take one View and then we'll take a text and we'll make this one as register let's copy this we'll paste it here and we'll make this one as login that's it now here so this is all about the structure Now The Styling we will be doing in a minute so that means if the so login view is true so you are going to show this or else what we need to do so basically we have to show that uh get started the screen so for this one here we will take Style and what we can do we can give this one as let's say Styles dot we'll give this one as info block so this will be block and inside this we will take a text sorry we'll take a text and we'll give this text here connect blue and inspire let's copy this and we'll paste it here and for this one we'll do connect people around the world for free that's it and then we'll just copy this one from here because the same structure we are going to use and for this one we'll give this one as get started now you can obviously use a button component also but this is this pressable is also fine if you want to format this and now one thing what we need to do here so you can see that we are having this main content uh screen here so copy this and for this particular content uh screen we will first make the flex as one now let's save this and let's see what exactly we are getting and also we'll make this home images 3. okay now you can see that we are getting all here now what we need to do on click of this basically we have to navigate to that particular screen uh not screen that particular view so you have to show that register and login how we can do that so you can see that we are already having this set so login view so if I click on this get started button this will make that flag as true I hope this is clear so what we can do we'll do here on place so do on press and we'll make this set so login view as true now let's save this I'll see if I click here so you can see that we are going to the login screen correct all right so this is fine so now we need to start working on the uh styling part so the first thing is that what we can do uh we'll go to this content we have make this Flex as one will keep the Align items as center now obviously styling if you want you can also style uh whatever you like but for now I'm just keeping everything very simple so that it will be easy to understand then we'll give the justify content as Center will make the width as 100 percent what else and we'll give the background color as white save this all right so now this is fine all right so now next let's give some classes here and then based on those classes we are going to write The Styling so the first thing is that for this particular view we'll take a style and we'll make the this one as info block that we have already taken I think the same we are going to use here also then this is for the username and the uh the text input so for this one what we can do we can give a style as we'll make the Styles dot uh what we can give like login input container this is fine then next uh we are what else we are having we are having a text so for this one we'll take a style and it'll make this one Styles dot heading then we are having this text input so we'll take uh I think we are already having text input here that this is fine then we are having this uh particular View for the both button so we'll give this one stylus let's give this one Styles dot uh what else like button wrapper this is fine next uh we are having this placeable component so for this one we'll take style and we'll make this one Styles dot button that's it we'll copy this and we'll paste it here so this will be button text and the same we can use for this principle also so this will be button text that's it and let's use the same uh here also so we'll paste it here and we'll paste it here also and we'll make this one as button text so these all are the classes that we need so now let's start working on those particular uh classes one by one so the first thing is that we'll have info block so now let's check what info block is so envelope info block is basically this whole block so for this one what you can do will make the width as hundred percent and then we'll make the Align items as Center and also make the Justified contenders Center next we are having the heading so we are having heading so for heading will make the font sizes 28 will make the font weight as bold so this is basically the main heading that we are having then what else will make the color as sorry it will make the color as black and also we can give some merge in bottom as 10. so you have to give this one as number save this awesome so now also we are having some sub heading uh let me check so here we are having this one so we'll keep this on style as Styles dot heading and for this one we'll use a sub heading so this will be Styles dot let's give you some S Sub heading so copy this and we'll paste it here so for this one uh we will use a font size of 15 we will use this color so for this one uh we will use this color here ACAC AC and then we'll use a margin bottom of 15. let's save this this is fine now next I think we are having the input so what is the name so this is the name so we are having this login input so copy this paste it here so for login input uh what you can do you can do the Border radius as 50 then we'll use the border with as one and also we will do a padding of 8. let's save this awesome now next I think we are having the button so we'll take the button here and here what you can do you use this background color so we'll use this seven zero three e F's e this is the color then we are having a padding off we'll take this one as 15 we'll do margin vertical as 10 uh we will use the width as 34 percent to keep this one inside this and also do a elevation of one and also we will do a border radius of 50. now let's save this and let's see all right now this is breaking the reason is we are having a button wrapper so for button wrapper uh we have to do the flex direction as row let's save this and then we'll take a gap of like how much we take this one as 10. awesome so now this is fine now next uh we are having the button text so we'll take a button text here and we'll make the text align as a center and then we will do color as uh White and we'll do font weight as bold and also we'll do a font size of 15. let's save this let's see awesome so now this is fine so let's reload this particular page uh sorry screen once again and let's see what exactly we are getting the final result so this is fine I can see that we are getting get started now if I now click here it is going to this particular screen this is fine so now what we need to do we have to do quite a few things here now the first thing is that we are already having this current username so now let's say I'm a user and I'm coming here for the first time because currently we don't have any kind of database or anything so that we will be able to store the users currently will keep everything in uh very like simple way so here let's say I'm coming here for the first time and I'm typing my name so I'll be storing everything in the context so it will check if the that particular user is already exist in that array or not so that means we are everything managing from the client side we don't have any storage or anything for now and if the user is not exist so it will show some kind of alert that you haven't registered please registered and if the user is already registered that time if you try to register again so we will show that you are already registered please login so that function it we have to do so for this one we have to manage some kind of state here so that we are going to do in the next part so we have to take the following state so the first thing is that we have to check the current username and you have to check if that is exist or not and also you have to keep a track of all the users so that means we have to create a array here with all the users and based on that you have to do certain operation here so that we are going to do in the next part all right everyone so let's start working on that so I'll go to context and here I will create two more state so one will be the current user now don't confuse between the username and the current user so username is the one that will be typing and this current user we have to keep a track whenever we'll go from one screen to another screen and this will be set current user you'll get to know and we'll make this one as you state of empty and also we will be taking another one which will be all users and then this will be set all users which will be a array so this will be instead of array now here I'll pass all of this so this will be current user Set current user then we'll be viewing all users and then set all users now we will copy this and then we'll go to our home screen and we'll extract those from the context first now what we are going to do we will create a method here so which will basically handle the register and the login at once so we will create a function we'll give this one as let's handle register and sign in and here we'll be getting a flag so this will be is login so that we need to check it so here then we'll go to our this button and here we'll do sorry we'll do here on place and this will be handle register sign in so whenever we'll be doing register so that means login is false we'll pass this one as false now we'll copy this and we'll paste it here for login this will be true that's it now let's format these ones I'll go back here now here we need to do quite a few things so the first thing is that whenever user will be typing uh we are already setting that particular username here you can see that this is the current username so we have to basically check if the current user is current username is empty or not so check if the current username dot dream if this is not empty then only we are going to see the things and here else we'll do alert so that is a component that we are going to import dot alert and we'll show we'll show something like this username field is empty that's it so now uh let's do one thing let's check once if I now go here click on register see and click of login also we are getting this username field is empty and this is fine so now what we need to do the first thing is that if this is not empty so we have to check if this is the login we are doing or if this is a register this is very important so check here if this is login if this is true means this is in the login button or else this will be in the register so the first thing what we need to do if this is not empty first you have to check the current index index means whatever name I'll be typing here whether that name is already saved in this all user array or not so that means if the name is already exists means the user is already logged in previously so we'll do const index and this will be equal to all user dot find Index this will be let's make this one as user uh let's do this on a user item and we have to check if this user and item is equal to equal to this current username or not so that means if this is same that means the user is already registered so based on that you'll be able to see that now here inside this what we'll do whenever we'll do login now this is very important when I do login here so I'll check if this index is equal to -1 so that means the user is not exist so that means they have to register first so here I will do alert dot alert and here I'll give here please register first currently we are doing everything from client side whenever you will be doing you'll be saving this data in database and from database will be checking whether the user is exist or not so at the end the concept is exactly same if you know save this right now let's see what is happening if I go here and let's I'll give my name here and click on login see we are getting that please register first and also once I'll click any of this I want to close this particular uh this uh keyboard here so for this one what we can do right we can use this keyboard from react native and there is a method that is called dismiss so that we can use so now let's see so I'll go here type here let's click here see please register and this keyboard is now dismissed so that means when I log in I will check if the user is not exist means they have to register first else if the user is already exist so what I'm going to do I'll do Set current user which will be equal to current username that's it so I'm using the current username from this field value this is the current username I'm setting to the current user so that's all about the login else when it will be for the register so I have to check if the user is not exist I have to push that register user into this array or else I will be I have to show that you are already registered you have to login First so here what I'm going to do I'll check here if the index is equal to equal to -1 so that means the user is not present so I have to push that user into this particular array or else if the user is already registered so I will show this alert dot alert that you are already registered please login that's it and here what I'm going to do I'll do all users dot push and here I'll post the current username and then I will do set all users as all users and also I'll use the Set current user as current username that's it and now once all of this done I have to empty this particular field correct so for this one what I'm going to do so let's do it here correct so I'll do Set current username as empty and I think everything is done if I now format and save this now let's see what is happening so first I'll go here I'll do login you'll see we are getting please register first and I'll click ok so that means I I am not registered I have to register first if I go here and also let's do one thing let's log here all users final save this so you're getting empty here so I'll go here I'll type my name I'll do register we are getting sangam here so that means if I see if I give the same name again and try to register you see you are already registered please login so that means I'm already registered in this particular array so I have to login here so now what will happen whenever I am setting this current user which is my name so if I now log here this current user right so you'll see that will be getting my name here so if the current user is exist or they have registered I have to go to the next screen so which is the chat room screen so I have to navigate the user to that particular screen how we are going to do that we can obviously do it directly from here but I think better we'll do like this we'll use this use effect and here what I'm going to do I'll give this current user as a dependency and I'll check if this current user is not empty so if this current user dot stream if this is not equal to empty what I'm going to do I have to do navigation dot navigator from where this navigation so navigation is a prop that we will be receiving because in this app.js we are using this stack Navigator this navigation container will give us a prop that we will be able to access in each and every component so that I'm going to use here so this will be navigation and here what we can do will do navigation dot navigate and which screen I want to navigate I want to navigate to chat screen so this is the name we have given so the same name we have to use so I'll go here and then I'll just pass this chat screen now let's see what is happening if I now save this see it is going to the chat screen because the name is already exist here all right now I hope this is cleared so what we have done if the user is not registered they have to register first if the user is already registered they have to login and once they will get the current user it will go to the chat screen so that's all for this particular uh video and that's all about this home screen when the we have to start working on this chat screen and in this chat screen we will be having this log out button where we will be going to the home screen again so that we are going to do in the next part let's start working on the chat screen so now the first thing what we are going to do is to create the basic structure and then there will be a button and on click of that you have to basically open a model so in that model we'll be typing the group name and based on that it will create the group all right so now let's quickly create that so here I'll just remove this text from here uh so I'll keep this one as view now I will give the class name for now and later we'll be creating the Styles based on those class name so the first one will give this one as uh let's do one thing let's create the Styles first so Styles which you will do is style set dot create and then this will be our main wrapper I'll give this one as Styles dot main wrapper now inside this uh we will take another view and then we will mainly take three view here so first one will be for the top then we'll be having the Middle where we will be seeing all the rooms and then below we'll be having this button to create a new room so we'll take three view here and style we will give this one as Styles dot top container copy this will paste it here same here and for this one what you can do you can give this one as least container and for this one we will give this one as bottom container that's it now on the top we will be showing the username welcome user and then there will be your logout button so for this one now what you can will take a view here now here we will take a text and here we will so welcome and then we'll give the name which is the current user now this current user we have to take it from our context so we'll take this current user which will be able to use context sorry use context of global context now let's save this and let's see what exactly we are getting we are getting my name here welcome sangam and then uh here what we'll do we will take one placeable component and inside this we are going to uh import a icon so the icon that we are going to use that will be import from this will be at the rate sorry this will be at the rate Expo slash vector icons and this is called and Design now here we are going to use this particular component so we'll take and design and here we will give the name as log out and also will take a size property as 30 and also give color as black let's save this and let's see what we are getting all right so we're getting the icon here awesome now what we are going to do for this one will take a style here so we'll do style which will be equal to styles dot will give this one as header let's copy this and we'll paste it here so for this one we'll give this one as heading and for this placeable we I think for now this is fine because that should should not be any design specifically for this part so for now I think this is fine now let's go to the list container now in the least container what we need to do we have to basically render the rooms or basically the chat rooms that we will be creating here so here what we are going to do we'll do here rooms that I'll show you all let's give this one as all chat rooms and and all chat rooms dot length greater than zero then we are going to render those orals this will be null and here this all chat rooms will be state that we are going to use from this context so this will be all chat rooms we'll copy this we'll go here we'll create another here so this will all chat room set all chat rooms which will give this on a huge state of MTR and then we'll pass it here so this will be all chat rooms and set all chat rooms that's it now here uh we'll do one thing uh let's uh we'll basically check if this uh length is greater than zero so we are going to use the flat list component and in this flat list component we are going to pass the data as these all chat rooms and also you have to render the item so in this render item we have to create a reusable chat component where basically we will be rendering each and every individual chat room so here uh what we are going to do right so we'll take item and here we will create a component so let's go to our component we'll create a chat uh component dot Js now let's quickly create this so this will be export default function chat component and we are going to return View and then we'll return text and this will be chat room component save this and this component we are going to basically use it here so we'll import this chat component and then we'll pass this item as this item which is basically the individual item also we have to pass another property which is Keys extractor and this Keys extractor we will basically use the ID for each and every individual room and I think this is fine let's save this and now next what we need to do this bottom container basically we will be having that button where we will be able to create the uh create the basically the room so here we'll take the pressable and inside this principle we will take a view and then we'll take a text here and in this particular text we'll give this one as create new group and this uh pressable let's take some style uh so for this one we'll use Styles dot button and for this one we'll use style dot button text that's it let's save this now let's see what exactly it is looking so first I'll give you my name here and we'll go here so currently it is coming here this is fine I and also you don't have any room so that is the reason you are not able to see any now let's quickly create all the Styles first so the first thing is that we are having the main wrapper so for the main wrapper we will use the background color as this color and we'll use a flex of one and also I think for now this is fine all right so now next uh what we are having we are having the top container so we'll take top container here and for the top container we'll use the background color as white uh we will use a height of 70 we'll use width as hundred percent also we'll use a padding of 20 I will use justify content as Center let's use a merging bottom of 15 also use a flex of 0.3 let's save this all right this is fine now next uh what we are having we are having the header of this particular thing so let me just check so this header so copy this then we'll paste it here we'll make the flex direction as Row for this one we'll use align items as Center and we'll make the justify content as centered let's save this now this is fine all right now next we are having this uh I think we are having this user heading so we'll take this one as heading and will make the font size as 30 and we'll make the font weight as bold and also we'll do text decoration line as underline let's save this now this is fine now next what else we are having all right so next we are having the least container so we'll take this list container will make the flex for this one as so I'll just discuss why we are doing so this is all actually calculated so for this one we'll do 3.4 and we'll do a padding horizontal of 10. let's save this all right now this is fine so this will take uh this much so this is uh 3.4 then 0.3 and this is like 0.3 so this is all about the least container now what else we are having so then we are having the bottom container so again for bottom container we'll take Flex as 0.3 then we'll take a padding of 10 here also this is fine now next uh we are having the button so we'll take button here we'll use the same background color that we have used previously which is 703 efe then we are having padding of 12. then we'll do width as 100 percent then uh we'll take elevation as 1 and we'll do border radius as 50. let's save this all right so this is fine but this is something is breaking so we'll check this one now next what else we are having button text so we'll have button text here so that we haven't used I think so we have to use the same sorry so this will be button text so for button text what we will use will use text align as Center then we'll use color as white will make the font weight as bold and we'll use the font size of 20. let's save this awesome so now this is fine now I think that's it that will be fine anything else is left all right uh now what we need to do here on click of this particular uh button we have to open the model and in that model we will be having the uh that input and there will be two button one is like uh to create the new group and one is to cancel so that we are going to do in the next part so let's uh quickly create the model and one more thing is that for model we are not going to waste much time on the CSS part so what we are going to do will use this uh model code from here only in the official Doc if you want to use some advanced level of CSS obviously you can use but for now we'll use the same what I'll do I'll just copy this from here and then we'll go here let's go to our components and we'll create another uh file here so this will be model dot JS and I'll paste it here and for this one we'll use this one as model and we'll go here and we'll give this one as model now what we need to do you can see that they are managing some kind of state here so the first thing is that we are not going to use the state like this so we'll just copy this line from here we will go to our context and we'll create the state here and then you'll pass this here so this will be model visible set model visible we'll save this now what we are going to do will take this one from our context so this will be model visible and set model visible which will be equal to use context of global context and we'll cut it from here that's it and now what we can do we will save this we will go to our chat screen and then here let's render the same here so this will be our model that's it now notice one thing if I now save this you'll see that we are getting some errors so model is already defined let me check all right so this uh let's do one thing so we'll give this one as a new group model instead of the same name and we'll use the same here and now we'll just import this one and we'll remove this part from here now this should work now let's save this now this is fine what we need to do let's go to First we'll go to our page and here you can see that we are getting this so model so that we need to configure so we'll go here so model and this part we actually don't need so we'll just cut it from here and we'll save this and then what we are going to do we will check basically if this model visible is true then only I want to render that or else not so we'll copy these two part from here we'll copy this from here we'll go to our chat screen we'll pass it here and we'll just render here that if this model visible is true then only render this new group model let's save this now this is fine now what we need to do we have to make this set model visible as true whenever we'll click on this particular button so how we are going to do that that is very simple so here on this create new group we'll take on press method and will make this set model visible as true that's it now let's save this now let's see what is happening if I click here so you can see that we are getting this but there are some issue with this particular style so that we need to check I think the issue is coming from this particular view let me just remove this view from here I think then it should work okay so now this is fine so now here we have to change something so the first thing is that we are having this text so here we are going to use a text input so for this one let's go to our home screen and we will use the same text input so we'll copy this and we'll paste it here and let's copy the class name also so you'll use the same here that's it and uh what else I think we have past two times is it let me just remove it from here we can also remove this hello world and also we need to button basically so for this one also we can copy the same structure that we are having for this particular things we'll copy this from here and then we will paste it here that's it and then we'll also use the same class name so we'll copy the button wrapper button and button text these three so we'll copy from here see the main reason I'm not want to uh like uh spend much time on the CSS part now let's format this and also we'll get this error here so for now we'll like comment out the on press part let's save this and let's see I we are getting some error text input is not defined so let's import it now let's see all right so we'll give my name here we'll go to register page we'll create new group current username is doesn't exist correct so that also you have to undo from here so we'll go here we'll type sangam register create new group so you are getting enter username enter your username is coming here so we'll give this an enter group name that's it so now this is fine now let's uh remove some of the Styles so I think we have to modify some style here so the first thing is that so we are having this model view all right so let's comment out this part okay also we don't need these button classes we'll remove this and also you're having this width for this button so let's save this now this is fine so now here we'll go and then this will be our so this will be add and this will be cancel and for this one on on press what you need to do is to make set sorry we have to make set model visible as false that's it I think this is fine and for this add one I think we have to add that new group that we will be creating all right everyone so now I think this model is almost done so we have to start working on this functionality so for this one we'll go to our index and we will create another state here so this will be current group name this will be Set current group name which will be equal to use state of empty and we'll copy this and we will pass it here let's save this we'll go to our model component and here we are going to use the same from the context and then what we need to do we are having this text input right so here we'll do this Set current group name as this and the value will be current group name that's it and on press we have to add the group name so we'll create another method here so let's give this one as handle create new uh room that's it now we'll create this so we'll do here function handle create new room and then basically whatever group name will be typing here the same movie will be receiving here now that's all for this particular part and also let's check whether this is working or not so we'll just lock this current group username here so recording group name here so we'll type my name I'll do register will go here type some name here let's say first we'll do add and you're getting first here and also what you need to do whenever we'll do we'll just close this model we'll empty this particular value and also dismiss this keyboard so these all things we need to do so the first thing is that what we need to do will make this set model visible this is as false we'll do Set current group name as empty and also we'll do keyboard dot dismiss let's save this and now let's check again all right we'll do cancel we'll create a new group I think we are already having this uh value here so let's give some value let's we'll give second we'll do add now see uh it's now closing the value is now empty and also keyboard is uh dismissing so now what we need to do in this particular create room we have to now make use of socket so in socket that will be discussing in the next but there are some method that we can use and the in based on those methods we have to write our backend logic and then whatever the group will be creating here or basically the new room that room we have to render here so that we are going to do in the next part all right everyone so now what we need to do next step uh whenever we will be creating this new group the name will be getting here based on that we have to create the room or basically the group whatever I'll see that we are having this socket dot emit this method from the cliented and client side and here we need to basically pass the name of this event and then the additional arguments and then you'll be getting the response back now on the server side if you see that this particular name based on that will be having this method this is Socket dot on it will identify based on this even name and this org is basically the additional parameter that we are passing here which is basically the world but in our case this will be basically the group name so what we are going to do we'll do socket.mit will give a identifier for example let's say we'll give create new room or create new group for example instead of room so and then here what you need to pass this world is basically this group name that will be giving here I hope this is clear so now we'll go here and then what we are going to do in this particular handle create room we will basically import socket now before what we need to do we have to configure something now because this is a native application so let me just go to this utils so here we'll create index.js now here we have to basically do a certain things or else this will not work now this is if you try to use localhost 3000 or localhost 4000 whatever you will get some error like let's say Network field so that is the reason we have to do certain things so we'll do import platform this platform is basically will identify whether the current OS is Android or something else and then what we are going to do we'll do export const and this will be our base URL and we'll check if this platform dot OS if this is equal to equal to Android then you have to use this particular endpoint or else we are going to use the localhost so here what we'll do we'll do HTTP and then this will be 10.0.2.2 and then this will be colon 3000. or else here what we can do we can do HTTP and this will be localhost 3000 that's it so this is one very important point that we have to take care now let's save this now we'll go to our model component now here also we need to import socket so you have to also configure socket so for this one we will I think let's do this one in this index only instead of creating another folder so what we are going to do we will import here IO from sorry this will be from socket IO client and this will be IO that's it this is a function now here what I'm going to do I will do export const socket which will be equal to this IO dot connect and here what we are going to pass we have to pass the backend Port now in the back end we are having 4000 so we will copy this particular from here and then we will use this sorry we have to take like this and then we'll use this 4000 that's it now let's save this so now we are doing both now what we can do go to our model component and in this model component first we'll import socket sorry we have to import socket from utils and here what we need to do we'll do socket dot emit so this is a method and here we have to give identifier or basically the event type all right now you can see that if you emits an event of the given type with the given data all handlers of that particular type will be notified all right this is at the end is like kind of AD listener in you are having some name and there is a callback function all right so here we are having identified so let's give this one as create new group we'll give and here we have to pass the additional argument which is basically our current group name that's it now let's save this now we have to start working on the back end part so we'll close everything from here we'll go to a back end let's go to our index now here what we need to do the first thing is that we will be having all the rooms here so the first thing is we'll take a uh like variable and let's give this one as uh chat group chat groups something like that so these will be basically are all the groups and before that also we need to take the socket IO so what we'll do we'll do is const Socket IO which will be equal to require and we have to basically get the socket.io and here what we are going to do here we'll pass this HTTP and then we have to basically white list that uh 3000 Port so for that one what we we can do we can use this quartz here and we can basically pass the origin so you can see that this is the origin and here we will be using the same so go here and this is the one we need to use so copy this and we'll pass it here and this will be inside string that's it all right now what we are going to do so we have already taken this chat group here so now we will after this we have to use the connection or basically you have to create the connection so to create a connection what we need to do we have to take this socket IO dot on and here we are going to give connection and this will give us a call back and here we will be receiving argument and if I now just do here console.log and let's take a template literals and we'll give here socket dot ID user is just connected all right now what we can do uh you remember as I told you that whenever we will be creating all the chat groups we have to pass the response back so this is our chat groups currently this is empty this is fine but at the end what we are going to do in this particular endpoint we will basically do response dot Json and we'll pass this chat groups here and the same chat groups basically we have to render it here all right so now you can see that we are getting this this user is just now connected so I'm actually current user which is now basically connected here so now we have almost set up everything we have to now start working on all the methods that we need to create here so the first thing is that we have to create our new group so for this one what we are going to do we'll do socket dot on and here again we have to give the identifier now here if I now go to this model you can see that this is the identifier so this is our create new group so the same name we'll be using here so this is create new group now this will give us the current name current group name basically that we are passing from here this is the current group name and based on that we can do certain operation so now let's do one thing let's log this current group name let's save this and now if I just go here and type let's say first do here add see first we are receiving here so current group name we are getting here correct so what we can do we can basically uh do something like that we can create a gen we can push this current group name into this chat groups so what we can do we can do like this we'll do chat groups dot unzipped and here we can pass some ID so what we can do we can take these chat groups dot length plus one as ID and also we'll pass this the current group name and also in this uh particular group there will be some messages obviously the individual messages so this one will keep this one as empty that's all so that means whatever name we are getting here based on that we are adding or basically adding that particular group name in this particular array and at the end we are passing this chat groups in the response now let's save this now what we are going to do to extract all the groups will create another uh method here so what we can do here we can do socket dot on and let's give this one identifier as get all groups and this will give us a callback method and here what we can do we have to basically emit all the group names so we'll do socket dot emit so emit is another method and here we'll give this one as group list and we'll pass these chat groups and the same emit we have to do here also because when we will be adding a particular chat group and then we have to get the refresh or basically we have to get the updated list here so for this one also you have to emit it here now let's save this so now this is done so now what we need to do let's say if we once we click here we want to render the value here so we have to go to our chat uh component and then on use effect or basically whenever this screen will be getting loaded we have to extract these chat groups so let's do that part all right so first uh what we can do let me just format this and we'll do go here we'll do use effect and we have to import sockets so first we'll do import socket from utils will pass this socket as a dependency and here what we're going to do we'll do socket dot Emit and if you see here in the back end we are having this particular gate all groups so this method we are triggering here so this will get all groups and then what we are going to do will do socket dot on and here if I not just show you so you can see that we are having this group list so we'll call this group list here so this group list will give us all the groups and based on that we can do something for example let's say we want to save this group list into our state so that we can do I think we are already having this all chat rooms that we have given in the context so we are having the set all chat rooms so this one we can extract from here and then if I now log this groups and let's see what exactly we are getting so first this is empty if I now go here click our first room click here add see now we are getting current group name first room id1 and message rmt because we don't have any message that means we are getting the groups here so what we can do we can do set all chat rooms or groups whatever and you can pass these groups that's it now let's save this we are getting some error cannot read the property of ID of undefined so I think this one we are getting in this uh here I think let me just check I think there are some error let me just check I think the error is coming from here only oh I think this should not be an object this is the single item so I think this should work now let me just check so we'll give some name here register so you're getting the chat room component here if I create a new group let's say third group click on ADD and we are getting the updated value here this is fine so now uh what we need to do you have to start working on this chat component so for each individual chat we have to render or the all the information here and we are already passing the single item so let's go to our chat component and here we'll be getting this item as a prop and here let's remove this part from here all right so the first thing is that each and every item will be a pressable components on click of that you have to go to the messages screen so what you are going to do instead of this we will be using pressable and for this one we will use some Style again so we'll use style let me just create the Styles here this will be style sheet dot create and here we'll do styles dot chat and also we have to give some Handler here that we are going to do in a minute inside of this will take a view I think we we already imported and inside this we are going to import font awesome from so this will form at the rate X4 slash X4 Vector icons sorry this will be Vector icons that's it and this will be font awesome so we'll copy this we will use here and here let's give the name as group will give a size of 24 and also use the color as black that's it for this one we'll take another style so this will be Styles dot Circle let's format this so that's all about it now here we'll take another view and for this one we'll take styles dot right container I will give and then inside this uh what we'll do will take another view and we'll take a text here for this one we have to render item dot name awesome now here what we need to do we have to render the last thing message so for this one we'll create another uh so let me just go to our context file and we'll create another state here so we'll give this a const messages comma set messages which will be going to use state of empty object and we are going to pass this one here save this we go to our sorry this component and then we are going to first do const we'll take these two from use context of global context and then what we are going to do basically we have to set this messages that we are going to receive so we'll take here use effect you can also use use layout effect but this is also fine and here we'll do set messages as this item dot messages so the item is messages means for each and every chat group you will be having the corresponding messages so we want to render the last scene message so what we can do we can do here item dot messages off item dot messages dot length minus 1. that's it now what we can do here after this name we have to render the message so we'll do here text and here we will check if messages and text if this is exist then one then we want to do messages dot text or else we'll just show here tap to start messaging that's it and also let's give some styles for this one will use styles Dot message and for this name we'll use let's give this one a styles dot username that's it now what we need to do so after this particular view we will take another view here and here we'll take another text so for style we will use Styles dot time so you have to render the time here and again we'll check the same thing if messages dot sorry messages dot time if this is exist you'll do messages dot time or else we'll just show now so now let's format all of this and let's start working on the styling so the first thing is that we are having the chat so we'll take chat here and we'll use with as hundred percent we'll use flex direction as row use align items as Center we'll use border radius as five we'll use the padding of 10 please background color as white and we'll use some height of let's use this 80 and also use a merge in bottom of tin that's it now next uh what else I think we have to we are having the username so we are having username for username we'll use a font size of 18. margin bottom of 5 and we'll use a font weight of bold that's it all right now next we are having message for message what we can do we will use a font size of 14px or basically 14 and will give opacity of 0.8 now next we are having the right container so for right container we will be using the flex direction as row then we are having justify content as space between and also use a flex of one now next we are having the time so for time we will use opacity 0.6 and I think that's it anything else left no I think this is fine so now let's check I think there are some bold is uh not exist all right so this will be in a string so now let's do one thing let's give here some name so we'll give some John we'll do register will go here and you can see that now we are getting and uh we are getting tap to start messaging and this is this is fine all right but the group username is not coming here so let me just check so what we have given here we have an IDE current all right so this will be current group name dot name this is fine now let's save this all right so we are getting this and also you have to clear the uh Circle uh style here so we'll do here go here and we'll do Circle we'll do width as 50. we'll do border radius as 50 we'll do height as 50 and we'll do align items Center will do justify content as Center and we will use some border with as to and also use a margin write-off 10. now let's format this let's save this awesome so now this is fine so now let's uh create a new groove here so I'll give here like a fifth uh sorry fourth so if I do add here so the fourth group is coming here so now what we need to do on click of each and every group we need to navigate to the message screen because this is the group screen on click of that it will go to the messages interface so for this one what we can do you are having this placeable right so we'll do on place and here we will create this handle navigate to message screen let's copy this and then we'll create this one and what we need to do here now obviously we'll receive this navigation uh navigation or like we can also use a hook so that we are going to use so that you will get both ideas either you can use this navigation as a prop or you can directly use like this so we'll take a navigation here and this will be equal to use navigation so this is the hook that we can use and this we have to import so we'll do import and I have to do use sorry where I am doing here you have to do here so this will be import use navigation from and you have to do it from react navigation slash native that's it and here what you can do we can do here Navi yes and Dot navigate and sorry to do a navigation dot navigate and inside this we have to pass the screen that where we want to navigate so we want to navigate to the messages screen so we'll go here we are having this messages screen we'll pass it here and also you want to put some additional state so what we want to pass we want to pass the current group name which is equal to item dot current group name and also you want to pass the ID so we are having ID which will be equal to item dot ID that's it now let's format this let's save this so now let's see what is happening if I click here it is going to the messages screen if I click here it is going there and everything is working fine now we also have to start working on the logout button so on click of logout we have to navigate to the home page so that we are going to do in the next part all right everyone so first let's implement this logout functionality after that will be uh start working on this messages screen so for this one we will have to go to the chat screen and here we are having this uh thing here so we'll do on press and here we'll do handle log out and here what you can do first thing this will be handle log out so the first thing is that you have to do Set current user so that I think we have to import it from here let me just take it from here let me close this so we will go to our uh sorry context and then we are doing current user so this we are going to extract from here and this will be Set current user which will be empty and also what we can do uh from here we are having this set so login flow so these also you have to make it false so these I will also take it from here and we'll do set so login flow this is as false if I now format this and now next thing what we need to do when the current user will be empty so that means we will navigate to the home page how we are going to do that so that is very simple to use effect and we'll give this current user as dependency and we'll check if this current user dot stream if this is equal to equal to empty so we want to navigate sorry we have to take this navigation from these props so this will be navigation dot navigate and we'll go to the home screen that's it so now let's format this let's save this let's see what is happening if I click here see now it is going here click here let's give my name here if I do here login so I I have to register first so obviously I'll do let's say register if I do register here so it's going back now we are getting here so now this is fine so now if I click here it is going to the messages screen so now what will be the next step here basically we have to start working so in the message screen we will be having some kind of text input and then you have to render all the messages here so let's working let's start working on that part all right so first uh let's create the basic structure in this message screen or basically in this uh component so I'll close everything else here now here uh what we can do let's create the Styles first so this will be Styles which equal to style set dot create so this uh for this one will give style should be equal to styles dot what you can do we can give this one as wrapper and then we'll remove this part from here and then we'll take another view and then here what we can do we can take another style here and for this one we'll give Styles dot inner wrapper so those things we are going to create in a minute now here what we need to do in this messages screen we have to render all the messages correct for all the users so for this one I'll go to our context and we'll create another these messages is basically the last scene message in this particular page all right so and here we have to render all the messages so this will be const all chat messages set all chat messages this will be equal to will take you straight off added and then we are going to pass it in our context all right then we'll just uh take this one here so we'll do const message is equal to use context of global context now here in this inner wrapper what we need to check if this all check messages and and all chat messages of zeroth element is exist then we are going to render or else this will be empty now here what we are going to render we will render a flat list component obviously and here the first thing what we need to do you have to pass this data which will be going to all chat messages and then there will be a render item now in this render item what we need to do we will create another uh reusable component just like this chat component so quickly create a component here so let's give this one as message component dot JS and this will be export default function message component and here we will return some view for now and we return some text and we'll give this one as message component now these component we are going to render here so this will be message component that's it now here we will be passing the item which will be equal to this item and also you will be passing the current user so which will be current user that we are going to render from our context so in our context we are already having this current user right so this one will just extract this you will understand why we need this and also for Keys extractor we will take item and we'll pass this item dot ID that's it so this is all about the inner wrapper or basically all the messages referred then we have to create the input where user will be typing the message so we'll take another view and we'll give this one as style we'll give this one as Styles Dot message input container all right now here we'll take another text input and then we will pass the following styles of our style will give this one as for example Styles Dot message input then also you have to take the on change so for on change in this context we again have to take another state which will be our current chat message Set current chat message which will be going to use date of empty and we'll copy this and we'll pass it here and the same we will receive in here all right so for on change what we need to do for the first thing is that value we need to give the current chat message and for on change text we'll get the value here and here what we can do we can make this Set current chat message as this value that's it and we'll have some placeholder we'll give this one as enter your message that's it next we will take a pressable here inside this will take a view and then we'll be having a text and here we'll pass this send button and for this one we take a style for the placeable and we'll keep this on Styles dot button that's it and for this one we will take a style and we'll keep this style dot button text that's it so now let's uh start working on the style so the first thing is that we are having wrapper so we are having wrapper and for wrapper we'll do Flex as one and we'll do background color as the same color that we have used in the previous screen that's it and I think the same also we can use uh for the next one I think for this inner wrapper also the same we can use the only difference is that we have to add some padding for this one so let's do one thing uh we will do like this we'll pass this style dot wrapper and here we'll pass this uh padding vertical will pass as 15 and also pass a padding horizontal will pass as 10. that's it then we are having uh the next Arabic message input container so we'll take this one so this will be message input container we'll take the width as 100 percent then we'll take background color as white for this one and we'll take a padding vertical as 30 then we'll take padding horizontal as 15. then we are having justify content as Center and will make the flex direction as Row for this one that's it now next we are having message input so we'll take message input and for this one uh what we can do we can take a border with of one we'll do padding of 15 and we'll do Flex as one we'll do border radius as 50 and we'll do margin right as 10. that's it and then then I think we are having another one which is the uh button so for this one we will take button here and for this button uh we'll make the width as 30 percent then we'll take background color the same one that we are using in this application 703 e f e then we are having border radius we make this one as two then we'll take some align items which will be Center then we are having justify content as Center and also do border radius as sorry border radius as 50. I think we are using border uh radius here also let me just remove this okay next uh what else we are doing we are having button text so for button text what we can do we can take this color uh we'll make the color as white only and we'll make a font size as 20. so now let's format all of this and save this let's see what is coming all right so first I'll just give my name here register and click here and we are getting the result here awesome this is fine so now what we need to do on click of this submit we have to basically handle or add the new message for this particular group because for each and every individual group we have to handle that so for this one we'll do here on place and we'll keep this on a handle add new message so we'll copy this will go here and we'll do function handle add new message and here what we need to do the first thing is that we have to create a time so for to create a time what we can do we can take time here time data and here we need to get the our and also you have to get the minutes so for this hour what we can do we can take this one as new date and then we can check if this gate our if this less than 10 that means this is of single digit so we'll take template literals and we'll just append this zero and then we'll pass the value whatever we are having currently so that means we are checking if the current value is less than 10 and will pass the same here that's it and if nothing else then we'll just uh use the same we will not append anything here that's it and same for uh minutes also you can do so we'll copy this we'll pass it here we'll do minutes so only difference is this will be uh get minutes that's it so copy this we'll paste it here paste it here and I think this is done so this is all about the time data we need and then what we can do we can check if the current user if this is true so we can we have to basically uh create that particular uh emit method uh so that we'll be able to add or pass that particular data from here to socket and socket will basically add that particular message into that particular group because for each and let's say I'm clicking on this third Group whatever type I will be typing here I have to keep a track of these particular messages under that particular third group so for this one what we need to do we have to do socket so the first thing is let me just import socket so we'll do import socket from and we have to go to our utils and index that's it so here what we need to do we have to do socket dot emit and here we need to pass identifier so we'll pass this one as new chat message and here we will be passing the properties so the first thing what we need to pass here we have to pass the current chat message also we have to pass the group ID or basically the group identified that means the message that I am doing under which group so we'll give this one as group identifier which will be equal to the ID that we will be receiving so if I now just go to our chat screen and we'll see that uh let me just check not chat screen I think chat component so you can see that we are passing this current group name and the current uh the group ID here that we are getting so this one we will be able to extract here but how we are going to do that so for this one this message screen will receive this navigation uh prop and also it will receive the route prop so from this route we will be able to extract the params so here what we can do we'll just basically extract this current group name and also let's make this one as current group ID so that it will be easy to understand so this will be current group ID copy this and we'll pass it here and this will be equal to Route Dot params that's it so now what we can do here in this group identifier we can pass the current group ID and also we have to pass the current user and also you have to pass the time data that's it so these all are the messages we need current user why we need because let's say my name is sangam and I'm typing something here next time some other user will come so that time we need to check that whether the what whether the user that is typing the previous user or like that is a different user so that is the reason we need the current user for this particular message and after this what we can do we can make this Set uh current chat messages empty and also we can make a keyboard dot dismiss that's it now this is this is all about the client side so we are emitting this particular method here from the socket from the client side we have to handle the same in the back end so let's go to our backend now here we have to do quite a few things so the first thing is that whenever we will be clicking on any particular group that means we have to find that particular group from the list of groups so we are having all the chat groups so now if I now go back so we are having four now if I click here I have to find this particular group so that means in this back end I have to create another uh method here so here let's do one thing so we are creating this new group after that we will create another one so this will be socket dot on and here I'll Do For example find group now this will find the group based on the ID of that particular group all right now here what we can do we can do here const uh filtered group which will be equal to chat group dot filter this will be item and what we are having we have an item dot ID that means we are checking based on this ID that we are shifting here which is equal to equal to uh this ID that will be passing so this will basically filter the group and based on that what we can do we can trigger a method which will be socket dot Emit and this will be our uh found group that we basically got and here this will be the result and here we'll get the messages so that means if I get this particular group in this group I will be having this messages so this will be of array so taking the first object and then because we are doing the filter right so we have to do filter group of 0 or Dot messages that's it so that means whenever I'll find the group it will give me the messages back for that particular group so this is one and next you can see that we are emitting this particular new chat message here so these also we have to handle here so what you can do we can create another socket dot on and here we'll get this identifier which will be new chat message we'll pass it here and in this new chat message we are getting the data so this data is basically this data we are passing here now here what we can do the first thing is that we have to restructure some of the things so we'll do from here so we'll get the current chat message will get the group identifier will get the current user and also get the time data I think these caps yes so these will be getting from our data that's it so now what we need to do the first thing is that we have to basically find that particular Uh current room or basically current group based on this group identifier so let's do one thing so this will be const we can do like this one so you can copy this you can paste it here and this will be equal to this group identifier so that means we are getting the filtered group and then what we can do we can do a const new message which equal to we have to create some ID for each and every individual message so what we can do we can do like this we can generate some ident uh we can basically create a function here that will create a unique identifier so let's do something or create unique to create unique ID and here let's quickly create this so let's do like this function create unique ID and this will basically return math dot random and we'll do two string of 20 and then we'll do substring of 2 comma 10. now this will create a unique ID so the same we can basically use here and then we have to basically pass a text is equal to this current chat message that user is typing will pass the current user and also pass the time which we will be able to extract so the first thing we'll take template literals and here we'll do time data dot our remember we are having over here and then we can take time data dot minutes that's it all right now next what we need to do we are having this filter group here now in this filter group I need to emit this particular group message that I am currently doing now this is a little bit tricky but so what we can do right here we can take at socket dot 2 so this is another method and here we are having this filtered group of 0 dot you can see that we are having this current group name so we'll take this current group name and here what we can do we can emit here another identifier let's give this one as group uh what you can do like let's give this one as group message and this new message we can basically pass here that's it and then what we can do we can basically push this particular message into these messages array of that particular group so what we can do we can take this filter group of 0 dot messages dot push and then we can post this new message why not this part is little bit tricky but this is very easy to understand so whatever we are typing here we are identifying that particular group and then in that group we are basically uh basically pushing these particular messages the new message that I'm typing I think that's it all right now next what we need to do we have to emit the group list so I think we are already having this particular so copy this from here and we'll pass it here so this group list will be basically the all the chat groups that we are we are basically having and then after that what we need to do we also have to emit so we'll do socket.mit and here we are having if you see we are having this found group so we'll call this found group and we'll pass the corresponding messages of that particular group so what you can do you can do here filter group of zero dot messages that's it and I think this is done and now what we need to do so let me just save all of this first all right so now whenever we will be typing here we have to basically extract that particular message and the same we have to render here but how we are going to do that so that part we'll be doing in the next uh part of this particular series all right everyone so I think we have almost completed most of the part we are creating new message and based on that we are triggering this group list and the found group uh this particular uh event type here what we need to do whenever we'll be typing here the same message so you have to extract and you have to render here all right so what will be your next step we are already adding that particular message in the back end so now we have to basically find that particular room and based on that room if I now go to a backend code you can see that we are we are finding that group and based on that we are basically emitting this event type which will return the all the messages to that for that particular group so we'll do one thing uh we'll do use effect here and then we will take the socket as dependency and we'll do here socket dot emit so this will emit that particular uh group that sorry the particular event type that we have created which is find group and you have to pass the current group ID because in this fine group we are passing the ID so this is first step and then this will do socket dot on this will found group and then here what we need to do this will basically give us all the chat message all chats and here let's log this and let's see what you are getting if I now save this and let's see what you're getting cannot read property by me to only find okay so oh this is not default export it should be like this okay so now let's see so I'll go here type my name here okay so I have to register first register create new group so I'll give some name here and I'll go here I'll type hello send this one and you can see that we are getting the messages here um this is fine and if I type let's say hi and send this okay we are triggering this one multiple times I I got the reason so maybe we'll do like this we'll take use layout effect and here we will trigger this this is getting triggered multiple times and here we'll call this fine group and then we'll check so now let's I'll type something hello world if I send this now we are getting hello world here and the updated message this is fine so now what you can do whatever chats we are getting here we'll do set all chat messages as this all chats that's it now let's save this now you're getting three message if I type the fourth one fourth message and send this we are getting the same year I think this should also work let me just check I think we don't need this use layout effect maybe I was not able to see the length of messages because this is happening very fast right so let me just check let's say I'll type your fifth message and if I send this and we are getting the same here this is working fine I think we can also keep user effect only because this will work at the end we have to find that group and then based on that group it will return the messages that's it so now what we need to do we we have almost completed everything so the only thing that is left we have to basically work on this message component because currently this is like a static text uh that we are showing here so here we are already passing some prop and the same prop we will be basically able to receive here let me close everything else from here I will go to message screen and I think we are passing current user and item so copy this will extract the current user also get the item here and then I'll remove this part from here so the first thing is that what we need to check the current user status current user status so we'll check if this item dot user if this is not equal to equal to current user so that means if this is true so that means the previous user is not same as the current user so this is the reason we have to check this and now what we can do here we can take some style and in this style what we can do we can check if this current user sorry if this current user status if this is true we will not show anything if this is false that means both the users are different so we'll show the messages on the right side to differentiate so this will be Flex end that's it and now what we can do here also we have to do something so let me just check what is coming in this current user status so this is coming as true this is fine so now what you need to do here we'll take another view and inside this particular View we'll take another view and then here we'll take another view and we'll return text and in this particular text you have to render item dot text so we are getting all the messages here this is fine and also what we need to do here we can take another text here and we have to render item dot time awesome so now we are getting the message and everything else now we'll create the style so this will become Styles which will be equal to style sheet dot create and here first let's give all the uh like the class name first so for this style we will use tiles Dot message what message item wrapper I think this is fine let's copy this for the next one will give this one as message item inner wrapper then we are having another one so for this one is message item we will give and for the text we will give message item text that's it and for this one we'll give message time all right so the first we'll start with message item wrapper which is basically uh this one so for this one what we can do uh we can give Max with as 50 percent and also will give a margin bottom of 15. this is fine now next uh what else we are having we are having this message item inner wrapper so copy this paste it here so for message item in a wrapper will do Flex direction as row and also uh here what you can do will do L align items as Center next we are having message item so let's copy this we'll do message item so for message item we'll do with as 100 percent will do background color as white then we'll do a padding of 20 we'll do a border radius of 10 and also do margin bottom of 2. I think that's it and now we are having also message item text so let's copy this so for message item text uh I think for this one we can give conditionally because we have to check if this current user status so we can remove this part from here and for the message time will just give a margin margin what we can imagine left we can give or let's keep it like this for now we'll check how this is looking so first thing is that let's uh check for this one for this text we can check if this current uh user status if this is true so we'll use something or else this so for this one we'll use color as black or else we'll use color as this one I think I already noted it down let me check so this is E5 C1 f e so this is one and then we are having the message item so I think for message item we are having the same but we have to give some condition so what we can do here right so for this one uh we can check if this current user status if this is true so we'll use the same or else here what we can do we can take the same and we can basically give some different background color so for this one we are using this color that we are using seven zero three efe that's it and now let's format all of this save this let's see how this is coming okay now this is fine but let's give some margin left so that is the reason I have taken this one so this will be message time and we'll take margin left as 10. awesome so now you can see that uh this is the same user so I'll type here hi sangam I'll send here so we're getting high sangam here I'll go back I log out I will type some new name let's say John I'll register I'll go here so this is the last one now I give High John if I send now all right there is some problem uh I think some problem is happening here because the last user was sangam but this is John let me just log this item here and let's see what is coming 7 current user oh see this will be current user not user if I now save this now let's see awesome now this is coming on this side all right so now let's say if I now go back and log out again and let's say I'll give my name here and login go here you'll see these all are my messages and this is the last message by John foreign I am good I'll send this and you can see that we are getting here John I'm good so if I now go back log out and I'll give John here let's login and if I see here you can see that we are getting message hey John I am good and this is working fine and now let's do one thing let's create a new group so let's I'll give this one as react.js if I add here so you're getting a new group here go here hi all from John send this one go back and log out and let's create another user so for example uh Ria I register and let's go here and I see all the messages will be left side because these all are the messages for sangam and John so I'll give this one a high Pria hi this is Priya if I now send this so you'll be getting the message here hi this is Priya if I know go back go here and also type here hello this site let's send this and if I now go back let's log out log in again leave John here and if I go here right so you can see that we are getting this is my message and this is from Priya same will be here also hi this is via and this is working fine hey everyone I think we've almost completed most of the things but what I notice is that if you see this message is coming same for all of that and for this one I remember we have maintained this particular state so instead of again saving this one in a particular State what we can do we are already setting all the messages uh corresponding to that particular group so what we can do we can directly render the same here so let me just remove this part from here and also you don't need this one we will go to our context and also we can remove these messages and set messages and we can remove this part from here also now here what we can do right we can basically copy this and we can go here we can check if this item and and item dot messages and then item dot messages dot length if this is true then we'll remove this part from here and then we'll just directly render dot text and the same we can do here also so we will copy this part from here and we'll paste it here and this will be dot time now let's save this and let's see and you can see that now we are getting the last message so let's test everything else so we'll go back and if I give my name here and if I log in so it's asking for register first so you're doing for the first time so we'll do registered we're getting all the groups and now let's say we'll go here and we'll type like hi clear if I send this so we are getting this message here if I now go back you can see that we are getting the last message here and I I think now everything is almost completed all right everyone so I think now that's all for this particular video If you like this video give a like comment down and please subscribe to my channel I'll see you in my next video till then good luck and peace

Channel: Sangam Mukherjee

Views: 12,833

Keywords: react native chat app, chat app in react native, react native chat app socket io, socket.io, socket.io tutorial, react native chat app with socket.io, react native project, react native project for beginners, react native chat app expo, chat app react native, chat app react native websocket, realtime chat app react native, realtime chat app, react js chat app socket io, chat app react

Id: r-IlbcKoSRg

Length: 132min 30sec (7950 seconds)

Published: Sun Jun 18 2023