Build a React Native Chat App with Firebase Firestore and Expo

what's up guys my name is esteban and today we're going to be building a chat application it's going to be we're going to be using react native firebase firestore and we're also going to use expo and we we're going to keep it simple we we're we're going we're not going to have authentication but you would be able to understand how we can manage firestore data and how to listen to real time updates and i hope you find this this helpful so let me show you what we have here so the initial screen is going to have the is going to ask you for your name and i can type my name here and then i can enter the chat so we have this ui we don't have any message yet and i can have this different device and i can have a different user and we can start chatting so you can see that the message is being listened here and we have the these these the initials of the name we also have the date we also have the details of the date how are you and we should be able to see this meshes message here and we have this nice ui that has all these features it has a ton more features because we are using the library called react native gift dev chat that's an amazing library that has a ton of features and i will link that in the description so you can take a look what was available so now that we i show you the app let's let's start the first thing that we're going to do is we're going to install the expo cli in our computer so we you need to have node.js before trying to make this so make sure that you have that and the thing that you need to do is just npm in install expo cli and we are going to add the global flag so that's going to install the expo cli globally and your computer i'm not going to do that because i already have that installed and after that you're we're going to run the expo init command command and we are going to give it a name so i can say react native chat okay so that's going to be the name of the project we have then this is to choose this option so we can use the managed workflow or the workflow we're just going to stick with the managed workflow and here we are going to start with a blank template so without dice type screw so we hit hit enter and now it's going to install all the dependencies in my case it's going to use yarn because i have yarn in my system but if you you you have npm it's going to use npm to install all the dependencies it can take a little bit so i'm going to pass the pause the video and come back when when it's done okay now that it's done we are going to cd into that project so and now we are going to install the dependencies that we need for this for this project so it's it's really important that you use the cl expo cli to install the dependencies because it's going to make sure that this then install the compatible versions of the packages compatible with expo so expo has this install command that's going to use yarn on npn to install dependencies but it's going to make sure that are the correct ones so the dependencies that we need is we need firebase firebase we also need the react native gift tip chat library so that's the library that's going to give give us that nice ui and we are also going to install a sync storage so this is from the react native community package and this is for storing the user data locally so that's that's the the package that we're going to install for now and i i will come back when it's done okay now that the packages are installed we're going to run the project in development so for doing that we just need to run the expo start command and that's going to have open a new development server and it's going to add a new browser window in this in this in this port so if you open your browser you should be able to see something like this and the easiest way to to open this in a a device in a phone is to use the xbox client so the xbox live is an is an application that you can install in your phone so there are versions for android and ios so you you just can go to the play store and search for export or the app store and you will have this application and the way it works is that you will what for android you will need to scan this qr code and it it should launch your application and for ios you need to create an account and after that you can you can log into that account and you need to publish the the package to to expo and then you can access the application it's a little bit more complicated but well you just need to create an account in export rail for ios but for for android you can just install the client and you should be able to go another way is to use emulators so i have if you have android studio in your computer you have a bunch of devices there you can just click here and it will launch that in your the project in your emulator or if you are in a mac you can also run this in that in ios emulate simulator so that's what i i'm going to do okay i just open the emulator and i just click it here and now it's building all the packages and we should be able to see the initial app that we have from the expo template and there you have it you we just have this simple app that it just has this text so now let's go back to the terminal and well i will close this here for now and i can open the the project with bs code i will open the project with ps code and i will run again expo start here now we're going to set up firebase so for doing that we're going to go to console.firebase.google.com and he there you're going to click click to create a new project so give it and give it the name that you want and i'm not going to enable analytics and it should take a minute to create that project and there you can create a new application so you may think that you you you will need to add ios or android but actually the way it works is that we we use the web sdk for for for when using expo and you can give it the name of i don't know app and after that we have an object that we can we we can use to start the application so now let's go back to our app.js and here we have some boilerplate for react native from react native and this is what we are going to do we are going to import very everything everything as firebase from firebase and we are also going to import firebase slash firefighter store so because we're going to use firestore so we need those those things and here we can just copy this configuration and we can just paste it here so i'm going to change this to accounts declaration and then we can save so one one one thing here before starting is that because because in development we have hot reload this is going to be go every every time we save is going to try to create the create the app that's already there so we're going to add this if close and we're going to say that if we have if fibers that apps that length length is equals to c equals to zero then we are going to initialize the app so this is only because when we are in development we have this fast reloading feature and it's going to try to create the app all the every time we save and we don't want to do that we only want to create that once and because of that we also need to add another another comment here so this is from the expo documentation and because we we are going to listen to every time to to the to the database and at when we mount the components so by default what the live real loading does is that it persists your react state and we want to prevent that so everyone we say if we want to wipe the the react the react state of the component so for doing that we just need to add this refresh state and this will take will tell expo that we don't want to refresh all the we want to wipe the state every time we initialize the app one last thing that we need thing that we need to set up in fire is firebase console is that we need to create a new database and we are going to use the test mode because we are not using authentication so everyone can access if if you want to set up authentication you you want you can start with this one but we are going to use this one for now and then you can choose the location and it will create the database one last disclaimer is that well you for doing this you can use firestore or you can also use the real-time database from firebase but firestore is the is the one that has the most features and is the recommended way of storing data in in firebase but there's a small issue that right now they're there we have like this really annoying warning in only this only happens happens in android and is because of the how the timers work there and there's current no currently there is no solution for that and it's not it's not a breaking change breaking thing that's going to break your app or anything but it's kind of kind of annoying so we're going to ignore that that the thing using this yellow box component from react native and we can add the following here so we are going to just ignore this warning and the warning that we don't want to see is this one we have to pass an array with the string of the warning and this is the one this one about the timers okay now that we have that let's start with the application so we're going we we're going to start with the user we are not actually going to use have a authentication but we do need to have a user and the user is going to be persisted in the in the local storage and for doing that we are going to use use state from react and we are going to initialize the user state and is going to be const equals use state the initial value will be no so we don't have a user at the beginning and then we are going to have a user and i said user function here after that we are going to oh we're we're going to use the use effect hook so the use effect is for doing things at the initial when we first render this component and what we are going to do is we are going to let me set up this hook use effect like this with a callback and because it's the initial call we are not going to pass any depend dependency list here because this is going to run only in the beginning and what we are going to do here we are going to have a function that's going to we call read user and this function what's going to do is just is going to look in the async storage that we have is we are going to see if we have a user so now let's import async storage from from the package that we installed okay let's import async storage from react native async storage and now what we can do here is we can say the following so we can say const user equals and we are going to await we are using a sync function and we are going to wait for a seeing storage that get item and the item that we need is going to be called have the key of user and if we don't have the item this is going to return null so if if we have a user and this user is going to be a json string so we need to parse that the screen is string but we are going to say set user let's see what it when we're going to pass json that bars and we need to parse that json object string and what's the logic is going well say here we have an user but if we don't have a user we are going to add this logic here and we are going to return and here we are going to have the initial form that just that we see in the in the demo so what we need here is we need to grab this in a view and this view is going to have an style so for for now we're going to say style is going to equal styles of container and the container is going to have these properties that we already have with the with the layout but it's also going to have a painting of fairies so we don't see nothing yet but we're going to add more things here so what we also need is we need a text input so i don't know if you remember we have a text input here so let's see if we have we don't have that and we also going to we're going to import the text input for from react native and we also need a button so that's what we need from react native and now let's start with the text input it's going to have a style and we are going to define that style here so we can say input and the style is going to be that is going to have a height of 50 is going to have a wii width of 100 percent of the screen and it's going also to have a border border with of one a bathing of 50 and a border color of gray so that's that's our input and now let's pass that that styles here and we should be able to see the input so we have the input there and we also are going to add a placeholder that says enter your name so we have the placeholder and now we need to bind the value of this input to to the state so we have we declare that state here and what we now need to do is say that where is that here that the value the value equals the the well we have the state for the user but we are also going to have a state for the name so i'm just going to copy this and this is going to have an initial value we are going to add the same set name function and it's going to have the initial value of an empty array and this is what we are going to pass here so the value is going to be the name and once we have we are going to listen to the on text input we are going to pass the set name function here so this is our this is or how we are defining our text input and now we need to add the button so i'm going to add the button here and this button is going to have a title of enter the chat so this is the boot phone right now it doesn't do anything and now i'm also going to add some some painting to some merging to this input so it's going to have merging bottom of 20 so it's a little bit separated and we need to have a handler so the handler is going to be on press and we are going to have this handle press function that we are going to define here and this is also going to be a sync function let's go and handle press and what this function is going to do is going to is going to set the state of the of the user so the state of the user is going to be an object that has an id and we are going to give it this name and this is because this is how his handler is it is handler handled in in the react native gifted chat library and for now it's going to be a really dumb random string but if if you have authentication in your in your application this will be probably will be the idea of your user or maybe you want to have a different type of of random stream but this is going to use just the native apis from from javascript and this is how we can generate a render random string so it is going to be a random string that's going to be for our current user and then we can say that our user equals this id is an object that has the id property that we define it here and it's also going to have the name so the name the name that we have here is going to be here and after that what we are going to do is we are going to await a way to ascend storage that set item and here is where we are going to persist the user into the single storage and we need to create a string of that object because that's how we store things in async storage we need to pass them as a string and then we can change the the user to the current value so there we have it we have the the the i think we have everything here so now if i type here so here we have an issue here so okay i i see the problem so so we this is not the this is not the event that we want to react the event that we need to listen is on change text so this is the the the the event that we need to listen and now if it is not is working so we enter our name and now we should be able to see this because now we should be we are we now have the user in our local storage so if i refresh this we should still have this in or in your application because because it's persist okay now that we have that let's move on to fire fire store and firebase okay so how we achieve this to listen to to real time updates is that we need to attach a subscribe a subscription in our use effect function so that's how we can listen to real time changes and changes in the first time and the way we do this with firebase is we first need to create a reference to the document that we are going to access so let me let me do that and i'm going to declare a new variable called db and this db variable is going to be firebase the firestore function so that's how is this just to access this quickly and now we need the reference to the chat collection so the check chat collection does not exist but it it does not need to be created we can reference that collection even though it doesn't exist so we can say chats ref and here we are going to say dv that collection so that's how we make the reference and well the name of the collection is going to be chats so we just we are just creating the the reference and now we need to interact with that reference and we are going to declare a new variable that's going to be called on on source drive and the reason for this is because we want to when we we leave this component we want to call this function so so the so we we don't have this listening all the time and what we need to do now is use our chats reference and this has an own snapshot method so this this this method is going to be called every time we have a new update in our collection and we can do it by by document also but we are going to do it by by a collection so as a response we have for every time we that the data changes we have a query snap shot the data and what we are going to do with this data with this object i think is an object we are going to react to this to the changes of of the data of course so we are going to create a new variable that's called message message virus firestore and this is going to we're going to use the queries snapshot so this is going to have all all the all the data that's changing so there's there's two ways of doing this you can just listen to the data directly using the talks property or using f4 for each loop for every data that we have but this is going to pick all all the data so if we append a new message it's going to have all the previous messages and and we don't we don't maybe we don't want to do that because if we do that in that way we're going to have a bigger bigger object every time and we also going to have to re-render the components all the time the components of the chat so what we're going to do is we're going to just listen to the dog changes and we can we can and this is going to give gives an object that's going to have what type of change we have so we're going to filter in that doc changes object and what we're going to filter is here we still have the dog changes what we're going to filter is we have this type property and what we want is only the type when it equals the type added so this is a type of change so we have different type types of changes here so you can see that we have modified we also have removed but the one that we want to listen is the when we have a new document in the collection and the reason is well messages that are not are not going to be deleted or modified they're going only to be added so that's what we want to filter and let me practicing another line and we are going to map those those those changes because there's uh there's uh we we need to to change the data in a way that that we want so let me we're going to access here what we're going to access is the dock so we have the dock property inside the changes the dog changes and this is the actual data that the the real messages so what we are going to do here is that we are going to declare a new variable that's going to be called message so these are the individual messages that we have and the message is going to be or talk that data so this is a method that we have that we have inside inside these these dog objects and this is going to give us the data and here what we are going to return and and this is going to be the the actual shape of the of the message so i'm going to explain you in in a bit and the same we are going to spread all the properties of the message so we will here we will have this object we'll have an id we'll have a text that's the real that's going to be the you know the text of the message is going to also have a created ad property and is also going to have a user so every message has a use as a soof collection as of map that has the user and we're going to spread all those properties but the one that we want to modify is the created ad and the reason is that if we are going to save with the date object what firebase is going to do is going to create a new a new timestamp timestamp object from firestore that has of some methods and we need to transform that object so we are going to change that property we are going to say message that created add and this this this new instance instance instance of that class has a method that's called to date so this is going to transform this message created as a property to a data javascript object and and the reason is because at the beginning this is a different kind of object that we cannot do we cannot use in in the in the library that we are using so once once we once we change it the data of how we want it then we are going to sort that data and we are going to sort so it shows from beginning to end in the order that in the correct order so right now we cannot see anything but hopefully in a minute you're going to see what we're doing here so so we are going to sort that data and the third array method has two two parameters so the two items of the array that are going to be compared and here we need to return uh an operation so the operation is going to be the b that created so this is the property that we have here and because now this is a javascript object we have date object we have this get time property and we get time returns a number so this is how then the time is represented in a number so because of that we can subtract that from the a and it's going to have the same the same we're going to do the same here we are just subtracting every every every date to each other so we can sort that so we now have the messages from from firebase and but we need to start these messages in our state so for doing that we're going to create a new messages messages state and it's going to have set messages and we're going to use the use state hook and the initial value is going to be an empty array so that's how we how we do that and where we we could set or we could set or initial well we can do that we can just set messages and it's going to be our messages fire store object so we can do it in that way and we are sending the messages and now we are going to display those messages here and for doing that we are going to use the package that we installed and this one is is going to be this one so we have the gift the chat from react native gifted chat so this is the library that we are going to use that has all the ui that we need to handle the messages and we can display that here when we do have a user so we can just use the this as a component this is actually a component and here we have a bunch of properties that we can mess around but the ones that we're going to use is the messages and this is going to use our state and we also need a user so this is the user that we are creating here this this user that has an id and a name and is already in our in our state and that's what we need and here we here we see this because we don't need to use this container style here we are just going to display and there we have we have that but now we need to send those messages to firestore so for doing that here we have an event that's called on send and this is what we need to do when we are going to send or or message to the backend so we are going to add another async function and it's going to be on handle handle send and this function what's going to do is here here we have we receive a messages array and usually it's going to be only one message but for other cases we can have more than one one message so we are going to treat this as an array of of promises of right promises so so we we're going to say cons rights and this is this is going to be an array that has all the rights that we need to do so we are going to read these messages parameter and we are going to map that to an array of promises so for each message we are going to return a chats that read that ad so this is going to create an array an array of promises that we are not writing right now we are just only creating that array and here we can just say await promise that all and we are going to here we are going to to store those messages and and in here notice that we are using the chats ref that that we declared here so this is how we add data to to firestore it's really simple we only need to to have this method and pass the data and this is going to create a new a new it's going to attach the data to the database here we have an error and it's because we don't are passing this so this is going handles handle send so now if we type here and we click here we should see the data here and and this is working because we are sending the data here and here we have a listener that's going to listen to this change and after that is going to set the state the set message state and here we are reading from that state and that's why we see this here but there's a problem and and and that's what i wanted to mention is that because if i type this again i can type hello the the other message is not being shown and that's because we are just we're just listening to the added other type of of dog changes and here we are overwriting the the the messages only with the current ones so that's what's happening here and we need to handle this in a different way so for for doing that we are going to use a another hook that's called use callback and what this hook is going to do is going to help us to because we don't want to render all all the individual messages when we have another message so this is going to help us to more memorize the state and so we catch the previous state and we add the new estate so we are going to declare a new a new method function that's going to be called append messages and this is going to use that callback phone that callback hook this callback receives a messages array and here we are going to set the messages with the same hook that we use here but here we are using it in a different way so we can have this as a callback and this callback we have the previous the previous state in this case the previous message yes and what we are going to do is we are going to use this give the chat append so we have a method in our library that receives the current message and the new ones so we are going to pass the previous message and the current current ones are these ones that we that we have here and this is going to merge all all the messages in one single array one last thing is that we need to listen to some dependent dependency list here so what's going to be affected by this is only going to be for the messages the messages state so this is what the dependency that we need here and here instead of having this set message directly here we're going to use our new method and here we need to pass the messages the messages are these ones these ones and now if we type we should be able to see everything in order so in order so now there we have it so one one last thing thing is that in our use effect hook we are declaring the unsubscribe methods but we are not attached we are not invoking this this method so what we can do here is we can return and the use use effect method who has this this this way of detaching from from listener is that we need to pass a function this and this is going to invoke the unsubscribe method that we have here so we are just detaching from that and one problem here is that that we have you can see that we have this twice is because i didn't specify this correctly this does not need to be re refresh state this need to be refresh reset yep so this will reset the state every time we save it would make sure to refresh the state so we we can test with a different phone i can i'm going to add an app open a new and you can see that here we don't have a user so i can say another user i can enter the chat we can see the messages from the other user and here i can say hi and then and you can see that we can interchange messages between fonts so that's that's pretty much it guys so you can test this with different phones so you can try to have different an authentication system and have different users but that's that's basically how you can do it to listen to faster real time data hope you you enjoy this video enjoy this video and if you like please like and subscribe and i will see you in a next time

Channel: Esteban Codes

Views: 51,131

Keywords:

Id: E81jfHan8MM

Length: 47min 42sec (2862 seconds)

Published: Sun Aug 09 2020

Reddit Comments

[u/bigboye1]

Saved! I'll check it out 😁