Expo React Native Chat App | iOS and Android Chat App with React Native Gifted Chat and Firebase

in this part we are going to create a chat app that which is using a simple weight we do not need to use many crazy stuff to create this chat page but it already includes the time the message and avatars and we can now try to send a message to another phone like hey and now you can see it can display it at the other side and we can also type in here now you can see the message from the other people will display on the left hand side and this app also includes site inside out and also register functions and we just need to use the firebase and we add native gift chat now we are going to init a new expo project and so we go to any folders and type export init and then we type give that chat and this is just a a file name or the project name so you can type any name that you want and this is the terminal of a mat so now you press enter and now you can choose the blank template and now after it finished we go inside the folder by typing cd gifted check and since there are some packages that we need to install the first we have to install the react native gift check so we go to the documentations and we type npm in store so we copy this and paste inside the terminal and we also need to install the we add navigations so we copy this and then we also paste again to the terminal and since we are going to use the export so we also need to install this so we copy this command and again paste to the terminal and at last we need to create a stack because there are a few pages so we have to use the create stat navigators so we copy this command and paste to the terminal and we may need to install the firebase and paste here so i think we already added all the packages that we need and we can start creating our project after we already installed all the package we can type quick dot to open the vs code and then we go to create a new folder called screens and it will hold all the screens here and we are going to first create a login screen stop js and then we just create a very simple page and we just type login screens inside the test component so later it will render out this task so we can note these screens already exist and then we go to the app.js and we can now delete all the unnecessary code including the styles and we do not need the status bar here and we also do not need these things and rather we are going to import the crease that navigators and at here we type constant spec is equal to create spec navigators so now we are going to import the crease that navigators from the react navigation stack and then we also need to import the navigation container the react navigation native so now we can delete all of this and now we are going to create a navigation containers components and inside here we type stack dot navigator and then inside here we type stack dot screen name is go to login and the component is equal to the login screen now we can go to terminal and then we type npm start now you can see this already created app that with the login screen and you can see the login screen this test displayed inside the app in this part we start adding the input fields to the screen and it is much easier to use the react native element and so we go to the documentations and we start installing the react native element so we copy this command and then we go to the terminals and paste here and press enter and now we go to create to state and one is email and the other is password and which is for logging in the app so we type use date and we type the email and we set the initial state as empty string and the other is the password and we set the initial state as empty string 2 and then we go to import the input and also the buttons and we type input and we delete this and then we also import the button from the we add native elements and inside the input we put the placeholder is equal to enter your email and then the label is equal to email and we have the left icon is equal to type and material and we use the icons of email and you can search this from the material design icon and now you can see the labels and also the icons already displayed here and then we set the value as email and also we are going to add on change task and then the test and then we use the set email so the state of email will change accordingly with the test you type inside this box and then we duplicate this and then we add the placeholder we type enter your password and then the label is password and the name of this icon we type locker and the value is the password and then we use set password to change the password and in order to hide the password we also add the props of secure test entry so now if you type the password here it will become a dot and inside the email you can still see the english here and then we add two buttons and one is sign in and the other is register and then we have to add the styles of buttons so it can leave some space in between the style is equal to styles dot button and then we do not have the styles yet so we have to import the style sheet from the react native and then we go down to the bottoms and we create the styles is equal to stylesheet dot create and then we add the button with the width is equal to 200 pixels and we add the margin top is equal to 10 now we also has to add the container styles because as you can see these two buttons is not at the center so at the wheel we add the style is equal to the styles store container and then at the bottom we have the container with fresh is equal to one and a light items is equal to center and the padding is equal to 10. now you can see there are some space between the edges of the screens and the content and you can see the buttons already at the center of the screen and also they have the space between these two buttons now we are going to create a register screen so under the screen we create a new file called register screen dot js and then here we just type some simple task and we just type register screen and then we back to the app.js and instead of using the login screen as the first screen we are going to use the register screen and then the name is register so now if you we render the app you can see the registered screen is the first page and actually the login screen is very similar to the register screen so we can copy all the things from the from the we can copy all the things from the login screen and paste to the register screen and then we replace this with the register screen so now you can see the page which is similar to the login except the title is different and now we are going to add something that is needed in the register screen and first is we have to add the name and then which is set name and then we also has the image url which is for the avatars so after we create this we are going to add more input field and the first is the inputting the name so we change this to enter your name and the label is name and the left icon is batch and the value is name and we change the on change stats is set name and this remains the same and for the password is also remain the same and we also have to copy one of these and paste to the bottom and we change this to set url and we change this to enter your image url and the label is the profile picture and the icon will change to face and the value is the image url so now we can see we already have the name email and password and also the image url and this has to change to set image url and then at here we are going to delete this one because it just has the register buttons at the register page so now we can change back to the login screens as the first screen so we cut this and paste to the top and now we go to refresh the app and at the login screens we have to add the navigation in order to make this button to go to the register screen so we destructure this with navigations and we go to the register buttons and we add on press handler is equal to the navigation dot everyday and then we go to the register because we said the name of the register screen is registered and you can find this as here we set the name as register so now we can go to the login screen and press register now you can see it can go to the register screen and we can also back to the login screens by pressing the buttons on the top now we go to the firebase and create a new project and we type as gift check and we click continue and then we disable the google analytics and create the project and then we click continue and then we go to the here and we click on the web and then we type give check and then to register this web app now we have this config file and we copy this and then we go to the root folder and create a new file called firebase.js and then we paste here and then we have to import the firebase so we import stars as firebase from firebase and then we import the firebase off because we have to use this to do the authentications and we also need to enforce the firebase firestore and then we have to let the app and then we are going to check whether it already initialized so we have to use if the firebase dot apps dot length is triple equal to zero and then we use this app is equal to firebase dot initialize app firebase config so if this already exists then we continue to use the original now we already set up the config files so we have to export the database so we let this db is equal to app.firestore and also we have to let the authentication is equal to firebase dot off and last we export this to file so we continue to the console and since we have to use the authentications so we click on the authentications and click get started and then we click on the email and then we enable this function and click save so now it accept the authentications with email and password now we go to create the site up functions so the user can click on the register to create a new account from the firebase documentation you can see there is an example to let you know how to sign up a new user so we can just copy this and then paste to our project so first we are going to create a new functions constant register and then we paste this bunch of code to our app and instead of using firebase we are going to use the off because we just create a config file from the firebase.js you can see at the firebase.js we already created off variable here so we can import this on the top and use this to replace the firebase dot off so now we already has the users client already created a user with email and password we get the user and then we are going to update the profile and we are going to update the spread name and also the photo url and again you can copy this from the documentations and you can find in the manage user there are examples and we are going to update the user profile so we are going to select this and then after we get the user we paste here and since we are not going to hardcore name we already have the name so we type here and about the photo url we also have the image url so we can type image url and maybe we can replace this with capitalize l so we also have to change at the bottom so we're back to the top and we are going to check if there is image url we are going to use the image url provided by the users otherwise we are going to use the avatars for our default profile pictures and we can get it from something inside the website so we copy this link and then we replace this with this avatars.jpg so we save it and then we are going to check if there is error then we are going to alert the error message and we do not need the error code at this stage so we can save this and now we can try to enter a username such as peter and then we use twitter at gmail.com and then we type some password one two three four five six and then we can try to make some error for example we press register and at the console you can see we haven't attached the method to the button so we have to go to the bottom and we type on press is equal to register so now if we click on the register you can see there are alerts that we have to use at least six characters so we type one two three four five six and then we go to the google and search peter jpeg and then we click on this one and copy these image locations and now we can paste this to our profile pictures and then we click register now there's nothing happen but actually we can go to the firebase and then we go to the authentications of the firebase and click refresh and now you can see the picture already registered and it already stored inside the firebase in the previous lecture you can see when we click on the register it will not go to the chat page and it just state on here because we do not program the app to do anything after it get the user so we have to make the f can detect this change of state so we have to go to the login screen and then we go to the documentations and we can copy this and this bunch of code is to detect whether there is user login so we copy this and we're back to the project and on top of the login screen and we use the use effect and then we paste this to here and then we store this to a variable called unsubscribe and then we are going to replace this with off and then we copy this off from the register screen and which is import from the firebase.js and then we also have to clean up these functions by using returned unsubscribe and we also have to import the use effect so now we can see it already imports the use effect from react and after it already get the user we want it to go to the check page so we use the navigation dot replace and then we go to the chat and we have to create a check page so we go to the screens folders and click new and then we type check screen dot js and then we type our nfe and then we just type a word chat screen to know that we already go to the chat screen and if you remember we have to go to the stack and we add another stack and we name this as check and we import the chat screen so now if we go to register and we find these profile picture and we're ready for register and other users so we copy these image locations and then we go to our app and then we type a name and we call this may and may as gmail.com and then one two three four five six and then we paste this profile picture and click register now you can see it automatically go to the chat screen now we are going to create a site in functions so we have to go to the screen and create constant and then sign in is equal to and then we just copy from the documentations and there is a site in the user with email and password and then we copy this and then we paste to the functions and then we change this to off now we do not need this so we just need to catch whether there is error and then we are going to alert the error message if there is error and at last we are going to add this function to the button so we go to the button and then we buy this with using on press is equal to sign in now you can see we already logged into the app and already go to the chat screen but we do not have a way to log out so we have to create a log our functions so first we are going to create a constant sign out because the firebase name as sign out so we continue to use sign out rather than log out and again we can copy the code from the documentation so when you look at the documentations you can see it has the functions that we can copy so we can paste here and instead of using firebase.off because we already created off from the firebase js file so we can get it from instead of from the firebase we are going to get it from the firebase file and we are going to go back to the login screen if it already signed out successfully so we have to use the navigation so we have to pass the navigations here and then we use navigation dot replace and log in and then here we use the use layout event and then we use the navigation dot set options and then we use the header right and then we go to here and search log out and then we use this icon so we copy this and import this on the top and then we render this icon and then we have to pass the use layout effect from the react and we do not have the input and we also have to delete these cleanup functions now you can see it already go to the now we can see it has the log out icon and in order to make it work and also by to the side out functions we are going to add the touchable opacity so we type touchable opacity and then we close here and then we add the styles margin right so now we can have some space in between now we can go to add the functions by typing on press is equal sign out should not type inside the style so we should cut this and paste to here now it should already work and we will try this later because we want to make another things on the left side so we type header left and then we are going to use the avatars from the reactive elements and we want to make the avatar circle so we type rounded and we are going to use the wheel to wrap the avatars and then we are going to pass the source the photo source so the type source is equal to the uri and we should use the curly bracket and then we are going to check if the off exists and then we are going to check if there is current user and then photo url so now you can see it already display the profile picture so now we are going to add some styles on the wheels so we are going to make some space in between so with creative style is equal to the margin left and 20 so now you can see it already display the profile picture here and have some space now we can try to click the log out buttons and now you can see it already turned to the login page in this part we are going to fix to something weird because when we go to the register and we will type the name and then we press register now you can go to the chat screen but actually you can back to the login screen by sliding back to the login screen and so this is not a very good situations and the other thing is when you go to click on the lock out buttons it is ok to go to the login screens but as you can see we can back to the login screen again by pressing these back buttons so we are going to fix these two things so the first thing is we go to the register screen and then after we successfully registered the users we are going to do the navigation dot replace and go to the chat screen and now it should go to the top the chess screen is the first stack and it will not go back to the login screen so we are going to fix the other things is we are going to the login screen and when we are going to check the off state and if this is signed out we are going to go back to the login screen however the first thing is we are going to check whether there is a back buttons or whether we can go back to the preview screen so we are going to check navigation dot can go back if this is true then we are going to the top of the screen and which is the login screen so we do the navigations dot pop to top and before we test the app i just remember that we haven't at the navigation here because at here we has to use the navigations so we copy this and then we paste here and then instead of replace the chat and since we are going to check the off state at the login screen so it is better to pop to top so it's back to the login screen and if this is already registered or already logged in then it will go to the chat screen by using the login screen and now we can test by go to register and then we type call and then or at gmail.com and then we type one two three four five six and click register and we can see there is an error because i just put it in a wrong place we should not put it in the register function we are going to put it in the log in the register screen so now we can try again by register another people will be dennis and then stand this at gmail.com and then we type one two three four five six and then we click register now it go to the chat screen and when you try to slide it will not go to the login screen and then we can go to the lock out and you can see it will not have a button to back to the login screen in this part we are going to use the give the check and based on this documentation we can just copy the code from these examples and paste to our project after we copy this sample it already can create a simple chat app but it still cannot connect to the firebase but first we copy this code first so we have to use layout effect so we just need to use combat and use state and use effect so we copy this and paste to here so now we can log in to the app first so we can go to the chat page now you can see the avatars and also the chat screen and we continue to copy the functions and also the use effect and also the message so you copy this and paste to here now we still haven't seen the chat but we can now delete this and we are going to copy this and paste to our project and now you already can see the chat and now we can type something for example hello and paste and you can see the message here but this is just located inside this app and haven't been stored in the firebase so in the coming up we will go to set the message and store in the firebase and also fetch the avatars and message from the firebase in this part we are going to set the message and store it inside the firestore so we are going to the firestore and then we click create database and start in test mode and then we click enable and then we go to our project and we go to the chat screen and we are going to change something inside the gift check components and the first is we are going to show avatars for everyone so we go to set the show avatar for every message is equal to true and then inside here we are going to get the email from the firebase to be the id so this is off dot current user and dot email we add the question marks is to prevent sometimes these do not exist and if you go to the documentation you can see the user has the name and also avatars so we back to here and set name and again we get this from the firebase so we copy this and paste here and this is the display name and then the first thing is the avatars and we can get the avatars from the photo url so we already set the user and then the next thing is we are going to modify the send functions and if you go to here instead of just send a message to the local apps and we are going to store it inside the firebase and according to the documentation you can see a message object has id test created ad and also the user so we are going to destructure the message first so at here we set constant and then we get the id the created ad and the test and also the user and which is equal to the latest message and then after we already get this object we are going to store this inside the file store so we use db dot collections so we can check it it already imports from the firebase file and then we are going to stack to the chats collections and then we use dot add and then we press id actually we can copy these and paste to here now we can go to try to send something and we can say hello my name is peter and then press send now we can go to the fire store and refresh to see whether it can be stored inside the file store now you can see we already successfully stored inside firestore we have the user the task ad and also the id in this part we are going to get the message from the firestore so we are going to comment this because we are not going to use the dummy data and we use the use layout effect and then we use the db.collections and we get the message from the chats collections and then we are going to ordered by created add and then we are going to use the descending orders and we are going to check if their new content will be used on snapshot and then if there is new message we are going to use the set messages then we use snapshot dot dots dot map and then we are going to get the id the message and also the user and which is actually equal to this one so we copy this and paste inside here but we are not going to use comma because we are going to get the data and the created ad is also from dot dot data dot created at dot to date and then the test is also the dot dot data dot test and also the user is also dot dot data dot user and then we do not have this returned cleanup and we are going to delete the input and we should delete this curly bracket and we can store this as unsubscribe and then we want to clean up these functions we use returned and subscribe now i already opened this app with another font so we can check with another one for example i'm going to type hi my name is mei and then we press send and you can see i type wrong and now i can say hide again you can see it already displayed here and of course i also can reply nice to meet you and here so now this is how to create a chat app and in this very simple way by using the gift chat

Channel: ckmobile

Views: 8,610

Rating: 4.9272728 out of 5

Keywords: react native chat app, react native, serverless chat app, react native gifted chat, react-native-gifted-chat, react-native-gifted-chat tutorial, react native tutorial, react native gifted chat firebase, chat app, android chat app, react native chat ui, react native chat app with firebase, react native chat app firebase, react native chat app tutorial, ios chat app, ios chat app tutorial, ckmobile, react native chat app ui, react native gifted chat tutorial, real time chat app

Id: DnntmeVPLzc

Length: 35min 48sec (2148 seconds)

Published: Tue Apr 06 2021