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

hello everybody how is it going welcome to a new stream where we are gonna build a real-time chat application in react native um yeah thank you everyone for joining thanks for the late support that your guy is showing for the previous builds we if you didn't see them uh we built on this channel already instagram twitter and spotify uh everything is in react native uh deployed on aws with backend as a service that aws provides and yeah everything is is working and you guys seems to get a lot of value out of it so let me know in the chat if everything is okay if you can hear me well where are you coming from i'm really interested because every time i'm doing a stream people from all around the world are joining so that's really motivating and really nice so um yeah for for the new people like why i'm doing that uh i'm doing real-time builds because uh in my opinion practicing and actually building an application is the best way to learn a technology even though sometimes it might be frustrating or hard or something like that but following along with me and building it yourself will you will learn a lot of information and you'll get a lot of experience out of it and at the at the end you can put this uh build this real-time chat application in your portfolio and show to your next recruiter that you already built something meaningful not just some udemy tutorials someone is asking is getting posted as a video after i can stay long enough to go through the whole thing here from ireland hello eugene from ireland yeah of course this is gonna be uh as a video on this channel after this live stream it get getting processed like in a couple of hours and you'll be able to watch it later gyros first time here hello welcome welcome thank you very much for joining so guys um yeah lately a lot of people are uh writing um personal messages to me the dms and i can't uh get a response to everyone so sorry for that not just it's not just that i'm ignoring you um yeah i'm a bit pressed on time i'm also working at my startup i'm finishing my university and i can get back to everyone so that's why guys i opened a discord channel where we all can get together and chat and discuss ask our questions so please check out in the description down below the video you'll see the discord invite link and i can't wait to see you there i will try to to set aside like one hour per day where we can chat i can help you if you have problems with builds but most importantly i want to build a community around this so that everyone will help each other because if you are getting into a problem there is a high chance that someone else got into the same problem and i could help one and valvers will solve the problems where you can help each other and yeah that's that's how how we learn and um i'm really enthusiastic about this community and we'll see where it goes so you're welcome guys uh to the discord channel alex alexander already joined the discord channel thank you very much uh alexandra was the first one joining with this court challenge channel hello kenya from kenya so um yeah it seems that everything that was important was said that means that we can get into the build so what are we gonna build today as i said we're gonna build a real time chat application uh in react native and we're gonna do that based on the whatsapp ui uh because i thought that all the chat applications look kind of the same and i just want to show you the technology and how to build everything and regarding the design you if you want you can continue and customize uh the application based on your design and i'm really looking forward to see uh how you guys customize these applications and how you go into more depth and create something bigger that i'm showing in these live streams so yeah share that on the discord channel and i'll give you feedback so for this build uh what technologies are we gonna use so first of all it's of course react and we are gonna uh use also expo sdk uh yeah that's an awesome tool uh on top of react so if you're not familiar with xbomb um yeah don't get don't be afraid it's nothing more like at the end of a day we are still writing react native uh expo just gives us some very useful tools specifically for getting started starting and that's why i chose expo in this live stream because it's much easier to set up a project bootstrap it and get to work really fast and also they provide a lot of cool libraries and much more pros that i can explain here so definitely check out expo if you're not familiar with it we're gonna use typescript and typescript is the same javascript uh but with types uh it's but it's typed javascript so yeah i'm using typescript because yeah that's web kind of a industry standard it's uh your code is much more reliable than writing uh pure javascript so if you're not familiar with typescript again don't be afraid because it's the same javascript and if you don't know typescript you can write the javascript and it will work it will show you some red warnings but it will work so don't be afraid of that and also we are going to use react navigation for the navigation uh what about the backend the back-end uh we are gonna use aws amplify which is a a great tool for from amazon web services uh which provides um access to a lot of uh services from aws that helps us uh build and deploy really fast mobile and web applications so a couple of services that they provide that they can give you as an example is aws appsync which um enables you to create uh apis in aws uh rest api and graphql api and we're gonna use a graphql api for for our build it also gives you access to s3 which is a storage service to analytics to authentication yeah that's a very powerful one aws cognito and it gives you um authentication flows and pre-made authentication components so just by installing it and writing probably three lines of code your app is protected by authentication where user can sign up log in uh forget password reset their password receive everything on email and so on that's what i love about aws okay with that said um let's have a look what people are saying uh hello from india hello hello what time will be starting bro yeah we are starting now hi borja welcome welcome to the stream uh someone is asking yeah a very important question will it be only front end this week's episode yeah uh usually i split my builds into two episodes in the first week we're doing only the ui and prepare everything uh yeah from the ui from the front-end standpoint and on the second week we are building the back end and we integrate it with uh with our ui that we have built and this week is uh no different today we're gonna build the ui of the whatsapp based on whatsapp application and the next week we integrate it with aws if you can hear the dogs yeah say hi to them they're outside always here to to bark and cheer me okay guys let's get started so um to get started first of all yeah of course install expo sdk you will find easy instruction on their website how to install and set up everything and after you install it let's go to to a folder that we want and here let's run expo init what's up clone what's up clone this will ask us uh will give us as a choice some templates and this template is like the bootstrap application that is going to generate for us and i'm going to use tabs with typescript and this will make sure that our application contains a simple tab navigation and this will ensure that the application already has react navigation installed uh it's everything is set up and in short like you will see how it looks from from the get go thank you borja thank you for everything yeah we wait um a couple of seconds until the application is generated let's make this smaller we'll need it a bit later yeah it's installing javascript dependencies okay come on let's go yeah uh the project is ready uh then we will close our terminal because we're gonna open the project not in xcode but in our idea of choice in my case that's webstorm you can use vs code if you're using it if if you are used to work with it i prefer webstorm for all the features that they provide okay let's open whatsapp clone here oh yeah let's make this a bit smaller so you can see okay i think you can see it pretty well okay the first thing um let's run this project and see what expo initialized the application with so we will run yarn start and this will start the development server why don't i use vs code just personal preference and i really like all the um [Music] ide is provided by jetbrains so yeah that's what i've been using so uh our server started and it should open a browser window and from this browser window we can run our application on android device or emulator or we can run it on ios simulator so our application will run on both platforms i just choose to to work with a ios simulator but if you have uh if you're working on a windows machine and don't have a ios simulator it's perfectly fine to go on and run it on android even device or emulator whichever is open like or connected to the pc so i will go and run on ios simulator and yeah starting the metro and here it will open the expo application hello master jim how how are you doing and yeah down below here we see like 39 like it's loading it's building the javascript bundle and shortly we'll see our generated application let me make it like this how do you like that no no no no hello there friend hello so here is our application that has been generated and it has two tabs tab one and tab two and we can navigate from two of them and we can see the header title of the page is also changing from tab one to top two the same as the content of it so everything uh is generated with react navigation and some tabs that's uh that would be really helpful for us uh because we are also uh need something like that uh a bit on the project structure uh so the most important folders i don't know like assets is the folder where we keep the phones and images um components is our folder with all the shared components that we're gonna use throughout the application in multiple screens more about that uh shortly constants here we have some uh global constants of application for example callers or fonts that we want to reuse and that that we can easily change layouts and so on uh a folder for our hooks um then the navigation and here is all the navigation on all declared and the last one important is screens here we'll declare and we'll create our screens that is going to be used by the navigation so yeah that's about that let's go on and start implementing our application so first of all we will start with the navigation and set up everything to be ready with the navigation so the first part is we want to display this ha this green header with whatsapp and search and free dots icon um to the right currently we don't see we see a title but this is for the specific page this is more like a more global title so uh yeah let's go ahead and start implementing this whatsapp title to do that let's go into navigation and open the index file hello omar uh yeah index and here we have our root navigator root navigator uh contains our bottom tab navigator which is this navigator with two tabs and also it has a not found not found screen so we will want to adjust the screen options for our root navigator to change the color and everything like that first of all we see that uh it has an option header show and false which by default um yeah which hides the header we can uh delete it save and we'll see the header root which is the name of of the screen uh and now if i can remember all the options that we need to set that would be nice so um yeah first of all we need to set the styles for the top bar and that's uh gonna be in top bar options bar options and okay the background now we need to set the background color and the color of the text because color of the text now is black so uh for the style let's say background color and if we put here red will it work uh probably probably not no overall tab bar options no no no no okay we we have screen options here we will need tab bar options no it's screen options um maybe we should open the i always um yeah confused with styles of the navigator and yeah it's not top bar options it's header style header style and we have here background color and if we set red yeah now it will work so for the color uh as i said we have a folder with constants and here we have the colors uh and these these are the colors that we are gonna use throughout the whole application and it's better to take them from these file constants because after that we can easily adjust all the colors in the application just from one file so for the tint color this is like the main color of application we are going to use um [Music] i have prepared like this color vixx hex code you can copy paste it as well and this should be the uh what's up green so if we save we see that this text over here is displayed as green i'm not sure how is the quality can you guys confirm that the quality is good can you see the text and let's go here and say constant colors i mean colors dot light dot and it will be tint color and let's save and can find variable colors because we didn't import them alt tab add import statement colors from constants yeah now save and we see at the top our uh what's up color displayed for the header okay then header tint color and this is for the text uh and for the text we're gonna use color slide uh not tint but background so for the header we inverse the tint and background colors because usually the background is light and the thin color is green but in the header we do it uh like opposite so we're gonna take the background color and display for that tint color like the font color here yeah you see root is already white uh there is also an option header title align here and we want to line it to the left save it's there nice and also we can give more styles to to the title using header title style and here we can set like font weight is gonna be bold save uh yeah it changed it we couldn't see a lot because yeah it was already involved okay uh here everything yeah everything is um is done after that we will have to add this where is it the oh we need to change the name to whatsapp right to do that uh right now we have we still have root we will give some options to yeah to this component and one option will be title and title will be what up save yeah so if options title doesn't exist basically if we don't give anything as a title the library we will take the name of the screen as the title however if we provide the title this will override and display here the next thing is to give a header header right component and header right will be a function that will return um yeah a red component and this will be displayed at the right of the header bar so here uh yeah let's make a bit of space if we look into the designs we see that we have two icons okay search icon and three dots icon we need to put them into a view because uh whenever we want to return two components we need to put them inside the parent component because in react you you always need to return one component so view and here we will import some icons first of all let's import the view from react native and now we will import the icons vikings you can find on let me show you where you can find all the icons and how to use them and after that i will show you i will just type them because i haven't prepared so vikings uh you'll find them on icons dot expo dot f come on video here yeah here you see like all the directory with all the icons that you will probably ever need if you need custom icons you can also create them but for the beginning like this directory is is huge like there it contains uh seven or eight uh icon family and viking family is this and typo um and so on we can see them all here and also we can search like for example home and it will display you whatever you need and here it also shows you how to import them and how to display them okay uh pro i think that's clear now uh let me check where i have them somewhere in my notes i haven't prepared thanks to alex who helped me so the first icon will be from octicons let's import them here import from expo vector icons first families octicons and the second one uh material community icons material community icons okay now the first one is octicons and for the name will be search the size the size will be let's try 24 we'll see how it looks and for the color i think white should be by default we can check that later because we want a white icon uh the second one will be material community icons for the name it's gonna be dots dash vertical vertical size again 24. yeah let's and this octagons i'd import why yeah octicons i didn't write it correctly what do you want typo in word yeah doesn't matter save okay we can see them there the default color is black let's also give a not size but color and we can even write white the same for the second one save yeah the color is white and we want to display them into the same row not in different rows not vertically for that we're gonna give a style for the parent component and say flex direction row save yeah they're displayed in a row however they're very close to each other if we look here we see that there is uh some space between them so let's go ahead and do that [Music] let's give a fixed width to the parent component of i don't know maybe 60. as a number not as a string volume 60 and then justify content space between right because we want them to spread apart and to have a space between them yeah like that and probably one more uh style will be something like margin um right yeah i don't encourage uh ever writing inline styles as i do right now but to write them in a separate file however for this use case i'm allowing myself to do that just to move faster merging right then and we have some spacing to the right yeah i think that's uh probably it with a header um yeah let's have a look yeah what's up here uh the icons i think they are pretty good here yeah the images um is enlarged and that's why it seems that it's bigger but i think that the sizes are pretty close to the reality maybe even our icons are too big so let's try a 22 um font size 22 here 22 here save yeah we are a bit smaller right now okay how is it going guys are you following am i going too fast too slow too boring uh someone is asking to increase a bit the zoom yeah of course i always do that now i forgot let's zoom a bit pond 16 let's try 16 is it better right now all right so too fast okay um yeah maybe that's true but yeah we have a lot of things to to do today and i'll try to to to keep this not very long like i don't know more than two hours this is already hard for me i'm losing um like energy advantage and it's going to be also hard for you so yeah maybe after the stream go along and if you don't understand something replay or research more or even ask me on discord channel and i will try to to help you uh rebel a rebel programmer um let's focus on this stream um on whatsapp but please um let me know in the discord channel and i will help you with you with your problem uh okay so the header bar is done now we need to display this tab tab bar currently our application displays a bottom tab navigator but in whatsapp it's a bit different so on the bottom there is no navigator no tabs however these tabs are on the top it so it's possible to do that easily in react native we just need to install a new a new library called react navigation material top tabs and this is gonna help us display these top tabs uh as whatsapp does so um yeah we will also need to install like crack native tab view and drag native animated because uh these are the dependencies for the top top top tabs navigation so let's go ahead and install them right now yeah open with terminal let's open a new one and polyarn add in these libraries okay let's now prepare um have a look at what we have here uh we will not need the colors the libraries are installed so here we have like the index which contains like just the root um [Music] the root navigation and the not found and the root navigation displays our bottom top navigation so if we have a look at this bottom top navigation it contains these tabs like tab 1 tab 2 and each tab is a separate stack navigator so we see the stack navigator for the top one screen the stack navigator for the top two screen um i think we will reuse the same file uh only we will change a bit the names because it's not the bottom type navigator but let's change it to uh not even top tab navigator but i think main top navigator so it's gonna be main wait a second i forgot to check some marks there so refactor rename main tab navigator let's search for reference and yeah now we can refactor yes and in the index let's make sure that yeah it's main tab navigator and here we use it as main tab navigator okay now everything is going to happen in this main tab navigator so the same way as the bottom tab navigator has a function create bottom tab navigator the same way there is a function create top knob navigator but we are going to import it from the library that we just installed installed react navigation material tabs this one and it's called create create material top tab navigator then we're gonna uh replace the create bottom tab navigator with that create material top navigator what did i do there and yeah it's saved and we already see our tabs on the top as simple as that the status bar should be white i think on my android the status bar is the same like green i'm not sure how is it on ios okay so uh i would also like to rename this const from bottom tab to um main tab so refactor rename uh it's gonna be it's gonna be it's gonna be main tab okay now it's a bit better we can delete the bottom tab navigator from the imports because we'll not need it and now we will have to start styling these tabs to look more like what's up the same with colors yeah mostly with colors and some tricks for this icon let's have a look um okay um here for the bottom tab navigator uh we need to send some tab bar options uh and we have already the active tint color uh which will be should be white so it's not tint but it's background and this will display the title as white and we will not see it until we define a style for them background color background color color scheme dot tint save um hello background color right yeah background color is colors at color scheme so color scheme uh is a custom hook that returns us light or dark so by doing like colors at color scheme we are preparing these for uh for being able to to turn from light mode to dark mode i'm not gonna get into that into v stream but yeah just just saying yeah someone on twitch said hello hello i'm also streaming on twitch i don't promote it that much so there is not a lot of people but thank you very much for joining okay we see our background is already green we can move through from top to top um yeah the next thing is uh this line uh beneath the tab you see there is a blue line and this is called the indicator style and it indicates like which tab is currently 80 active so there is separate styles that we can adjust for the indicator style so the first thing is definitely is is going to be the color scheme the background color which will be background for it to be light yeah you see right now it's white and probably we will increase a bit the height because we see here that the indicator style of this line is quite big so let's increase the height of the indicator to five save yeah right now it's a bit bigger probably is too much but you get the idea we can adjust this the size okay i see one problem at the moment and we have a pr a thin line b um between the tabs and the uh header which is white and this is a bit disturbing for the eyes so let's um let's try to fix this and to do that we're gonna go into the index navigation because this line is actually uh from the title from the whatsapp title so that's where we will have to adjust it so uh for the head of header style uh which is back on the whole container we're gonna say that the shadow opacity this is like a shadow that is displayed automatically so the shadow opacity will be zero and this will fix on one system and i don't remember on which one probably shadow opacity let's save and see yeah shadow opacity is for ios and to fix it on android that's uh elevation also zero so this will this elevation will fix that problem on android yeah right now that we we see that there is no uh alliance between the title and the tabs which is pretty nice and that's what we need uh yeah probably them from the style we need to make the labels bold so let's go ahead and do that right now and the same as the style for the container indicator style there is a label style and this option is the styles for our label let's do font weight here bold save and they're already bold uh let's see from the styles from the styles i think we we are good to add shadow for the main top navigator main tab navigator uh do that is very shadow there i don't think so but yeah it might it might look better but yeah let's follow the designs so um because the styles are pretty uh pretty similar to whatsapp let's go ahead and add all the tiles that we have like camera chats status controls let's open up our yeah the main tab the first one will be camera second one will be chats right um then let's copy paste this one two times what's there like status and calls status and calls yeah let's save and we see already four tabs with all the uh yeah the tabs that we created here uh the first thing that we see is that the name is red and that's because uh we have defined custom types uh for our uh tab navigator and we do that in typescript to ensure that we don't mistype something for example if our type is camera we don't say like camera with two a's and stuff like that so let's go ahead and adjust these types to include only these four um four names for them and we can find them in our uh root folder and we go to the types so uh for the bottom top param list let's rename it to the main tab param list and here we'll define the names for all our tabs like camera chat then we have status and lastly calls let's close this and make sure that we import uh not bottom top parameters but main top program list and also we send it here um yeah right now we see that the names let's make it bigger we see that the names are already not uh red so this is very cool because yeah as i said like if right now we say like like we miss type something camera we see a red warning saying camera is not assignable so we make sure that this will prevent a lot of mistakes in future uh someone subscribe thank you very much i appreciate it okay uh yeah the initial route name here we see that it says like uh there is no such name so let's say that the initial route name will be chats let's save and when we open web the chats will be opened okay the next step is to display instead of a camera this cool icon so let's do that [Music] first of all we don't need any uh um tabar icon for our calls status and chat stub so let's go ahead and delete this one and clean our code because we actually don't need icons for them but for um our camera icon we are gonna use an icon that i prepared let's have a look it's from fontisto let's import it import fontisto come on disto and here we're gonna say fontisto name [Music] the name is gonna be camera color color we'll see if we need to adjust the size uh we save however we see that we don't see any um icons and that's because uh the tabar options has a specific property here which is show icon and that's defaulted to false but we want to show the icon so show i control save we see the camera but we also see the label camera that's not something that we want we want to somehow hide this label camera and to do that we're gonna say here like um tab bar label and this is also like the same way as we give a function to a tab bar icon that returns the icon we can also set like a function that returns no saying that when when you want to render a tab bar label render nothing let's save and now we can see that yeah the top bar doesn't display anything so the next step is to make viking smaller however that's a task for you guys so whoever accomplishes that uh yeah let me know and send me a message and show me how you did that yeah just some tips or some ways you can do that is to declare custom tabs with custom styles but that's a bit of typing so i will not get into that the only thing is that i want to increase the size of this for of this icon because that's not very hard size 22 oh too much 20 uh probably 20 or 18 even yeah like that and yeah it looks pretty similar to this one the only thing is the width so guys if you what am i doing with this i didn't don't touch it so if you manage to make this tab smaller yeah send me a message in discord and i'll say good job good job good job so are we done with navigation probably yes how do you guys feel how is it going are you following all right let's go on okay the next thing is um our will work on the chats page and this is the page where you see all the chat rooms and all the chats that you have uh yeah in a vertical list and um yeah in react we always think um in components basically like what are the smaller components that we need to develop and yeah merge together in order to have something more complex because if from the beginning start everything like in the same file or for example yeah developing this whole flat list or whole list of messages into the same file shortly it's going to be a mess and you'll have like a very huge files i encourage you to split everything into very small components that are manageable and this will even if it will be harder from the beginning it will be it will save you a lot of time in future when you want to upgrade or to fix some bugs because you know what's where everything is located so we see that our page uh displays like multiple items that looks the same for example this line looks the same as the second one and looks the same as the third one only with different like data with different names with different images [Music] so the first thing that we are going to develop is the chat list component which is this like box that displays one chat message and what does it have what does it need to know in order to render this uh it needs to know like um yeah the user that you are chatting with his image his name or like phone number [Music] and also it needs to know the last message because the last message is going to display here and the last message also has like a timestamp when did that message uh when did you receive that message and this is like we created the ad of the last message and this created that is displayed to the right and then yeah we develop this component and then we will reuse it uh to create this list of messages so let's go ahead and try uh start working on this chat list item component let's close our main top navigation navigation yeah one one thing is someone asked me to [Music] we need to push more frequently to github to commit to git in order to have like multiple checkpoints where you can get and see the state of the application at that point in time so i'm going to do that right now git commit implement navigation and with this com with this commit we know that the navigation is implemented okay now let's open our components and create here a new um i like to keep my um all my components into a directory and each director of the components will have um three files the in uh usually free in my project but now we will have only two one for the jsx like for the rendering and one separate file for the style so that's why we keep them in separate um directories in separate folders chat list item and here we will have like index.tsx and also um style.ts for the style let's import style from react native i don't know why i started with uh with style but it was open so yeah const style equal to stylesheet create and here we'll have all our styles at the end we can export default style let's do styles um and yeah later on we'll come here and define all the styles that we need let's go into our chat list item index and here let's import first of all react then we'll probably need more imports but we'll add them later our chat list item component will chat list item will be a functional component and once functional components were in once hooks were introduced from that point in time i'm only using uh functional components because they're so much more like readable and elegant and very much more clear to read and to understand and yeah let's hear export chat list item export default chat what's the difference between tsx and ts files that's a good question so t uh ts our typescript tsx is typescript with gsx and the gsx is over react but we that we write like the jsx syntax like here let me continue and yeah yeah this is jsx so when our file contains this jsx we need to uh the extension should be either tsx we if we are using typescript or gsx if we are using javascript uh javascript yeah okay we have our view not from themed let's keep it simpler from react native and here we'll have props and for the props let's have a look at what we have as an input we'll have like a chat room with chatroom id with users and last message so chat room is going to be of a type of chat room and we can declare this type here but because this chatroom is much global type that we might use in different components i would go ahead and declare it in the types.esx and here let's export type chat room which is equal to so a chatroom will have an idea of type string it will have a list of users which an array of users which will uh contain all the users in that room basically uh me and someone else in the case that it's a private message or more users if if it's a group chat andrei finally got you live how are you hello how are you doing i'm very good thank you so users uh is gonna be an array of user which we also have to declare by the way uh users and also last message last message will be um a message type a message type so we need now to declare how do a user look user um probably it will have an id string what else a image and name and yeah let's keep it like that image let's first of all name string and image your right and this will be the url for his image how can i improve my skill of naming the components i have a good video on yeah naming variables and naming things in programming so definitely recommend checking that out that's based on the clean code book so i saved you some time of reading the book and i yeah put everything together in a short 10 minutes video good tip about types yes seems a good way to share common types yeah the types that are more global this is very good uh way to share them and i need to focus on writing and not reading the chat message id it will have a content which will represent the message itself it will have a created ad which probably will be i don't know number or something like that which will indicate like uh the timestamp when this image was created let's go with um timestamp or number what else does a message have oh actually a user like who is it from but we can come later and adjust it because right now that's enough so let's close our types we'll probably not need it right now and import the type here like chatroom from our types yeah thank you alexander for helping people in the chat okay we have our chat room let's display here a simple text message like chatroom dot last message dot content let's import uh text from react native come on only once is enough and let's uh go ahead and in our screens uh tab one screen let's rename or should we just create a new screen from scratch ah i'm too lazy to create let's rename this one to chat screen yes do refactor hopefully it still works i don't think so and here [Music] remove everything everything save what's happening obviously stop two but for our charts let's go into our navigation main tab navigator and for the chats we're gonna use them here for our chops chat screen we're gonna use the why is it called tab one navigator still from screens screens no it's chat screens yeah that's correct component chat screen chats save yeah right now it's there uh and in our view let's um import our message component not message component but chat room component import chat list item from components uh chat list item and display it here chat list item and we need to send some data so we need to send some data through props because um yeah it even says us is missing the following properties chatroom so we need to send a chat room uh chat room chat room let me think no this will be the props will be we still need to declare that the type of this export const and these props will be a chat list item and the props will have a chat room chat room correct type like that chat list item props okay now from the props we can take out the chatroom basically destructure it and after that we will be able to display uh here chat room so for the chat room uh what we have to uh to give uh for the beginning i think let's give only last message which will have a content which will be hello there yeah we see hello there here um which we send from using props from the chat screen so changed save we see it's changed so i display it correctly um would you say saving the unix time uh is better than the date i always like better to save unix time and after that on the front end to parse it with moment and display it in the time zone and the format that you need because like saving into timestamp you know that it's always going to be a number and you're not going to miss it by saving it as a date one user might include the time zone uh and i mean one developer another developer will not include i don't know the time only the date and there is a lot of format issues so it's much more um troubles in my opinion working with date okay um yeah someone on uh twitcher is asking if i'm making what's up clown or spotify i'm making spot uh what's up clown sorry and the confusion is probably because i didn't update the title so sorry for that okay right now i have to go and get some data uh that will contain all these like last messages everything that we need because i don't want to type it right now first of all let me find it somewhere [Music] give me one second so uh okay chatrooms we have chatrooms here let's create a new folder directory data and in that directory i'm gonna paste some some pre-made data what's going on here this is adjacent so let's do export default yeah export default and here is just some dummy data that i prepared for example this is chat but i need actually chat rooms uh okay here it goes and export default and this chat rooms contains like an array list of some data for uh each chat chatroom so i have like id i have some users there with their id name and some image and the last message that we need to display so i don't know if anyone is following along and need this data right now i can probably paste some of it in in chat but this uh dummy data will be available on the github once i upload it there so check it out in gitlab uh okay everything is good here one error which one cannot find name borja okay borje is here because it wasn't a string yeah right now i think it works so let's now in our chat screen import our dummy data import chat rooms from data chat rooms and for the first one we're gonna give like i don't need yeah for the first chatroom we're gonna send the chat room set position zero like the first chat room so display that one save well done this print guys okay it displays something there um probably the types are not the same but users last message what you don't like what you don't like uh id3 yeah probably at this moment i just i should just uh i should make sure that like the names here are the same as the data that i declare like users for example last message should be the same uh which message content created at okay created that here we declare it as a date so uh andre forget everything that i said about timestamps no just joking we that's yeah we have the dummy data that we have so it's okay with that as well so that means that in our chatroom in types for our created that is not going to be a number but it's going to be a string save property users are in cop incompatible so a user have id name an image uri user id name image or write why you don't like it okay never mind guys let's move on because this is not a very important issue at the moment it just says that some types are not compatible so if you have more time than me in this stream go ahead and try to to figure out what's going on but this is just dummy data so we're gonna replace it in the next week with real data so not a big issue okay let's uh go into our chat list item and because we are receiving all the data let's display it properly so components chat list item index tx okay so here for review view okay before displaying we'll put putting the styles let's have a look at what we need to display okay uh we see from the first view that uh our row which is this container is kind of split into um three parts like uh three vertical horizontal parts like the image here which is like this rectangle then the main container which is here and to the right we have a separate one so um how we are gonna put them together uh we're gonna put the image image or avatar i think there is like an avatar right avatar source and for the source we're gonna have like u alright which will be our chatroom come on come on with him chatroom dot um okay we have we have an interesting problem not a problem but something to take care of in our data um each chat room contains an array of users and an array of users will contain uh myself and the user that i'm chatting with so um at the moment um so yeah based on uh based on our id we need to understand who is valve our user and display the other users image um in our case let's we'll do that when we implement authentication and database it's going to be much easier uh but right now let's just assume that always the second user is um the first user is me and the second user is the person that i'm chatting with so let's say that const user equal to chatroom i'm in chats okay sorry but it's the same concept chatroom users chatroom users at position one so user the time okay so uh for the avatar we'll just gonna display the user dot avatar uri come on you are i object is possible undefined but yeah we at the moment we know that it shouldn't be undefined let's import the avatar from react native avatar is very avatar worm why did i thought that there is an avatar image right image um and for the style let's say styles dot avatar let's import the styles and shortly we'll declare the styles for the avatar but we're not going to see the avatar until we declare weave and height so let's go ahead in our styles and declare the styles for our avatar which will be with let's say 50 pixels and height 50 pixels save and we don't see anything because do we have avatar uri what do you think console log yeah the the avatar component was from react native elements uh i remember that something with vetoes as working with so uh let's go so log the avatar uri and make sure that it's there or we did something wrong so here on device it's undefined it's undefined interesting um let's console.log with chat room users save and check here um chat yeah it's an array with two with two users why then if we take like a position one it says that it's undefined no it's defined then image uri why image all right oh not avatar image all right come on of course save yeah we see the image there we're not go yeah thank you alexander that it's not our uri but it was image alright so we're not gonna style right now let's just put all the contents on the screen and after that we can style so we have the avatar of the user then we need the name of a user uh it's gonna be somewhere here text user dot name and at the end we're gonna display them the date chatroom last message and not content but created at save okay we have yeah probably everything that we need and now let's start positioning everything conveyor in their views so first one will be style.container after that after that this will be a separate view because they will be everything will be horizontal but these two text will be one on top of each other so style dot styles um main container like main or middle let's say meat container [Music] then then i think that our image with together with the names will be into a separate view which will always be to the right and our text will be in a different view which will be oh come on always be on the left and the uh time stamp will be all will always be on the right come on vadim focus left right cheek are you alive i need to drink some water this is left container left container um you have a text will come later and uh adjust so for the container this is like the parent container which contains everything in um in our chat room and here we need to uh to say that the flex direction will be a row to display everything um in the same row yeah we see them here [Music] left container the same we need um to display in the same row save here um and what else what else what else do we have any other meat container yeah mid container by by default it displays in column uh as it as flex direction so um probably the next step would be to yeah instead of this text will i'm gonna display uh dummy text and later one i will show you how to parse this and display properly so here let's display i don't know like yesterday do we have yeah we have something like that save yeah we see right now uh i needed a smaller text here to to to to view everything because we need to display it with with 100 percent to displaying the to take the whole row okay we take the whole row however the yesterday comes close to the message but it needs to be to the right hello daniel hi how is it going for that we need to add justify content and to say that we need space between the elements not yeah justify content space between save and yeah in the container the child components will contain all the space between them because we say justify content space between so the first child will be mostly to the left the last one to the right and the components in the middle will be like in the middle of them like they will have like space between um so what else we probably need to add some padding to this container let's add like 10 that's good left container let's see left container okay image we have here styles avatar and for avatar let's add some margin 10 or only margin horizontal to have it to the left i would even say like margin right yeah like that okay for the avatar let's uh in order to make it round we're gonna use our radius which will be like 50 the same as the width and height let's move it a bit upwards okay it doesn't work like that righteous is not a valid uh property margin border righteous right border radius yeah right now it's round the same as here okay okay okay what do we see probably ah what did i do here okay should we make the image a bit bigger let's try okay so [Music] more noise coming in guys brace yourself sorry for that let's go with 70 try let's uh probably so much 60. perfect okay now let's add some styles to our um yeah username style styles dot username font weight bold bold save what else do we declare here yeah the font is probably a bit bigger is it yeah let's try so um font size let's try 16 save yep i guess um what else okay the yeah let's declare some styles for the last message as well um come on uh text style styles styles dot plus message i will close this one to see everything okay and i want to uh yeah let's adjust the size font size as well 16 let's try and uh what else i want to adjust the color color will be like um a gray let's try gray save yeah like that and we will do the same for our yeah text here styles um styles dot um time and yeah let's copy the same style for the time save we have a yesterday here what what else what else the meat container um where is it okay mid container um let's try one thing justify content space between save and we added space between the the two texts here but in this case we see that there is too much space between them and we can try another thing like not space between but space around and this will add uh um equal amount of space like around all the components um and also like before them and after them so if we save we see that they are closer together and we see that it probably looks kind of the same as here probably you can play around with the sizes maybe like let's add more uh space um to the right here like 15 yeah like something like that and also yeah if you if you want to play around with more more styles like feel free i'm pretty happy with it right now so that means that we are done with the chatroom list component and now we can move forward should we let's do it okay the next one will be the chat list which is a flat list of the component that we just created so we have a reusable component then we have a bunch of data like a bunch of an array list of uh chat chat components with all the data and we render them in this uh vertically scrollable list um yeah let's let's start doing that and you'll see how easy that is in uh yeah in react native and with custom components with uh separating everything in their like components and smaller parts so let's go into chat screens we have here the chat rooms and instead of displaying a simple chat list item let's delete that we're gonna display a flat list of them we import it from uh react native so the flat list has two required properties data and render item let's put them into new lines so the data property is an array that we want to display in this flat list so in our case that's like chat rooms this is the array from data like this is the array that we want to display here uh in in that list it has like i don't know six or seven chat rooms uh and this is the data property i think this is clear the render item uh is a function that is gonna be called every time flat list wants to render one chat room so basically give me an array list and give me a function to know how to render one of them and i will do that for each of the items in your array list so as i said it is a fun it is a function it will receive an item and we should say like what should i render here how should they render each specific item so how should i render easy cheat chat list item that we created chat room and we set the item here and the item will be specifically like one piece of one uh entry in our array list so this is one item that is going to be like sent to the chat room then the second time it will be called like this will be the second one and again it's going to be sent here and so on let's save and here we can see horizontally scrollable and not only horizontally but also um yeah vertically and horizontally we're gonna fix it soon so here is the basic things that you need to send in order to display a flat list however there are some more for example a good one is the key extractor and the key extractor is uh uh using it we define like what is the key of each item and we need to define that in order for react native to be able to re-render items accordingly and to to have like each item in a list should have a unique id so uh for the item we will return item dot id we save it that's good uh do we need anything else yeah probably at this moment no so what's happening here with [Music] yeah with horizontal scrolling the messages are too long so let's think how to fix that let's go into our components chat list items style okay our container width is 100 um for the text i think the text has um like overflow alexander i think you worked with that uh this weeks um let's have a look uh react native text over ellipse ellipse size mode tail overflow ellipses something like that use the number of line parameter on a text component okay and yep tail is the default yeah the default one is tail as um yeah let's define a number of lines one to our last message component and hopefully that will uh fix so last message style and let's say number of lines one save it doesn't do anything check chat for inserting three dots uh of a whole message no no no that's not the problem because the lip size mode is default to what we need so i feel that our style here whenever in doubt just do it like flex one now it's still too much [Music] where is our last message flex one no no no no no uh with 100 to have like hmm okay if we set like a width like this it works but that's not good our yeah the yesterday is still there okay okay that's interesting yeah when i uh get into errors like this um i always question my uh front-end development skills because having such a problem can take a lot of time um should we just make the message smaller hmm um no it's it's you see that if if i set the weave to to static size it puts the free dots so it has like ellipses size mode um yeah i can set tail here it will put the three dots at the end but it's the same as i have already so you can also put head it will set in the beginning but that's not the actual problem because we have it's that's quite weird you know what you know what what's the easiest solution that we can have at the moment and that i can update you later not to waste a lot of time because i feel that these kind of bugs can take a lot of time the easiest solution would be to adjust the data of course [Music] i'm um sure even sure that that would work that's not a bug that's a feature so alex sorry i will have to delete some of your message here try to make the width of a message component as dimension get window oh i always hate using dimensions when you use that that's like a little hack um [Music] yeah it'll really think it's better like using dimensions that get window i feel that it's a it's a hack and it means that your like flexbox containers aren't set properly so but it it wouldn't work because yeah i tried a custom width and the message was displayed correctly but that yesterday was still advanced so uh let's have a look here where is it yeah my mom said i work too much no no no no no that's not true what else we have here it's like the situation when your test cases fail and you adjust your uh test cases in order for them not to fail instead of fixing the bug come on now now what flatly style fleshly style flatly style maybe that's actually true to set the weave of a flat list hmm let's try that one flat list style with 100 percent but um jones thank you very much that actually solve the problem so if i go back here yeah yeah yeah right now we will be out of the screen the message but we can fix that and we can fix that in the [Music] chatroom style last message will be with 100 and not more no no no no no no should i use dimension.getwindow maybe the text has something like max i have an idea to put it into two lines number of lines two doesn't work nice yeah guys i'm not gonna spend a lot of time on this one um i'm gonna hack my data in order to display properly and if i find a solution in the next video i will show you because it might take a while so i don't want to uh it to be boring for me to search and try flex one instead of with 100 should do the trick flex one if i said like it it is in um uh not a row component it's in a uh column direction so that again will not work it will make it vertically flex one you see yeah i thought about that but okay it's good it's good let's not get into that a lot [Music] the next thing i want to implement is instead of displaying this dummy code yesterday to actually parse the created that and display it using moment.js based on the data we have in our data so let's add the styles to our text here let's uncomment it of course and let's delete this one so in order to parse and display the data in the format we want i'm gonna use library called moment and that's a nice library to work with dates so we can find it in moment.js i guess moment.js.com so here is like the installation and how we can parse and how we can uh display in the format that we want um and there is like a way to display it in a difference where is it document let's check the docs difference and if like that yeah so this way we will display it like in a human readable way like two days ago or something like that so let's use it here like this moment we will import it and how is actually um what's up displaying it it's displaying like you have just the date no let's say format um come on yeah this is displaying only the month but we want to display it in like format here give us a good format that we can display format okay for a month this one is good enough this format save and as we see in our designs we're displaying it with a bar and the first is date okay date month and then year save yeah like that and i think that the font size of time can be a bit smaller it takes too much space there yeah like that alright i think that's it with our flat list of messages and yeah that's um besides of the bug that we had there uh it displays pretty well and i think it's quite similar to how whatsapp message chat messages are looking so how are you guys doing still there okay let's move on so the next step the next step is our chat room screen so whenever we press on um on a chat room it should open uh the chat so that's gonna be a new screen that we're gonna develop right now and it will display the messages in that chat room also we're gonna be able to type the new message and send it um yeah in the chat let's do that okay let's close everything that we don't need and in our screens let's create a new screen uh called chat room dot tsx okay before that let's uh not forget what it is get commit um what did we implement there chats flat list or chat stop actually okay we committed now let's move with the chatroom as usual import track from react const chat i usually have like screen at the end so let's do that room screen yes this will have a back end and it will pull data dynamically and you will have like real time uh capabilities basically you'll write and you'll receive messages real time but that's gonna be in the next week so don't forget to subscribe down below and turn on the notification bell and you'll get notified when i start implementing the back end today we're going to finish with the front end hopefully fingers fingers crossed let's display currently a simple text like uh chat room chat room save and uh we're gonna include it into the navigation and into our index navigation because we need to add a new yeah a new route for for this new screen that we declared so let's copy this one say that i'll put it into yeah thank you very much for subscribing um okay the name will be chat room uh component will be chat room screen and the title the title um yeah let's have chatroom at the moment we'll see what we need later chatroom okay save can cannot find variable chat room screen because we didn't import it of course uh yeah here import chat room screen from here save return outside of a function uh return outside of a function no not return export as talking and writing export default chat room save yeah now it works so we have that screen that route but we need to to make sure that there is a way to get to that screen so when does that happen that will happen every time we press on a chatroom in this list so uh we need to declare some a listener for the clicks and whenever user clicks here we need to redirect to the vet specific chatroom so we're going to open again components chat list item index and we're gonna put everything into a [Music] touchable component someone said to try flex rob on the last message flex rub rub on the last message flex wrap is for different containers and if you have like more of them into the same row and they cannot fit together they will move but we need like i don't know like text rob uh and what is their values break i don't remember drop align content no text drop or just rub nah yeah i can i give up guys with this one so let's focus on the main functionality so whenever we click we will need to redirect a new new uh screen so we will import them touchable without opacity without feedback from react native uh and this is the component that we can assign uh on press and it will call a function whenever the user presses so i will try to replace our whole component view with this touchable opacity without feedback i'm not sure if it has a style property so let's save and all right what what what view save now it works um touchable okay oh yeah i think i know why so here yeah i will rub the whole thing with attachable without feedback put everything there hopefully the styles will still be the same save yeah and we'll declare a function on click and whenever we click let's first of all console warn to see if we actually click uh clicked on chatroom or user dot name name this is click and let's give this function on click to our touchable without feedback and here we say on press is on click save to receive a single right element come on why oh yeah i had a extra so if we press on uh something we see clicked on alex clicked on adren clicked on elon musk it's working you should drop it into one single view yeah yeah that's exactly like the child's of attachable without feedback should be one single uh channel like like this if we close it it should be only one view or one text or some like one child it can't have multiple childs all right so what do we need to do here we need to navigate and to navigate we need to get a reference to the navigation and to get the reference to the navigation there is a very cool hook which we will import which is used my voice sorry guys my voice started to crack use navigation from react come on navigate navigation native yeah from this one come on yeah and we we receive our navigation object from that hook in the yeah top level of our uh functional component then we can use this navigation to navigate to our screen that is called [Music] that is called here chatroom save if we press cannot find variable text because in our chat room uh screen we not here chat from screen we didn't import our text import text from whoa react native save so if we press it goes to a new chatroom we go back and so on however there is one more thing because we navigate where is it chat list item we navigate but we don't send any variables like where to navigate it goes to the chat room but it doesn't know like which one like should i go to the nils alex or vlad chatroom so in order to do that i'm gonna send a separate object here like id and i will send the chatroom id there so having a chat from id we're gonna be able to query the specific messages from that specific chat and i'm gonna show you uh how we can re this is how we send and let's see how we can receive this id in our chatroom screen so if we go to our chatroom screen let's close ours and the same way as we use them use navigation hook there is another hook use route and it returns a reference to the current route and all the variables that we need are included in that route so use route and it's gonna be from react navigation native the same way we take const route from not from equal to use route and let's [Music] console.log route dot params and this is like the params of this route let's save and let's open our development server to see [Music] let's close everything and let's go to this chatroom we see object id one this is the param list the idea of the chatroom is one if we go to another one the id is five and so on so this is how we send an id and based on this id we're going to be able to query the messages from that chat room okay so we have our uh chatroom um chatroom screen so let's see what's next okay in the header um whatsapp displays the name the image and some some more information like users um yeah we can actually display the name uh andrey goodbye thanks for joining and i'll be waiting you all next week thank you for reminding to drink water so guys yeah don't don't forget to drink water all right so let's try to display the name like the name of a chat in our header so the same way as we are able to receive the params here the same way in our index we should be able to receive a params here if i'm not mistaken if we give a function instead of a direct message and let's try to console.log them i will return this string and let's try to console log our props in the chat room let's yeah let's comment that out not to have noise uh and here we're consoling the props and let i hope wiring function not valid as the react child this may happen if you return a component instead of component from render or maybe you meant to call this function rover um that's interesting functions yeah let's see let's see how how we can display a custom react navigation display title from params configuring the header bar maybe options title using params in the title yeah that's what we want using params in the title okay the options the options uh can receive this function that we receive from the route yeah i think i get the idea not the title but the options is a function and we can get we can get here like this i'll definitely mess up the apprentices uh route so we get here the route from the title no the title will be just a string and let's try just to say route dot params dot id just to test if it actually works yeah we see one in the title so this is how we can um display the title based on the params and the next thing is yeah let's say name here and we should make sure that we send the name when we redirect to this page so when are we redirecting it's happening here on click so besides the id we're gonna say name is user dot name let's save user dot name it's lucas it's elon musk and so on live is live debugging it has brain to learn errors yeah that's that's the thing that uh i was thinking lately about because yeah once more people are watching i'm feel pressured by being like more perfect and like i i feel a bit stressed before the streams to prepare everything to know everything that i'm gonna do like in um um like everything quarters like uh to to be coherent and not to stumble and go through these errors but at the same time i understand that this will idealize the work as a developer because we never are perfect and we always google and we always have problems and that's no matter like what level are you or how senior are you you're always going to have problems and your job is like to find solutions for them so i don't know how to balance all these things like to to still be coherent and the life seems to be interesting but at the same time to be um as authentic as possible and yeah like go through errors go through problems together with you guys so yeah let me know what you think about that i'm i'm really curious okay some some ranting okay back to what we were doing now we can display the name uh in the title that's good the same the same way we can display um [Music] we can display the image of a person we just send here an image and we declare a custom header bar where we include that image but i'm not gonna get into that that's gonna be um a separate task for you guys if you want to to learn vists uh on your own do that and send me a screenshot and i'll give you feedback because that might take me some time what i will do i will add these three icons here let's and i'm gonna add them here in index and header the same way as we added the icons in uh in the home screen uh yeah the same way i'm gonna add it here like header right it's gonna be a view with a couple of um [Music] icons uh do i always do i need to always create types to give structure to my components yes if you're using typescript you always have to use uh to declare the types of your properties at the beginning it feels uh like more work you have to type you have to think about these types but in future it will save you a lot of time and a lot of debugging time because it will prevent some errors like one component expecting a string you are sending a number and like in some weird cases it doesn't work so you will yeah you'll save a lot of time uh yeah in this live streams i don't have uh a lot of time to go through all them all the types and set up set them up properly because like i still have some red uh errors uh for example like object is possible undefined uh in a production environment i would definitely like declare them and make sure that everything is defined nothing is new do some other checks but for this live stream [Music] i'm okay with some red uh warnings just with the purpose of like learning and moving faster and delivering you guys value okay um for the icons what icons do i have do i haven't prepared somewhere uh call is from material icons if i start typing will it autocomplete i hope material material without community icons name will be material icons call size will be what's i did with 22 color white okay let's declare three more the other one is from font awesome five font awesome five and this one is a video icon and the other one is material community icons also those vertical material community icons dots vertical let me close them to see everything material icons we didn't import them let's do that right now come on um here material icons and what was bubba i can set what we used it was font awesome font awesome five save yeah uh let's go into a chat and on top here we see three icons displayed with some styles that we can copy from the home screen and adjust we can have them displayed in one line and with proper um yeah the weave will be 100 because we have three of them yeah something like that will be okay yeah probably the first one is the video that's a very important detail save sorry no i don't have coronavirus my from speaking my voice just is cracking and i need to drink water so i think um that's good enough right now these are not um working they're just displayed as icons however if you want to add some functionality to them to redirect a new screen you will put them inside a touchable opacity and declare like what should happen when the user presses on them guys uh give me just one minute i'm gonna go somewhere very important and i'm gonna come back because i'm two hours here i'm drinking water so i think you can understand what i need one minute guys hey i'm back i'm back and i'm ready yeah now it's gonna be much easier okay so we have a screen we have a header looking good um yeah someone is asking do you have a planning feature to use testing like just interact native in your channel uh i might do a separate video for um yeah react native testing yeah if more people wants that i can definitely do do do a separate video yeah testing is boring for doing that in live streams but they're very important to do them in real job so that's why i might do a separate video martin have to go uh okay thank you very much for joining i'll wait you during next week yeah okay guys we can drink some more water okay okay okay we are here so now is the time to display the actual messages to display the messages uh okay to do that let's uh start by first of all creating a custom component for a separate message but in the beginning we're going to create it very simply just to display a text and that's it and then we can get into uh implementing the styles and the next step is to define them into a flat list as we see here like to display multiple messages so in our components create a new directory chat message two files index.esx oh when i create a new uh a new file that's when i remember to commit gate commit what did we do basic chat screen yeah chatroom screen [Music] plus navigation okay now chat message uh import as usual react from react const chat message equal to props here will be a chat message and we will return in the beginning just a simple text next hello let's export default chat message declare the type for the properties export type chat message props and what will the props of a chat message have it will have like a message and the chat message is something that we declared in our types yeah you know what the problem here was is the declaring an array of users this is how you declare them in graphql but in typescript that's how you declare the array of users so that's why our yeah we were having some uh some pro yeah right now we can access it at the position one and we don't have the yeah the red warnings well what's saying source here uh okay never mind um forgot what i was doing types we have a message okay [Music] and the message we can import from types okay now let's take out this message from our props so we do that by destructuring the message not messages but message from props and here let's display the message.content dot content let's import the text um i don't know why it doesn't auto suggest me to import weird import text from react native uh okay so yeah i think uh the basic thing that we need here is is done uh now let's import this chat message in our screen chat room screen and instead of displaying this text we will display the text message but we can start actually by displaying the whole flat list because i already showed you how to uh what is the flat list and how uh you send them and explain i hope that by this time it's more clear so let's just start by displaying the flat list from react native the data the data the data will be we have a chat rooms no chats here this is this is what we need right this is yeah messages and it has all the messages um yeah this is a this is my dummy data for one chat room so if i close everything here no so it has like an id it has an array list of users like who is in this chat room and after that it has an array list of messages and each message has like an id a content uh date and from from which user is it coming so yeah we see like a lot of messages down below and that's it like nothing nothing more um okay so let's import that into our chatroom screen import chat room data from data door chat rooms not chat rooms with chats yeah and let's send it here as chatroom data and for the render item this is like the function uh that will be called for each um yeah our data is actually no chatroom data but chatroom data dot messages because we want to display a flat list of messages that's the array so render item yeah here we will render them the component that we just created uh chat message is called right chat message message equal to item and what's happening here we have it opened we didn't import it we import it's definitely something i messed up something with parenthesis yeah flat list here should yeah should end that was the problem so let's save and here we see a list of messages like hey are you lucas i'm good what about you and so on and um yeah they are displayed in a list now we should go ahead and start styling these messages properly and displaying all the information that we need about that message interesting stuff let's go let's close everything chat message here yeah first of all let's have a look at what data we need to display so we need to display the username the content of a message and in the bottom right corner we need to display the time but the message was sent fair enough let's do that [Music] we need to put everything into a view because we cannot return multiple children in the react um first thing will be a text [Music] message.user.name like that so message.user.com um yeah typescript says that property message does not have a user because we didn't define it here so message does not have a user so a user is a user yeah right now it's doesn't complain message content and after that we will display the message um yeah let's parse the date into a moment directly so it's going to be message dot created add and then let's import it you know what um for messages i would like to show to to do it with moment dot div which is a difference and i think that's it that you need message created save and if we go here can find variable view we didn't import view from react native save uh no it doesn't work like that that's called i think human difference difference or duration oh no no i think it's from now oh yeah i remember it's moment dot from now save and we see that yeah it displaces seven days ago seven days ago seven days ago and if i uh go into my data [Music] i will show you how it changes so for a message i will say that it's not third october but 10th october let's save and yeah it says like in an hour why it says in an hour oh because yeah the time zones uh if i put 13 it's in 18 minutes if i want 12 it's 40 minutes ago yeah that's that's nice it displays like the difference of date in a human readable way like 42 minutes ago seven days ago like one week ago and so on okay that's uh that with a date now uh let's let's let's let's let's [Music] let's try to style them that's gonna be interesting so um yeah first of all um let's style them as a message but as an incoming message and then i will show you how we can adjust it to display it as differently for outgoing messages the message that we write so here is that message um i will say that this is a style styles.container which will be the whole role but because our message is not displayed in the whole row we will need a separate view to display like this custom box and that's why i will add everything into a different view like that and this is gonna be style um box message box message box and after that we can come back and adjust the style of all the texts let's work now with the positions components chat message let's declare the styles file styles do a ts and here import the style stylesheet from react native style should create and at the end export default styles in our index let's make sure that we import them we import styles from styles and let's declare the container and message box there container and message box save so our message box let's say background color will be what's the background color of that one is it white yeah i think it's white background color let's make it like just a bit gray like that save yeah we see that it's already there uh and the message box will have a weave or not even a weave then it will have a probably a margin right of 50 pixels to display yeah some spacing uh here and this is just to as you see that the messages have like spacing here they're more to the left of the screen for the container let's add some padding um like 10 padding 10. will be okay um what else yeah uh we can add some border radius to make the corners a bit more round to the message box border radius is gonna be i don't know five will be okay it's pretty hard to see with this color but if i make it red you can see that yeah it it looks pretty okay but various i mean and the message box itself will also have some padding to have some space between the text and the box itself yeah like that what else what else now let's let's conditionally uh display the position of a message to the left or to the right based on the fact if it's our uh message or if it's not our message so first of all we will need to have a pro probably a function here that will say like is my message and this function will we will implement here like some logic with the database to check if id is the same id as the authenticated id then it it returns true but right now we see that um my id uh my id in the chat i think is u1 so we'll say like if id is u1 then it's me it's true yeah and otherwise it's not me so return message dot user dot id equal equal equal to u1 that means that it's my message so the first thing um that we need to display for my message is a different background color which is this green and i have it here prepared let's go ahead here and we need to do this conditional styles we are not able to do that in the styles.tx because here we don't have access to that is me variable and that's why we will have to do that in in the index so how we're gonna do it we're gonna put our styles into an array and this will actually merge the styles and here we'll declare the styles that we need to be conditional what is the keyboard you use i use a how is it called i forgot the brand name but it's a i hope i will not mess it up it's this cool keyboard i i forgot the name right now it's i think poker ah i don't remember okay so for the conditional will be the background color so the background color will be is my message uh if is my message it will be green like this otherwise it's gonna be let's say white cannot find name background color i think we should put this into an object save yeah right now we see that the messages are just the background color is displayed conditionally so if is my message it's gonna be uh green otherwise it's going to be white so we see that yeah wherever we see vadim the message is green and otherwise it displayed as white that's um yeah that's nice and that's what we uh wanted and the next thing is to display the position of the elements like one to the left one to the right so from here from the message box we can already delete the background color because we declare it in our index tsx and the same thing as the margin right because we are gonna declare it here um margin right or margin left we'll see how how it goes margin left will be if is me then it's going to be 50 over y 0 because to the left we need margin only for my message and the margin right let's do it uh the same the same but not really so it's reversed 50 for the other message yeah like that that's what i want you to do so you see how we as well conditionally position the messages one to the left one to the right based on uh you have the condition that we set here okay right now let's work with uh let's work with the names and yeah one thing that i see is that for my messages uh whatsapp does not display the whatsapp does not display the name so here is how we can conditionally render something not conditional style style but conditionally render so we will wrap um our username into like a javascript block with curly braces and in this javascript block we can also write javascript logic so our javascript logic will be is my message then and operator and then text message the text box this might look pretty weird but what does that mean is if this check passes only then javascript will execute this part and only then it will display if this is false javascript will never execute the second part because like how end operator works is if one part is false it will never be true so it can return false in the beginning like from from the get go so it doesn't need to display the text if it's false so this is a little trick that we are using indirect and direct native to conditionally render it might seem weird but it's very useful and helpful and if we save we see that it hit the message in our in not my messages so it may it means that we need to reverse it so yeah reversing like that it displays the name uh for buffer messages but it didn't doesn't display the name for my messages okay let's now add some uh styles to yeah we should negate it let's write alexandra so style will be um styles dot style dot message message and style dot dot time okay name message and time that's what we need to style right now message and time okay for the name what do we do we display it with some kind of a color i think we will display it with a tint color and tint color is the green that we display here so the name color will be colors dot light light dot light dot tint right like that and we need to import the colors from constants save yeah we see look is displayed with that green we need to display bold as well font weight bold that's better what else here the message looks kind of similar i don't think we need to do anything with the message maybe to add some margin uh below the name or uh vertical vertical margin for the message to have some spacing between the name and the date so the message will have vertical or margin vertical margin vertical five not too much yeah probably that's good now i will actually add only to the name because in this situation we don't need extra margin so for the name let's add the margin bottom save so yeah here it displays well yeah yeah yep don't think we need any separate styles for a message if you want you will insert them here i think they are pretty good and for the time the time should be displayed in the bottom right corner so in that case um yeah let's i'll divert this plate with abstract abstract position and position them at the bottom right or time time what is what is time that's the question what is time so uh self align or align self all lining things are online self uh flex and save oh oh whoa vadim i'm pretty proud of myself right now i could align the thing from the first try without googling that's that's an achievement guys that's an achievement so color let's set it as gray save yep something like that uh yeah we display it in a different format but uh yeah even in my application i'm displaying it with like different and different difference time uh it's in a human readable way like seven days ago or a minute ago or something like that uh what else what else let me make sure that i didn't forget anything how are you doing guys i are still following yeah one thing that uh we need to do for this flat list is we see that the flat list is displayed uh in an inverted way so the first messages are displayed on the bottom and the last messages are displayed on the top so to do that we go to our chat chat no chats index here um i don't think i will implement uh emojis in this video that might be the next one if i'll have time but yeah we are going already for how much time two and a half hours uh and i i'm still planning to implement uh a couple of things so yeah it's gonna be enough for today yeah what i wanted to do yeah to display the flat list inverted so in our screens chat room screen for the flat list we just say inverted save and the flat list is already on the bottom and the first um yeah the messages are like inverted and when we will add more messages on the bottom on the top of the list like they will be visible like near yeah here uh all right all right okay let's see our plan i think that we style the messages pretty well and they look somewhat similar oh what we what we have to do is to display a background image like that and it will look dope so chatroom screen the reason indirect native this component background image come on yep does it exist has no export background image back ground image or image background how does it how is it called oh image background yeah of course who is known about me oh image background and we will uh put everything here in an image background this flat list let's put the flat list here inside the image background and the image background should have a source uh image background will have a source but the source i have it prepared somewhere as an image i found it on internet i will put it in assets images and i will drag and drop it here yeah like this is the image that we want to display the background so let's import it import vg from assets images pg dot png are you there um maybe it's one more up so we are here no no no it should be here um maybe typescript is messing around with us let's try to say yeah source bg save go to here go to here go to here my name is boris and fine is not the objective in style with all right style with 100 height 100 percent put it into a object here save let's go now yeah right now it displays properly and we see that the background is set with that image it looks much nicer uh it's looking like that something is missing so yeah right now it's better okay okay okay so guys what's next what's next next is of course our uh chat input component but we can type messages we can type messages yeah my back is already hurting i need a standing desk let's go so should we declare it as a separate component what do you say guys or in the chat screen just to just to display it here yeah let's let's declare it as a separate component directory before that don't forget hit add hit commit display messages in chatroom okay so in the components let's create a new directory for our new component and it's going to be input box index.jsx styles dot ps let's start with styles import style from react native cons as usual styles equal to style should create and let's export these styles that we created export default styles x4 default styles and yeah let's declare the indexed import react from react input box on here we return a view and [Music] let's do a simple text at the moment just to see that it displays hello there we import the view and we import the text sorry text okay let's go ahead and export default input box and we can input insert it where we can insert it in our chat screen right chatron screen underneath the flat list so here will be chat the input right yeah something like that add import statement from components input box save and we see hello they are displayed at the bottom of the screen okay that's good that's good we can close this screen and focus only on our input box we have the index we have a styles here so let's see the strategy here so first of all we see uh two views like two parts which is like this main part which contains this this view with round borders and this button uh to the right then inside this view we see like four columns first first one is the ic yeah i can for uh emojis then by input box itself then attachments and then the camera so let's try to design that um here so first one we have um view style let's declare style for this one styles container let's import the styles even though we don't have them yet declare but we can import them to be ready the next one style will be styles dot main main container main container will will be that white box with round corners and then at the end there will be there will be um a kind of a button also um a view and inside that view there will be an icon the icon in our case is very core like microphone let's check uh material community icons material community icons i don't want to import automatically import from vector icons material community name is it the same did i make a mistake probably name will be a microphone microphone size will be let's try 24 color will be white save yeah it's there maybe you don't see it but it's definitely there like right on the left side of the screen so in our main container or let's add some styles for this one as well styles button container in our main container what we will have yeah this is the main container the white box we'll have an icon and the icon we're gonna take from pontoson5 on awesome five name oh god no name love being size 24 add color will be a kind of a gray and that's it after that it will have a input a text input from react native and will declare all the properties that we need there as well and two more icons like the attachments and the camera attachments is from and typo and typo i will copy paste because i'm lazy and the name will be attachment the next one is our what's there camera right that one is from fontisto let's not forget to change here to end typo i made a mistake the next one is from fontisto name camera size save okay we see vikings here we don't see the text input but because it doesn't have any text and any styles to it so right now let's start to somehow style the con the containers so let's go ahead and style the main container the only thing that it will need it will say flex direction row to display everything into a single row row save okay we see the microphone there the main container as well needs a flex direction direction roll roll save yeah it's there now the main container the main container will have a background color of white background color white save let's add some padding to it of course because everything is some margin to be yeah and some border right just to make them to make the border um rounded righteous 10 or not even like 50 i think yeah like that okay now let's style a bit the button container uh button container will have a background color colors dot light dot tint to be a gray save we need of course to import the colors from constants save yeah we see it there yeah as well let's add some border radios to it and you know what the margins i will add to the main container not to um i'm i'm into the parent container to contain margins for both buttons and for that one like this uh let's say that the wave will be 50 the height will be 50 save how does it look uh okay and to align the icon in the middle justify content center justify content center and this will make it vertically aligned and align items as well center save it will put icon in the middle for vikon we can increase a bit the size uh 28. uh yeah i think that one is a good one uh button container let's add some horizontal margins or let's add here margin margin margin right i blanked for for a bit margin like 10 save there is some space between the boxes and let's try to add flex 1 to this box to take out the whole space that is available to it so the button container takes 50 with because it's static and if we set flex 1 we are setting like ok take everything left that is in your container so that's how we managed to do that here okay and i think for our text input style style text input i think we can do the same thing with flex one if i'm not mistaken to say that okay if i can't have like fixed wave but you take the whole thing flags one yeah i was right so the text input right now takes the whole um the whole size the rest size of the container so for the text input let's add some margin horizontal uh then to have some spacing for this icons for these icons we also need to add some some spacing so style style dot styles dot uh icon and the same one for this one so let's define the icon style to to spread them apart a bit and let's add some margin horizontal ten will be too much i think five hey guys i are still here uh are still following me margin horizontal five and it doesn't work then uh oh i think i know because if i do padding hmm icons margin i need margin to them with 30 will that work i can i can i can that's what i'm missing we don't need with margin horizontal and 10 will be too much let's go with uh five like that yeah so right now um we see yeah we see our message box here we can type uh i think we should give some um some properties to the text input to be multi-line so let's try multi-line save and in this case we're gonna be able yeah to define multiple texts and it will grow like that uh the other thing in whatsapp oh and in that case probably we what happens in whatsapp when i do that i don't have my phone near me but i think that's similar to what they do uh but the only thing i would like to keep the vikings vertically aligned so in our style for our main container let's align items align items not stretch but center save and now the items icons remain in the middle like that all right all right all right all right and what we're thinking what's up is that when you start typing first of all the the camera icon disappears because if you type then it shouldn't be able to to send a photo at the same time and then microphone icon uh changes to a send icon so i'm gonna do that right now and um and not middle do you mean like that's how whatsapp does yeah yeah uh i can do end and it will always be at the bottom minimize i think it's flex and flags and but i'm not sure if if that's how uh whatsapp is doing so basically like if we write the icons will be advanced i don't really like that i don't know i think that center looks better oh and for for v second as well let's do that for the main container as well save yeah like that yeah alex as well says in case of uh multiple line seconds or cap advantage okay okay no problem thanks and and here as well flex and save uh and because we i think they come on yeah it's interesting maybe i should uh save it border radius like smaller like 30 not 25 no 25 let's check margin bottom uh no it's it's mostly because of the border riders is shifting towards because it's too big oh that's for the button container i want you to do that for the main container here if i set it to 25 it should remain the same like this and if if it's only one line uh in that case it will look round yeah right now it's round and if we change the various does not change here like it it remains still the same so it looks better right now um yeah we can also have like max number of lines or how is it called offline 706 or number of lines and will this yeah this will uh i don't i don't remember the the property that we need to send for the max number of lines um you can find that in the documentation so right now let's uh keep them the content of a message that we type into as um a state because we'll we're gonna need with this in state whenever we when we will implement the back end so we will be able to send the value from state to the back end so uh for the state i'm gonna use the ustade hook so message set message equal to use state and empty empty string let's import the use state for the text input the value will be the value from our state which is message and on change we will call the set message to change the value on change what does it have here event probably and text input and here event dot target the value isn't that how it works no even the value event dot let's check the documentation forgot that react native text input number of lines just works in android yeah probably that's only for android uh unchanged text oh yeah one change text not on change that's what i was missing message and unchange text save and yeah if we type it doesn't look any different but right now the value is saved in the state so what we can do with this is to conditionally display a different icon based on the message if the message is no then we will display a different icon but for the text input i would also put a placeholder which will be a text displayed whenever there is no text there so it's type a message placeholder type app message save placeholder come on why don't you display command d reload yeah type a message is displayed there okay so as i was saying like um in our button container we want to display conditionally different kind of icons based on the message so to display conditionally we will check if message so if a message is null then we we want to display this material community icons which is our microphone however if message is uh let's do it like that however if message is not null we want to display the send button so the send button is [Music] yeah for material icons uh and it's called send material icons material we need to import it material icons the name is send as well 28 let's see so right now the message is null and it displays the microphone if we start typing it changes to send if it goes back to null it changes to microphone so that's how we conditionally um yeah we conditionally render this based on the message or yeah let's let's put it like that and the other thing is that when message is not null the camera should be hidden so in that situation we say double negation which will return uh true if a message has some value and false if a message doesn't have anything so if message uh then no actually it should be only one negation because it should display only one message is null right save yeah it displays if we start typing them like and disappears if it's again no it appears back so uh let's do one more thing let's uh put this view into um touchable opacity to be able to handle the clicks because we'll need that in the next week react native on press will be on press so let's declare that function here const on press and this one as well like if uh message is null then we will call like on micro one um i don't know like microphone or something like that microphone press uh else we will call on send press and now let's just declare like these two function on microphone and console one microphone and the number one the same way console log um sending and let's also add them virtual message that we are sending message and we can also set message to empty string to prepare it for the next message and here let's add some comments uh send the message to the backend so let's press send sending uh something now the message basket is clear if we press it says microphone if we type something then send again like sending this message and the message box is clear so right now our input box is uh developed it's ready and it's also ready to integrate with the back end which we're gonna do in the next week so we're gonna come back and implement here some very simple function that will send this message to the back end so how much time are we live three and a half hours are you still here guys how are you doing i think i i had in mind one more thing but we are so uh it took us so long like three and a half hours because i got into some details so the message input box container works yeah the next thing was this floating button um out of course they are planning to do microphone features actually microphone feature is not that hard and by implementing it i will be able to show you how to work with like recording voices and also sending files and saving these files uh 2s3 like which is as like a service where you uh keep files on aws but we'll see maybe i'll do that in like a third video probably in the next one i will not make i will not have time um thank you thank you everyone who is still until the end um i'm thinking i'm thinking should i implement one more screen uh i i just want to implement this uh floating button and a screen or when you press on it it shows a screen of context basically all the users that are registered so i might need this screen in the next week because i'm planning to uh uh to make this application public so you'll be able to enter register and we can we could even chat everyone on this application so i could show you how it works so yeah i think it's not that much like i think it's around like 15 minutes and we can be done with that because we can reuse some components that we made so yeah let's go and uh implement this uh floating button for creating a new message yeah keep uh let's let's let's go guys i still have some some energy my voice is cracking like my brain is foggy i can't think talk and develop at the same time but i'm trying i'm trying for you guys so let's create a new uh floating button uh directory um floating but or not floating button but new message button new message button let's go index.js tsx import react new message button will be equal function and here we will return do you need any water thank you very much no i don't need i still have it oh my god you're still streaming yeah bro we are doing it um till the end i am planning to to do a stream of 12 hours and i'm slowly preparing for it like i went from one hour to two hour streams to three hour streams and right now i'm doing like three and a half hour stream so yeah i think that i might be already ready for going all in and 12 hours but let's uh let's finish with what's up here i i have something very excited for if i would ever go for 12 hours so it's going to be interesting for for everyone default new message button so view this view this view this view what is the plan after what's up after what's up uh stay tuned and you will see i don't want to say a lot of things but yeah a lot of new builds will come along because i enjoy doing them i see that you guys are taking a lot of value out of them so i will not stop doing these live builds maybe i'll go for some more beginner friendly content like some easier apps and smaller apps that everyone with all the experience like even like the person who first uh who sees iraq native could follow and do so i'm thinking about that okay we need an icon uh for the button and that icon is how is it called something like message camera search alex i don't think you prepared that icon for me but that's not the problem we can go into export icons and see here message and i think it's something like that if we look here yeah it's a custom one but we could go with this one no i think i think alex prepared but for me i just don't see it she even asked him take the challenge and continue the stream for 12 hours i heard it is a trend now between the developers on youtube this one oh god i don't know i don't know uh-huh i need to be more prepared for that so material community icons message reply text message material community icons import material community icons and here we say icons name message reply that's the name method reply text all right text size 28 and color white color white yeah like that my voice come on styles uh container styles container uh i will no let's do it properly till the end 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 that automatically yeah yeah yeah come on let's let's do it and yeah first of all let's display this new message button to see it somewhere uh and that that's gonna be in the screen um chat room no chat chat screen this one so after the flat list we're gonna display new message button like that like that and we go back and we should see it somewhere here i think it is display here but we don't see it so background color will be colors.light dot tint save and we import colors save yeah it's here uh but why oh no no that's all right that's alright yeah i thought that 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 content center and align item center to center it horizontally and vertically center save align center align item items i think you should do mini series show with them also can attract people just a thought could be wrong love your explanation yeah yeah i actually am thinking to to do like a demo feature like a short like two or three minute video and yeah that where i was playing like what you will do by doing this but that's actually a great idea thank you very much alexandra uh actually you have my support i would be interested to watch the stream yeah i would need to pile up on red bulls and coffee to to have energy until the end is it hard to learn ts if you know javascript uh it's very easy to learn typescript because typescript is the same javascript just everything has types so [Music] yeah it's not hard and don't be scared about it because if you don't know typescript you can write javascript in typescript and it's the same thing because after compilation typescript is compiled to javascript so yeah align item center okay one more thing is we want to display this button here on top but we want to display it as absolute position because it it should always be on top of the flat list so position uh absolute types is the type of the variables so like uh java c sharp and c plus plus are typed languages where each variable should have a type for example integer string and so on but javascript is loosely typed 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 so that leads to that's more flexible but leads to a lot of hidden bugs that are very hard to debug later on so typescripts come comes in to solve this issue and yeah add types to make javascript more safe to use bottom zero probably not zero but ten and right also ten um maybe even more like 20 20. yeah i guess that's that's that's good and yeah as you see with the button i've set the position to absolute and it's always here on top of um of the chats all right so right now uh we want to develop a new screen with all the contacts that we will have in our application so we will be able to start a chat with anyone on who is registered for that let's create a new screen which will be i will copy paste it from uh chat chat screen no chat rooms chat room no chats yeah like this i will copy paste this one and say contact contacts and i'll come back and adjust the the code here uh shortly i'll go into the navigation and add into them uh index add a new screen um where yeah let's copy this one and add a new screen here uh this is gonna be called contacts of the component probably we don't need anything here so the component will be contacts screen i forgot to add screen here because i like to have like contact screen contacts screen right yes contact screen add import statement name contact uh is not assembled to type root not found okay yeah i got it so uh our root navigator has like root stack parameters and where we define like which names our screen can have so uh we don't have like contacts and chatroom there yet so let's go into types uh find like root stack navigator there is root not found contact and and and what else was there a chat chat room or something like that yeah chatroom chat room as well yeah right now the red arrows disappeared contact contact okay so let's close everything okay we have our contact screen now whenever we press on this button we should redirect the user to that contact screen so for the button new message button let's add it into a touchable yeah probably opacity will be good um one press will be on press but we will define in a moment and we put our view in this touchable opacity so const on press will be a function and here we will need to navigate so uh to navigate we need the navigation but we're gonna 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 navigation native like from here uh alex from south africa hello i remember you joining the previous stream as well thank you very much for joining and on press we say navigation dot navigate to the page called contacts save and the styles right now yeah let's let's move it around like put them touchable here because the position absolutely is on the container it's on the view so we need that one to be the root uh hopefully this will work save yeah and if we press we go to the contacts right now the contacts are displaying are displaying a list of chat messages but context component is very similar to this one but instead of displaying the last message but it doesn't display the last message and the date so we just display the username and the user profile so we will take a chat list item and copy paste it and rename it to a contact contact list item right contact list item in the index let's rename it to contact list item yeah let's rename everything from chat to content contact content contact paste it here check chat list item contact list item and we're not going to receive a chat room but we're going to receive a user which is a user so from types we import user not chatroom let's take it here so we don't need anything uh yeah we already have a user come on uh on click uh yell and click it's gonna be interesting um navigate to chat room with this this user and from the view what do we have here we will have an image we will have a username we will not have a message so we can delete this one from here and we will not have a time we can delete this one from here yeah also let's see here uh cleaning some styles time and last message we don't have save uh and yeah probably probably user image yeah i guess that's um that's it let's try to to use it in that in our flat list and see how it looks so contact screen let's go to contact screen tsx and our flat list uh i think we have also um thanks to alex we have some data prepared for users no no no not here not here in our data here users so let's export default yeah and this is just an array list of simple users uh and yeah yeah that's that's good so um in our contact screen instead of chat rooms let's import users users send to the flat list our users and instead of chat list item we will display the contact list item contact list item contact and here uh the 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 that's um i think that's how um whatsapp is doing with the contact uh the only thing that they also show is like the status of a of a user i can actually do that pretty easily by going to components contact list item and in the index i will go to i'll do ctrl z until i see this last message and instead of last message i'll do user dot status and we will display the statuses of the users and right now we can safely delete this time and yeah let's go back in our styles to return the last message last message let's just rename it to 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 there how are you uh it will be displayed here with the users um yeah i'm wondering oh yeah and in that screen we shouldn't display this icon let's not forget that close all our contact screen and new message button we don't need that and because we change the type of a user to include the status let's also go to the user say that it also has a status and it's a string save yeah right now whoo now right now probably i'm happy with what we have and that's very ready for the next week to integrate it with a back end are still guys here do you still have powers i'm wondering do uh is there anyone that is following like from the beginning till the end your guys uh the best if you're doing that because i'm already tired so if you have any questions let me know right now because i think that i am done with today's week so let's have a look at what we build we um [Music] yeah we need initialize the project uh we set up a header bar that we see here on top of our application displaying the title what's up displaying the icons and so on uh we display the top bar navigator with all the tabs that we see uh we didn't implement bubblers one but we implemented the chat chat list items and here we see all the our recent chats that we uh have whenever we press on a chat item we display the chat page with that user we display all the messages with uh custom styles based on uh if it's my messages or his message here as well the header with the icons we can type a message and whenever we type the message we see the icons changed there and the last thing is the contacts contact page and here we will see all the contacts that are registered in our application and also in the screen in the header with search icon and the three dots yep okay guys thank you very much for joining i'm already very tired i think the hardest part of all the streams is to do the outro because like my brain is foggy i am tired uh but yeah i want to to thank everyone who has followed along till the end during the livestream and also to all the people that are following it um after the live stream i encourage you guys um to do it yourself not to just watch because watching you might feel that you understand and you might feel that it's easy but try to do it yourself and you will learn like a ton of new information uh yeah you'll get into some problems that probably i also got during the live stream and you'll try to solve them you'll have more time uh you'll try to google invest like that's how you actually learn by practicing so like stop following all the tutorials that you're following right now on udemy or any other platforms like start building some something that you can use and then you will learn like much faster and much more effective and yeah don't forget to join our discord group uh link in the description uh where we can discuss about our builds uh let's build everything together because yeah we are a community let's help each other if someone is having troubles let's write in the discord chat i'll try to help everyone but uh yeah if i don't have time you can do that in the community and help each other and i will really appreciate uh your help and yeah if you didn't subscribe to the channel yet please do so turn on the notification bell because a lot of new content will come in future uh i'm planning to besides this live stream but that i will continue to do which i enjoy i will also do some uh short videos on very specific topics also like tutorials on react native for beginners and not only uh i have one that i'm uh editing right now so super pumped up about that one uh what else what else yeah guys i think that's it thank you very much all the links in the description take care drink water and write clean code guys

Channel: notJust․dev

Views: 500,921

Rating: 4.9249401 out of 5

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, react tutorial, whatsapp clone, build a whatsapp clone, whatsapp clone react native, whatsapp clone tutorial, aws amplify, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app, sonny sangha

Id: EvSUJ5lUcBw

Length: 229min 50sec (13790 seconds)

Published: Sat Oct 10 2020

Reddit Comments

[u/IBETITALL420]

why AWS instead of firebase

[u/ghulam_zainab]

Can we get a clone of stockX application? Does anyone know here? I could not find it but i heard almost 40 clones are available