Build a Realtime Chat App in React Native (tutorial for beginners)

something like alex message cam search. I don't think you prepared that icon for me, but that's not the problem. We can export icons and see the message here and I. I think it's something like this if we look here, yes, it's custom, but we could use this one, no, I think, I think Alex prepared, but to me I just don't see it. He even asked her to accept the challenge and continue the broadcast. 12 hours I heard it's now a trend among developers on youtube oh god I don't know I don't know aha I need to be more prepared for that so community icons material message reply text message community icons material import material community icons and here we say icons name message reply that's the name method reply text okay text size 28 and color white color white yes so my voice come on styles uh container styles container uh I won't, let's do it properly until the final styles dot ts import style from

react

native

const styles and export default styles okay here container uh let's import styles here can you do it automatically?

Yeah, yeah, come on, let's do it and yeah, first of all, let's show this new message button to see. it's somewhere uh and that will be on the screen um

chat

room no

chat

screen, this one so after the flat list we'll show a new message button like this and we'll come back and we should see it somewhere here I think. It's shown here, but we don't see it, so the background color will be colors. Light point tone, save and we import colors, save, yes, it's here, eh, but why?, oh no, no, okay, okay, yes, I thought the icon is green, but so with 100 height 100 save oh god come on 50 50 50 50. um border radius 25 save uh align justify the center of the content and align the center of the element to center it horizontally and vertically center save align the center align the elements of the element I think you should do a mini series show with them you can also attract people, just one thought could be wrong.

I love your explanation, yeah, yeah, I'm actually thinking about doing a demo feature like a short two or three minute video and yeah, where I was playing, like what you're going to do. do this but it's actually a great idea thank you very much alexandra uh actually you have my support I would be interested in watching the broadcast yes I would need to stock up on Red Bulls and coffee to have energy until the end Is it difficult? learn ts if you know javascript uh it's very easy to learn typescript because typescript is the same javascript only everything has types so yeah it's not difficult and don't be scared because if you don't know typescript you can write javascript in typescript. and it's the same because after compilation, typescript is compiled to javascript, so yes, align the center of the element.

Okay, one more thing is that we want to show this button here at the top, but we want to show it as absolute position because it should always be on top. the flat list, so the position of the absolute types is the type of the variables, for example, java c sharp and c plus plus are written languages ​​where each variable must have a type, for example, an integer string, etc., but javascript is loosely written so there are no types in javascript basically there are types but they are assigned to the variable when you actually give a value to that variable which leads to it being more flexible but leads to many hidden bugs which they are very difficult to debug later, which is why the typescripts come. to solve this problem and yes, add types to make JavaScript safer to use.

The bottom zero is probably not zero but ten and also ten um maybe even more like 20 20. Yeah, I guess that's good and yeah, as you see with the button. I've set the position to absolute and it's always here above the chats, so now we want to develop a new screen with all the contacts that we will have in our app so we can get started. a chat with anyone who is registered for that, let's create a new screen that will be, I'll copy and paste it from the chat screen of uh, no chat rooms, chat room, no chats, yeah, like that, I'll copy , I'll paste this one and I'll say contact contacts and I'll go back and adjust the code here shortly I'll go to the navigation and add them to the index, I'll add a new screen, where yes, let's copy this one and add a new screen here, this will be called contacts from the component we probably don't need anything here, so the component will be the contacts screen.

I forgot to add the screen here because I like to have a contact screen like the contacts screen, yes, contact screen add import statement name contact uh it's not assembled to write root no I found it right, yes, I have it, so our root browser has root stack parameters and where we define what names our screen can have, so we don't have contacts or chat rooms there yet, so let's go to types, let's look for root stack. browser there is root not found contact and and and what else there was a chat room or something yes chat room chat room also yes right now the red arrows disappeared contact contact okay, so let's close everything okay, now we have our contact screen When we press this button, we need to redirect the user to that contact screen, so for the New Message button, add it to a touch element.

Yes, the opacity will probably be good. One press will be in press, but we will define it in a moment and put it. our view in this touch opacity, so constant on press will be a function and here we will need to navigate, so to navigate we need the navigation, but we will take it from a hook called use navigation and my id never helps me import it. uh and I have to import it manually import use navigation from um

react

native

navigation like from here uh alex from South Africa hi, I remember you also joined the previous broadcast thank you very much for joining and when you press we say navigation dot navigate to the page called contacts save and the styles right now, yeah, let's move them like to put them touch here because the position absolutely is in the container, it's in the view, so we need that to be the root, hopefully, this will work, save, yeah, and if we press , we go to contacts right now, contacts show up, they show a list of chat messages, but the context component is very similar to this, but instead of showing the last message, it doesn't show the last message or the date , so just show the username and user profile, so we'll take a chat list item, copy it, paste it, and rename it to a contact list item.

Correct contact list item in the index, we will rename it to a contact list item. Yeah, let's rename everything from chat to content contact content contact paste it here check the chat list item contact list item and we're not going to get a chat room, but we're going to get a user that it's a user so from types we import user not chat room let's take it here so we don't need anything uh yeah we already have a user come on click shout and click it will be interesting navigate to the room chat with this user and from the view we have here, we will have an image.

We'll have a username, we won't have a message, so we can delete this one from here and we won't have time. We can delete this one from here. Yes, let's see here too. Cleaning up some styles. Time and last message. we've saved uh and yeah probably probably user image yeah I guess that's it that's it let's try to use it on our flat list and see how it looks so contact screen let's go to the tsx contact screen and our flat list uh I think I also have um thanks to alex we have some data prepared for users no no no no here no here in our data here users so let's export the default values ​​yeah and this is just a list of simple users uh and yeah yeah that's good so um on our contact screen instead of chat rooms let's import users users send to the flat list our users and instead of the chat list item we're going to show the item from the contact list, the contact list item, the contact from the contact list item and here, uh, property, not a Roomba user, right, yeah, let's save and yeah, here we see a list of messages, if we go there, we see a list of users and I think this is how WhatsApp is doing with the contact, the only thing it also shows is like the status of a user.

In fact, I can do it quite easily by going to the component contact list item and in the index I'll go to I'll do Ctrl Z until I see this last message and instead of the last message. I'm going to do the user point status and we're going to show the user statuses and right now we can safely delete this time and yeah, let's go back to our styles to return last message, last message, let's just rename it status styles.status and if we save and if we go to our data users and for a user if we add status uh hello how are you uh it will be shown here with the users um yes, I wonder oh yes and on that screen we should not show this icon, let's not forget that close all our contact screen and the new message button we don't need it and because we changed the user type to include the status, we also go to the user to say it also has a status and it's a saved string yeah right now whoo right now I'm probably happy with what we have and that is very ready for next week to integrate it with a backend there are still guys here do you still have powers?

I wonder huh? Is there anyone following me from start to finish, your guys, uh, you better do it because I'm already tired, so if you have any questions, let me know right now because I think I'm done for the week today. so let's take a look at what we built, um, yeah, we need to initialize the project, we set up a header bar that we see here at the top of our application, showing the title, what's up, showing the icons, etc., we show the top bar. browser with all the tabs we see, we don't implement bubbles but we implement the chat list items and here we see all our recent chats we have every time we press a chat item we show the chat page with To that user we show all messages with custom styles based on whether they are my messages or your message here as well as the header with the icons we can write a message and every time we write the message we see the icons changed there and the latest.

It's the contact page of contacts and here we will see all the contacts that are registered in our application and also on the screen in the header with the search icon and the three dots, yes, okay guys, thank you very much for joining, already I'm very tired. I think the hardest part of all the streams is making the exit because like my brain is foggy, I'm tired, but yeah, I want to thank everyone who followed me until the end during the live stream and also all the people that they are following. After the live broadcast, I encourage you to do it yourself and not just watch because by watching you may feel like you understand and you may feel like it's easy, but try to do it yourself and you will learn a ton of new information. uh yeah, you're going to get into some problems that I probably had too during the live stream and try to solve them.

You will have more time. uh you'll try to invest in Google, that's how you really learn by doing. stop following all the

tutorial

s that you are following right now on Udemy or any other platform, like start creating something that you can use and then you will learn much faster and much more effective, and yes, don't forget to join our discord group. uh link in the description uh where we can discuss about our

build

s uh let's

build

everything together because yes we are a community let's help each other if anyone has problems let's write in the discord chat I will try to help everyone but yeah yeah I don't have time, you can do that in the community and help each other and I will really appreciate your help and yeah, if you haven't subscribed to the channel yet, hit the notification bell because there's a lot of new stuff.

Content will come in the future. I'm planning to do it in addition to this live stream, but I'll continue doing what I enjoy. I will also make some short videos on very specific topics, also like

tutorial

s on react native for

beginners

and not only. I have one I'm editing right now, I'm super excited about it. What else? What else? Yeah guys, I think that's it. Thank you so much. All links in the description. Take care of yourselves, drink water, and write clean code.