Build a Realtime Chat App with React Native and Firebase | Tutorial 2023

hello everyone and welcome to code with Beto in this video we are gonna learn how to create a real-time chat application using react native and Firebase as a backend as you can see we have the demo of what we're gonna be building today we have authentication so we can login into our application if I press this chat icon we're gonna be in this beautiful design chat application and the design is provided for for this package called give to chat and it's very similar to the messaging application for iOS devices the Native Messaging App and we can send a test message as you can see right there of course we have um stored all these messages in Firebase we can sign out as well and if we try uh to sign in with the wrong credentials we're gonna get this Firebase error that says that the email is invalid of course and we are gonna get the same error if we try to sign up with the wrong email all right so now let's test this with another device just to see that we have the real-time functionality working properly I'm gonna log into these two different accounts that I have and if we go to the chat screen on both devices and if I send a message from the iPhone SE from from the left side we can say hello from iPhone SC as you can see on the right side we get the message instantly which is pretty nice and this functionality this this functionality is um super cool and you can integrate it in your application super easily as you can see through this tutorial all right and if I reply from the right side you can see in the left side we got the message and please don't pay attention to the pictures those those are random pictures you can change that of course this design was provided by Echo development Studios Eco Studios it's a digital development Studio that can help you with your Project's design and you can go to their app their website I'm gonna leave it down here in the description and if you are interested on them and if you need of course a design or something please go to their page now let's start with this tutorial we are going to start by creating the project and the first thing that I want to do is to move this phone to the right and bring my terminal so I'm gonna use my item that I have here first thing we are gonna need a new project using Expo so we can run Expo init chat app we are going to choose the blank template and let's wait until the dependencies are still once that's done we can access to the carpet that we just created and open that on Visual Studio by running cold Dot once we have our project open in Visual Studio we can run our application and just by typing Expo start all right we can open this application on iOS by pressing I and as you can see our app is running just like that now let's start by installing dependencies the dependencies that we're going to be using uh it's gonna be navigation because we want navigation in our application so I'm gonna say turn at react native react navigation stack navigation specifically and react native give the chat once that's installed we we also gonna need some more dependencies because we're going to be using Firebase remember we're going to need Expo constants just to keep our keys uh secret if you're gonna be uploading this to GitHub uh we're gonna we're gonna be using Expo constants as well as dot amp react native gesture Handler and react native screens react native safe area context and um lastly mask View and these dependencies are pretty much just to have the navigation and Firebase dependencies working properly that's why we need to install all these dependencies but yeah so hit enter and once these things are installed let's create a Firebase project so I'm going to go here to Firebase console and in this console we can start by creating an account if you don't have one already I already have my account so I'm just gonna go directly to my console here as you can see I have this chat app already but you can create a new project by pressing add project right here now let's give it a name this project of course you can name it whatever you want for this tutorial I'm gonna say chat app tutorial and hit continue I'm gonna just turn off Google analytics for this project you can leave it on if you want and after that we can press create project this is gonna take a couple of seconds let's wait for that and there we go it's it's ready and we can start integrating authentication we can start saving messages and all that all right make sure that you are in this project that you just created and now that you are here you can just go to the left side and choose authentication for example and let's enable authentication for this project we just have to press get started and here we can choose a provider or a sign in method for our application as you can see we have many providers both for this tutorial we're going to be for the sake of this tutorial we are just going to be using password and email so I'm going to enable this and basically here we have a basic description that says that this is going to allow users to authenticate with email and password all right here we can send an email to allow passwordless sign in as well but for this tutorial we're gonna be just leaving the email just like that right so I want to hit save for now let's wait a second and that's it we have enabled email and password now we can connect our react native application to these back-end project that we just created we are going to go to Project settings and here we can simply scroll down and because we are using react native for this project we need to connect like it was with for example right because we have these options for iOS Android native but we're going to be using web so let's press web and register our application right here you need to put a name for your application I'm just gonna say my um for example I don't know my chat app and hit Register App right now after a second we're gonna get this configuration that we need to connect our react native application to this back end so be careful guys don't share this case with anyone because they can use them in their project and you're gonna be charged for whatever they used all right for this tutorial um of course I don't I don't care if you see them but be careful especially if if you're gonna upload these application or this project to GitHub okay so now that we have the configuration that we need we can go back to our project and connect the react native app to this backend one way to keep your keys secure is using environment variables so in this project I'm going to create a new file dot amp and here we can place all the keys that we got from Firebase all right so you can just replace whatever you have in your project for each key once we have these keys I'm going to change my app.json and I'm going to remain rename it to be app dot config dot um Js so just delete the dot Json and add Dot config.js all right so we're gonna do this in order to use the environment variables that we just create so I'm gonna import up here dot amp remember that we install dot amp at the beginning of this video in our dependencies so import.eb dot end slash config and in this object that we have here we can export the default and down here we are going to add the environment variables that we just created so let's first start by saying export default and down here we're gonna paste this extra variables accessing them using process.m dot APK dot our domain Etc all right once we have that we can create a folder called config and inside this folder config we are going to connect our application to Firebase so I'm going to call this five Firebase firebase.js here we're going to initialize the application remember that we already installed Firebase so we are going to import that from Firebase and check or pay attention here in the Firebase config we are bringing in all our configuration from the constant dot manifest dot extra dot name of the key in this case API key Alpha domain project ID and all the variables that you pasted in your app config.js right finally we have to initialize the Firebase application initialize we pass the configuration Firebase config as you can see down here and we are going to be using the database and the authentication that's why we are in exporting authentication and database and we are importing as well the methods get out and get firestore now let's start with the firestore database I'm gonna go back to my project here in Firebase I'm gonna click continue to console here and here in the console we can go to the left sidebar and hit a cloud firestore and let's create a database for this project so I'm gonna click here in here uh it comes an important thing you can start your database in production mode for for the Simplicity of this tutorial we are going to start this in test mode that the file security rules for test mode allow anyone with your database reference to view edit and delete so you have to be careful right and of course that's only for 30 days if you are ready to be in production uh you have to you can just select this uh the first option but in this tutorial we're gonna go easy with start in test month now we can continue and here something important after you set this location you can now change it later so I would I would uh recommend that you choose a location that is more close to where are you located in this case I'm gonna just use the default that we have here that is U.S Central once you have the region for your database you can click enable now we have to wait some seconds until this is finishing setting up once that's done we're gonna get this screen and you can do more configuration but you don't need to do anything we can just start writing some data in our database so let's go back to our project and let's start by creating the navigation and screens that we're going to be using for this application I'm going to start by creating a folder called screens inside this folder I'm going to create a file for each screen that we are going to have so we're gonna need a screen for the chat and we're gonna need a screen for the home screen so I'm going to call it home.js once we have our screens we can create another one for the login screen of course and I'm going to create another one for this sign up screen of course I'm I'm not going to be adding like a forgot password or or reset password or something like that we're gonna be for the Simplicity of this tutorial we're gonna be using just sign up and login now let's start working in our chat we're going to start by importing react from react and give the chat that's another dependency that we installed at the beginning of this video and this is going to help us to create the chat super easily let's export default this component I'm going to call it chat just like that and return we are going to return gifted chat perfect now let's go to our app.js we can delete these Styles we are not going to be using them and this default text that we have here all right I'm going to delete these Imports that we don't need I'm going to import react from react and import navigation container from react navigation native as well we're gonna need to create a stack Navigator so we need to import a stack navigator from react navigation stack and finally I'm going to import my screen chat so in here in this app component we are going to manage the authentication of our application so here is the perfect place to create our navigation and then depending on the on the authentication of the user we can send them to the login screen or the chat screen if it's already authenticated so let's create a stack say incons stack equal to create stack Navigator down here I'm going to create a component for my stack my chat stack I'm going to call it chats chat stack and this component is going to return stack dot Navigator astack.navigator and inside this stack.navigator we are going to have just the chat screen like this we have to specify the component remember that we are importing it up here now that we have the chat stack down here I'm going to create another component that is going to contain my root navigation and I'm going to call it root Navigator inside this root Navigator we need to place our chat stack and if you want to add more navigation you can add it here inside this navigation container now this app can return this road Navigator if the user is authenticated and if the user is not authenticated we can send the user to the authentication screen all right so now we have the row Navigator just like that and we can start the project again just to see if this is working I'm going to say Expo Expo start right I'm going to refresh my iPhone here to the right if we press command Ctrl C we can open the tools and then reload the application all right so it seems that it's working we can see that we have the chat and we have this input because we are using the gifted chat library for this screen so now we can just start using it just like that we don't need to do anything we don't need to create an input nothing just um add the component and that's all we need perfect so now we need to add the authentication right we don't we don't we don't want the users just to compare to the chat so in order to do that I'm going to create another um I'm gonna bring my assets for my authentication screens my login and sign up so I'm just gonna drive and drop this back image that I have from my design remember that you can get this design and code if you go to code with better dot Dev slash project you can search for chat app and you're gonna find this project you can download if you want it and just copy the images if you if you want to use it like that or you can just clone the design all right so for the login screen I'm gonna import react use State a bunch of things of react native like text view bottom text input sign in with email and password that's very important and we are importing that from Firebase Authentication and out remember that when we create our configuration here in Firebase we export as a const out so we can import that out here inside of our login and we can import as well or back image that's the one that I just in Drag and dropped perfect now that we have all we need for this login screen I'm going to export this component default as well and I'm going to call it login and I'm going to delete well I'm going to leave this navigation just like that we're gonna use navigation here so we can extract that from the properties now I'm creating here two variables using user State the first one is going to be for the email and the second one is going to hold the password and I'm creating a on hand login this function is going to help us to authenticate the user with the email and password and check that we are passing the authentication from our configuration that's one of the parameters email and password and this sign in with email and password we are importing it this method from Firebase authentication this is a promise so we can say then whatever we want to do after the user is authenticated for example here we say we are saying console log login success and then the catch indicates that we have an error we can just put an alert that says login error and show the error to the user finally I'm going to create my return inside this component login and for that return we're gonna we are going to create um the inputs and the text for um the the screen right so I'm just gonna paste these styles that I already have here pretty much simple Styles just one for the container the title subtitle the image um white sheet and um you're gonna see how that looks in a moment let's first start by creating a view inside this return let's start with our image I'm gonna use this back image that we are importing out here and I'm going to add the container style in this view that we have down here right note that I'm adding the style back image to the image now we don't we can't see this now because we are just rendering the chat inside our app component so let's start by importing this uh login screen now just to see how the login screen looks I'm going to change this screen for login for my component login and if I hit save we can see that we have the image that we are uh working on here in this login component so let's let's just leave that like that for now just to see what's going on with our style and let's finish this screen we're gonna save you Styles and I'm going to add the style and white sheet this white sheet the what it's doing is just creating this nice rounded View background and it's this design it's this class that we have down here all right so now uh inside this view we want to create a safe area View and inside this save a review I'm going to create a text that says login adding this style dot title let's create another text with the style title as well that says password perfect it's looking good it's working now let's add the style for this safe I review that says form this is gonna put the text down here and now I'm gonna delete this password for now and um just paste this text input that that I already have here as you can see just Basics takes inputs from react native I'm adding the styles.input for each one of those and the important thing here is that we have these settings that says Auto capitalize non keyboard type email address and for example in the password we have the secure text entry equal to true we are adding the value of the variables that we are declaring up here using use state from react and on change we are updating those same variables that's basically all we need if I hit save now we can see that we have these nice uh text inputs and the login just like that now we need a button to activate or to to log in whenever the the user is ready to log in so for that I'm going to use total opacity I'm going to add the style dot button to the structural opacity and on press I'm adding the on handle login which is this function that we create up here the text is just a simple text that says login and the button looks like this in this case we need another button to navigate to the sign up screen so we can simply duplicate this touchable opacity or we can create another different style if you prefer but but for the Simplicity of this tutorial I'm just going to create this virtual opacity that says sign up like this we are asking if you don't have an account then we are creating a touchable opacity and inside this social distortional opacity we are putting sign up in Orange right perfect so now if we sign up we should navigate to the screen sign up as you can see here navigation.navigate sign up but of course we need to make some configurations to our navigation in order to this to work for this to work so in this chat stack I'm gonna set screen options equal to header shown false now we have this nice view perfect now I'm going to create another screen or import my sign up screen and just to see how it how it it's going to look I'm going to do the same thing that we are doing just change this for sign up and we can hit save but first we need to add something here inside up so I'm just gonna paste pretty much the same thing that we have in our login screen uh same image same everything just changing the text for sign up and instead of signing with email we are importing creating user with email and password from Firebase authentication important important thing as well we are changing the method creating user with email and password this function it receives the same parameters which is the authentication from Firebase email and password and we are just making a simple check if the email is different than empty string and the password is different than an empty string right everything else it's pretty much the same thing we are checking if we sign up success we are going to put that in the console otherwise if we have an error we're gonna put an alert with the error change the text add the function to the button sign up and this login in this case we want to navigate to the login screen because we are in the creates create account right in the sign up screen perfect so now we can see that our screen is looking good once that's ready I'm going to import my home screen as well and this is the time when we validate if we send the user to the home screen or if we send the user to to the sign up screen right so in my home screen I'm just going to paste this very simple component I'm using this cat image for my header and I'm I'm basically changing my header here in this use effect using navigation dot set options the hook navigation and for the header left I'm using a font awesome and for my header right I'm using my image of the cat all right so now we just have to return this touchable opacity which is just a button which is gonna take us to the chat screen and um we are using this icon and typo for the chat icon as you can see pretty pretty simple Styles down here you can pause the video and copy those Styles if you want I'm going to create another file for my colors I'm going to call it colors.js and inside is colors.js I'm going to paste this color that we are going to be using uh for for this design all right as you can see it's just a primary grade medium gray and light gray when I hit save let's go back to our home screen and we are using these colors colors here so let's import them and we are using these colors in the font awesome uh icon and the text perfect so now let's start by creating the navigation flow back in your app component here is where we want to check if the user is authenticated or not okay so let's start by importing uh view from react native and activity indicator here we're gonna use another method from Firebase which is called on authentication chains basically it's a trigger that is going to let us know whenever the authentication or the state of the authentication of the current user changes it's called on out State change from Firebase authentication as you can see and that's pretty much all we need to create this functionality I'm going to create a uthentication context so we know whenever the user is authenticated no matter in which screen we are and I'm going to create a context using react context the hook create context called authenticated user context right just like that now after we created our authenticated user context we can provide this context or or use this context to save the authentication um to create the authentication provider right so I'm going to say authenticated user provider it's going to take a children and inside here we we want to keep the information of the current authenticated user right so I'm going to return just a very simple component that is going to wrap with the authenticated user context provider the children or whatever component that we want whatever component that we want to have access to the user we are going to pass the value which is going to be an array we're going to pass the user and set user functions like this um which is an object sorry and inside we're gonna place the children we're going to close our component just like that and we can just close this authentication authenticated user provider context now we can use these context to check if the if we have a user or not perfect so let's go um down here into our chat stack for example and change this stack screen to be home and after that we're gonna add the chat screen because we want to navigate from home to chat right so we need to add that to this to the chat stack and in this case we want to to see the header of the screens right let's just Define the default screen options to be home so we get to the home screen whenever we sign in or whenever we navigate to the chat stack the home screen is going to be the first screen that we're gonna see and then from there we can navigate to the chat screen perfect now we can create another uh stack navigation which is going to contain my authentication my out screens I'm going to call it out stack and we can simply copy all the the chat stack that we have up there and just change the screens as well as the default screen in this case the out default is going to be sine sign in which is login sorry and now let's say start screen equal to login and stack screen equal to sign up those are the two screens that we are going to be using for our teeth or for our Authentication and now that we have these two stacks um Stacks containers we can simply jump between them depending on the user authenticated authentication state so we can use the context authenticated user context like this using the hook just use context and we are extracting the user and the set user function that we are providing as value in this context so now as you can see up here this is our context so now we can simply use the information of the context to see if we have a user or not now let's say loading set loading uses State equal to true because at the beginning we want to check if we have a user node and while we are checking we need to provide some feedback to the user so we are sure we are going to say that it's loading right so now in this use effect we can check or subscribe to the event whenever the user change the authentication State on out State change as you can see we need to provide the authentication as well as pretty much same thing that that we did with the um with the out like this in our screens authentication so let's pass the authentication and this is going to return an observer right this is gonna be a callback function called async authenticated like this perfect and this is going to let us know if we have an authenticated user or not in the case that we have an authenticated user we're gonna set the context of the user equal to the authenticated user information that we are receiving here in this subscriber otherwise if we don't have anything in the authenticated user we are going to set the user to be null like this after that we're gonna set loading equal to false because remember that we initialize it initialized it to be true so whenever we finish checking if there's a user or not we're gonna set loading equal to false now we can close this use Effect one important thing guys it's to clean up saying return unsubscribe like this this is a function cleanup whenever the component is unmounted um it's gonna delete this subscriber this subscriber function now another important thing is to add this array of dependencies in this use effect add the user because we want just to run this user effect whenever the user changes or or the first time the component mounts if you don't add this array you're gonna end up using or all your um you're gonna end up making a lot of calls to the database and it's going to cost you a lot of money oh okay so now if it's loading we are going to return the LT we want to return the activity indicator saying that it's loading right and now in this return we can simply check if we have a user we are going to send the user to the chat stack otherwise if we don't have a user authenticated we're gonna send the current user to the sign up screen so I'm going to say user in the case that we have a user we're going to send them to the chat stack otherwise alt stack so that that is going to look something like this I'm going to delete this and this it's looking good I think this should be working at this point and basically the only thing that we're doing is just using the authenticated user provider all right okay here we are not using this authenticated user provider so in order for these to work we need to add this provider to our route application right so we just need to wrap this app with the context so we can say here return and we can add the authenticated user provider this way we secure that everything that we are using from the context inside the real Navigator is going to be access accessible because we are using this provider right we are wrapping the root Navigator inside this provider now if I save this I'm gonna get this error because I forgot to return this out stack so we can just simply add the return inside this authentication stack and hit save as you can see it's working at this point now we need to hide the header in the authentication stack right we can go back here to the stack Navigator and say screen options and inside here we can say header shown equal to false we can navigate from screen to screen and from sign up to login perfect now we are going here because we don't have a user at this point right so we need to register a user so I'm going to create a user called test at outlook.com I'm going to create a password and press sign up all right if you see the console down here we can see that says sign up success which means that we're already authenticated a user that that easy so that's why we are now in the chat stack of their navigation we what what we did was create a new user with email and password as you can see here this method we pass the authentication we pass the email we pass the password and then the subscriber this function subscriber on out State change triggered a change that's why we set the user to be the current authenticated user and that's why we are no longer seeing the the sign up screen but instead we are seeing the chat stack screen now we can go back to the cloud firestore or the Authentication in the Firebase console and you can see that we have this user authenticated it has a user uid and you can see as well the provider in this case email now we can move forward for to add the Firebase data or the messages all right so I'm going to create another I mean I'm going to open another simulator just so we can see what's going on and in this device I'm going to create another account so let's wait a little bit until this is finished loading don't worry too much about this warning it's it's uh Firebase baggage warning anyway so let's create or let's try to sign in and we are going to get this error let's try to sign up I'm going to create a I'm going to use my um email.com sign up uh let's wait for a little bit and as you can see sign up success we can of course add another loading screen because that was like um we don't know what's going on for a couple of seconds but if we go back to the Firebase console you can see that we have the The veto medano user that we just created perfect so now we have two users using this application and the authentication is working properly now we only need to add the messaging functionality that is going to be the last thing that we're going to be doing and as you are going to see it's going to be super easy okay so we are gonna go back to the chat screen and in this component we are going to start by importing all the things that we are going to need in order to create or in order to write in the database of Firebase we're going to be using a bunch of hooks from react use callback use layout effect use effect and if you are not familiar with these hooks don't worry even it's super easy you can just see here making hover for example in use layout effect it's a signature it's identical to use effect but these use layout effect it's gonna help us to run code before we render something into the screen um you're gonna see why we need this in in a moment pretty much all the time we use this is for rendering stuff like rendering a header or something like that another hook that is not very famous it's the hook use callback this hook you help us with returning and memorize memorize value so that we don't have to compute the same expensive function twice and we're going to be using as well from Firebase firestore collection ad talk order by query and on Snapchat and you're gonna see why we're gonna be using this in a moment but of course if you hover over this properties you can see what it does for example document snapshot triggers events which is going to help us to refresh the screen whenever we got a new message all right we're gonna need authentication as well we're gonna need database from our configuration from our Firebase configuration file we're gonna use navigation we're gonna use as well sign up from Firebase and a couple of icons and the colors that we defined at the beginning now let's start inside this component by creating a messages array using user state from react now let's initialize the navigation hook saying const navigation equal to use navigation down here I'm going to create a function called on sign out and here we can just we can simply say send out sign out passing the authentication from Firebase and in the case we have an error we can say dot catch and put that error on console and now we need to render a button uh in order to see um to add the on sign up function right so that's why we're going to be using the use layout effect um we're gonna change the header of this screen in a specific so let's let's say it's it's pretty much the same thing as use effect from react but it's going to render whatever we put inside before we show anything to the user so I'm gonna use the hook navigation to set the options from this for this header and this header right is going to be attachable opacity this is just a simple icon that I'm importing from and Design and whenever the user press this icon we're going to sign out the user these use layout effect it's going to take an array of dependencies as a second parameter as you can see and we are going to add the navigation to that array whenever we change the navigation we want to render this use layout effect and once the component is mounted as well we want to run this use layout effect now we are going to be using a use layout effect as well and these use layout effect we can have many use layout Effects by the way this use layout effect is going to help us to reference the collection of data from our Firebase firestore so we're going to be using this collection methods that we are importing from Firebase so let's say collection and as you can see here this is the instance of the reference of the collection of the specific uh Firebase backend right specific database so that's why we need to pass these database config that we are importing from our Firebase config file now let's let's pass the name for the collection because we don't have any collection at this point we can just simply write one and if we don't have that already saved in our Firebase console uh Firebase automatically it's gonna try to um take it from there all right so now let's let's declare a query I'm gonna say cons Q equal to query we need to pass the collection reference to this query and now um we can specify things like order by in this case we're gonna order all the messages by the date that they for that they were created and as well we're gonna order them in descending order as you can see here as the second parameter we're saying create at this and Order descending order perfect and this is gonna run before we show anything to the user as well all right so cons unsubscribe we need to unsubscribe we're gonna be using on Snapchat that is um basically a listener it's an observer whenever we have something new in this query or this um collection where we can do something we can run some logic so inside this function I'm going to say console log snapshot and we can put in the console uh whatever we want I'm just gonna say snap Snapchat at this point and I'm gonna set my messages because whenever this runs it means that someone sent a message so we can update our messages the messages is gonna come inside this snapshot um variable that we have here so we can simply say snapshot.docs.map this is going to be an array and for each DOC for each message that we are receiving we can do whatever we want with this data the structure of this snapshot is gonna look like this it's gonna it's gonna have an ID and we can simply add this to be dog.id created add and this format that I'm creating here like underscore ID created at it has to be like that in order to to pass it to the gifted chat because the gifted chat needs these um data to have this specific format so that's why we need to add it like this right so now that we have these messages in this specific data structure we can pass it to the gifted chat and the gifted chat is gonna use it just like that we don't need to do anything just pass the array of messages both with this specific structure which is underscore ID created add text and user as you can see we are getting all those data from the dock that we are um it getting from the snapshot and we are running this use layout effect just once of course don't remember to unsubscribe and if I hit save now I'm gonna get this error because um I don't know why I'm gonna just leave that error for now and I'm gonna create another function which is going to be called on synth on Sand we're gonna use callback and this is going to help us to memorize the messages that we already had so we don't have to re-render or compute everything every time we send a message right we we're just gonna add this message to the messages by saying send messages and updating right away the state by accessing the previous messages like this and then accessing to give the chat dot append give the chat has this method called append and we can append data in this case it's just one message that we are sending in this case in this function so we pass the previous state plus the messages now we can this structure this structure from messages at the position 0 like this remember that messages is internally so we are going to grab the first message which is the the one that we just sent and we're gonna add it to the Firebase database so we can say add doc add Doc is going to take a collection and collection is going to take the database and the doc okay we pass the format we are specifying as well which table in this case is going to be chat and we pass the ID created at the text and the author or or user who sent this message now we can close these curly braces like this we need to put this empty array because we are using callback and now we can go here to the gifted chat um return and we can simply pass the messages and the function on send what do we want to do whenever the user sends a message we can send set the messages to be um on send like this we're getting the message in a callback and then we are sending it right now we can say user it's going to be equal to underscore ID user dot email we are accessing the data of the the authenticated user that we have so this way give the chat knows which messages rendered to the right and blue and which messages render to the left and gray we can specify the Avatar as you can see this is going to be a random Avatar and I'm pasting this link here and now let's try to fix this error if I go here to my use layout effect as you can see this is wrong we don't need that ref we just need to say collection order by now let's go back to the chat and it's working perfectly nice now we can just try to see if this is working I guess it seems that it's it's pretty all at pretty much all we need in order to have this functionality working uh give the chat as well I invite you to check their documentation because they have a bunch of properties that you can add here and a lot of customization we can as well change the messages container style I'm gonna say background colors white because I want it to be white but you can change it for whatever you want now let's try to send a message I'm gonna just write some random things and press send and as you can see we have this real-time functionality and I'm gonna go ahead and enter to the chat screen in my older iPhone and we we are going to see that we have this message so as simple as that guys let's try to send a reply from this device hit send and we have that real-time functionality we are getting the message instantly in the iPhone 13. as you can see guys this is super easy to implement it's not that hard and because we are using gifted chat we are showing the messages super quickly we are we we do not have to worry about um about the style about who's sending what and all that we just have to pass the array of messages to the gifted chat component and they give the chat component it's gonna handle everything now let's go back to Firebase uh console and as you can see we have here in the collections the chat Collections and each collection or each document it's a message that has these properties and you can pretty much see exactly what you have in your database and this is pretty much all I wanted to show you guys um remember if you want to download this project or the design for this project go to codewithpet.dev and you can check out this project don't forget to like this video give a leave a comment if you want and I'll see you in the next one thanks for watching bye

Channel: Code with Beto

Views: 90,737

Keywords: chat, app, react native, firebase, authentication, beginners, firestore, tutorial, chatapp, realtime chat app

Id: Ov3Z3vD5zFw

Length: 55min 24sec (3324 seconds)

Published: Wed Nov 02 2022