Introduction to React Native and React Native Paper

in this video we're going to learn all about react native we'll only need some basic react skills and building on those we're going to be able to build out a the beginnings of the Facebook Messenger application so in this video we're going to use um react native CLI we're not going to use the react Expo CLI and the reason for that is we know that we're going to be building a large project out Rec Expo is great for you know prototyping basic applications but if you know you're going to be using different libraries different packages right from the get-go the react native CLI shines for real projects let's say now we're going to use the react router Library it's very similar to Rack or router how it works in react um and that's just going to allow us to navigate you know from the different screens to the chat page and back we're also going to use rack native paper that's the name of the UI Library very easy to use it's just like using Rec native so it's just like using react material UI just the react native version of that so this video we're going to set up react we're going to look at um you know the fold structure some of the basics but it's also suitable not just for beginners but also for people wanting to build out a real react native project and we'll be building out the react um Facebook Messenger clone so check it out um and let's dive into the code [Music] this is going to be a react native tutorial suitable for anyone that's never used react native or also for people that have used react native as we're going to start from the ground up we're going to build out the Facebook Messenger clone all you need to do or have to follow along with this series is just basic react knowledge so you should be able to at least build a grad application in react and building on those skills we're going to build a Facebook Messenger clone so the first thing you want to do is you want to come to react native.dev to the docs to the environment setup and you want to set up the emulators on your machine so just go ahead and come here and all you have to do is follow through the instructions it's important to note that if you're on a Windows machine like I currently am you won't be able to get the iOS emulator on your machine so you'll need an Apple device for that but don't worry we will swap over to my Mac machine later on and make sure everything works on there as well um I'm just more comfortable on the window so I do most of my work on the windows and then I cross over to the iOS at the end to make sure everything's working on there um so basically what we want to do is we want to come to our react terminal here sorry our Visual Studio code terminal I'm currently in a react native folder with a bunch of other react native projects in here um but don't worry about those um I'm going to run a command to create the react native application so I'm assuming that everything you follow the documentation and you know you're able to get everything set up and then we can run MPX react native and then you can run a knit and then I'm going to call this uh the um Facebook messenger uh actually I might just call it Facebook Messenger Facebook messenger it's like that and we can just go ahead and we'll need that Rec native package and then I'll just let that install so basically while that's installing I want to show the application that we're going to build here so we can see that we have the ability to jump between the different pages different tabs here so we've got the stories tab the people tab the calls tab and the chats tab here and then I also got some simple profile pictures and usernames here and then you can click on an individual profile and then they'll navigate you to this other page it shows you the particular ID so this says id1 and we'll be able to hook into that when we um in the next video hook up API request with axios and do some authentication stuff but just keep seeing it's nice and simple you know we can navigate back and forth um so it looks like things have loaded up for us so I'll go ahead and I will control C this and I'll also make sure to close this uh terminal so I think the very first thing we want to do here is we want to CD into the Facebook um Messenger application um oh I'm actually we need to go back one CD into the Facebook Messenger um folder here so I'm just going to run a code dash r dot just because I want to jump into that particular folder here so I'm just going to give a quick overview um of the file structure here so if you've used react before and you know I hope you have a good playlist on react such as the Amazon clone series um the follow structure will look similar but it looks like there's a few extra things in here so let's just go through that so package.json that's obviously where all the dependencies are managed tears config that's the typescript stuff it's important to note that in the latest versions of react native typescripts of first class citizen meaning it comes bundled with it previously you had to select the typescript template but that's why we've got this TS config Json file we also got this Metro configs which helps when you load up the application to look at it um you know we've got the standard index.js file which bootstraps the um app the main app file uh then we've got this gem file and we also got this Ruby version um the reason we have that is because um on iOS um we actually need to use uh Ruby behind the scenes to be able to um you know start our iOS application up and install some of those dependencies and stuff like that um you know and then we've got Babel um that just helps transpile or compile our code into such that it works with older devices um you know we've got this Watchman config there's nothing really in there but um so we also got this pretty uh thing here comes with prettier and Es lint um we're just extending the react native Community guidelines so um you know so our codes formatted in a nice way while we're here I might just go ahead and I'll just add in a um End of Line I believe it's here and the prettier RS End of Line I'll just set this to Auto here just because I was playing with some settings um and I was getting this error for the CR carriage return as I was swapping between the mac and the windows devices node version that's just the version you got installed uh git ignore obviously ignores the files when you go to commit to GitHub no modules they're all the dependencies um and the two main different folders here um we have the Android folder and the iOS folder now this might look a little overwhelming but actually we don't really need to come into it that often the main benefit of react native is we can essentially have our source code um and I mean our react code is just like a react code base with a few um you know differences which I'll cover but you know within a few days you can more or less get up and running with react native and then after about a month or two you can really feel comfortable as if you were just in a react code base because it's quite similar but with the IOS and Android stuff um each of the devices well basically you you write your react native code as normal or um and then you can build it and you know you can build it and bundle it to the Android and iOS devices so you don't really have to come into here the only time you have to come into here is is if you're doing something like where you need the phone the user's permission so if someone like wants to access like the images or the files or upload or know your location or stuff like that sometimes you have to go into the platform specific stuff and add a few um you know permission related things um and you might have to install particularly on iOS iOS you need to go in and have those extra installations that need to be done but the good news is that is all really easy because um in all of the libraries that we use um they have documentation on that um so you pretty much just install the library and copy and paste a few lines of code in there and then that all works out for us so let's just look at the app TSX file so it's quite large at the moment and what I might do just before I run the application is I might just install a couple of dependencies so if I just open up the command line again what I'm going to do here is I'm just going to run npm install now we saw um in the demo at the beginning of this video um what we're building and we're actually using a library and I'm using react native paper and that's just like a UI component Library it's sort of like material UI but specific for react native there are quite a few of these so you just got to have a look at them and see which components they have and all that sort of stuff and I found this one to have a nice tabs component that I could use and that was one of the first things I wanted so I pretty much just got this um I do like Tailwind quite a lot but I wanted to mix it up a little bit and just try something else out um and then part of this UI Library if you look through the documentation um they have like icons um and um so let's try find one in particular um I don't know if we'll have it or not but here you can see there's a button with a icon associated with it for the icons to work we also can just use the material design icons so you can just come to material design icons and then let's say you want a hot or something like that you can just search for that and then we can use these icons they work with the Rec native paper um and we'll see all of that and we'll set that up so we can come here and we can just run npm install react native paper and then we're going to need react native Vector icons and then we're also going to need react native safe area context and the safe error context basically on your phone on your mobile device you know how you've got that little camera at the top um it just makes sure that um our screen doesn't get lost behind there so that gets chipped out away from there and then there's a particular wrapper that's getting used here again the rec native Vector icons they're relating to the uh icons that we need to use in the rec native paper Library one final thing here is I'll also have react router native now Rec router native is very similar to the rack router that you use in regular react apps um and that's one of the reasons I like it is because it's just so similar to that you know you have to navigate Hooks and all of those sorts of things params and stuff like that that you can use and that just helps to navigate between the different screens that you're on um so that's a helpful library and we'll use that one thing to note is I'm currently on a Windows machine but when you install some of these packages you sometimes you need to look at the documentation not always but depending on the package that you use you might have to CD into the iOS folder and run MPX um pod install now I'm on a Windows machine so I'm going to get this um you know Coco pods is only supported on Darwin machines message which basically means that it's not going to let us do that but if you set everything up on the Mac and I will jump back over to that um later on um but essentially you know you need to have that cocoa pods to be able to install the dependencies and stuff like that for certain not all but certain applications so just to illustrate one of the differences if we come to the documentation for the react native Vector icons um this package if you look at the Android um documentation and this is something you sort of got to get used to with Rec native is you've got to go to the documentation for the library that you're using and then you've got to look at the instructions for both Android and also iOS so I'm on Windows here and not always but sometimes like in the case of icons um you know that might be like a platform specific thing so the icons look slightly different on different devices you need to actually go into the Android toad so it's really easy like they tell you exactly what to do so you can just like copy this line here um and then just go to the file here we don't have to worry about all this stuff and if you are on a Mac you'll have to just do the similar sort of thing for the iOS um something we'll come back to um but just to keep things simple for now let's just use one emulator and let's just do an Android because everyone can use that um so we can jump in to the Android folder here and we can go into the app folder and we can go into the build Gradle file um I believe it's here um so let's have a look here um so Android app build Gradle okay so this one here there's two build grade Gradle files you just got to make sure you get the right one um so we can see that we've got this um apply plug-in for the Android um just below here we can say apply from node modules Rec native Vector icons um so we can grab that there so with all of that let's just run a uh what is it we just need to start this up so we can just come to oh it's npm run Android and just to make sure it comes to the package Json file we see this you've got this Android command and then we also got this IOS command so you can also run that one as well um so I'm currently on windows so I'm going to look at the Android emulator with Android Studio um so make sure you go through that documentation to set that up otherwise you will get stuck at this point here um basic stuff it sometimes it takes a little while to load for the first time but once you've got it installed and if you already know react you should be quite comfortable with installing packages so hopefully there's no dramas with that um don't worry about that squiggly line there um so let's just wait for this to load and one thing you'll note is it opened up this like node terminal Metro thing it's important to note that if you run like let's say you're on Mac and you want to run the iOS emulator you sort of have to close this and reopen it and even if you're re-running some of the Android stuff sometimes it gets into the state where if this is open it's sort of like the last session and if something errors and it gets into like a strange state that's a good habit every time you start it to or stop it your server to close this and then rerun the start command um just so everything runs smoothly um so this is taking a little while so let's just go back to the app TSX file and let's just collapse this for the time being we can see that in react native we can see that we've got all of these components and this is one of the first differences between react and react native is on a mobile device there is no like in the native applications there are there is no browser so because there's no browser we don't use things like HTML uh like divs and regular HTML this is XML I'm pretty sure which is like a superset of HTML um meaning or basically all that means is we use the tags the same way where we got the open and closed tags but we need to make sure that we're using actual components and the good news is there actually isn't that many like if you look at the react um documentation um and then we just have a look at some of the basics let's say you can see that there's these core components and Native components and there really isn't that many like there's a text field so if you want to use text you've got to use a text um either text or text input you know there's a view a scroll View and actually it might be easy just to look at the basic setup we got here so a view is it basically just like a div um this section that's actually like one of their components that they built so let's just get rid of that um actually I sort of want to show yeah here's what it looks like when you load it up so basically What's Happening Here let me just undo that for a second they just have this section here um which is one of these sections here but you can see like let's just look at the code and then look at the application um the first thing you'll see is well the first thing to note on a mobile device is like you have way less space so you quite often have this scroll view component and a scroll view component just means like you know you take the space up for the screen size but then you can scroll within it sort of thing so that's like a core component scroll View and then you got the regular view which is like it just doesn't have that scrolling ability let's say um these sections these are like the custom things so let's just go ahead and clear that learn more links um and then you got like a text field but you know they really got like three or five of these components that you have to know and then you end up just like making your own components or in our case we're using like a component Library um so we can just get rid of that um one thing to note though is I don't know if this was obvious before but each of the [Music] um elements they're actually like columns by default so let me just clear all of this code um just so we're starting at a relatively empty file here so let's just get rid of all of this get rid of this for now we'll get rid of this money to re-import that um we can get rid of that okay so let's just go ahead and just save that okay so I'm going to come back to these Styles here so basically let's just build out basic um page so we sort of saw what we're going to build um and let's just start off by let's get rid of this as well and we've installed that safe area provider so this is going to do a similar sort of thing we can just wrap our application but then this works with the particular um UI library that we're going to use so we can just go ahead and we can just save that there um okay so if you're familiar with providers will know that this is just going to be wrapped around our actual code so let's just start off by having a simple view here and this is just to illustrate a few Concepts and then we'll just have a text here so this is like one of the most basic applications in Rec native that you'll probably ever see um if you feel a react native you might want to skip through this introductory section if you haven't already but pretty much right now we're going to actually get into the react native paper and also the navigation stuff so we're going to get into that now and we're also going to be building a complete Facebook Messenger clone using this so I'm just sort of making sure that for anyone that's just complete beginner and react native that you're able to follow along but we're also going to jump into some more advanced stuff pretty quick as well but using some of the foundational tools um so the first thing you need to do is you have to import these from react native so I think of you pretty much in the same way as I think of a div and text I think of like either a H1 or a paragraph if you put the text outside of a text you again error so the if you write text it has to be strictly Within um so let's just close that just for now um oh I forgot about this um if you get this error where react must be in Scope when using uh I believe the solution today is because we've installed um yeah paper or whatever um we need to actually basically we've got to come to the es linked file and then just add this rules here um because we're on a latest version of react this was for older versions of react um where jsx users react reacting jsx scope if you add those to linked um basically they'll get rid of that error there um so let's just go ahead and see where we're at so basically we can see our application we can see that we've got this little black uh thing at the top and that's simulating the area at the top of your mobile device and a safe area just make sure that you know because some devices they have like a camera that's sort of in this middle at the top section there cuts off let's just make sure that the whole application fits well on the screen so that's what the safe area provider does View the one thing to note about view or any of these elements is by default rack native uses Flex so if you're not familiar with flex um you should just have a quick look up on Flex the difference is that um usually Flex rows the default but because we're on a mobile device where the rows are small and it's like one um you know the Y plane is really long it makes more sense for the column to be the dominant axis so by default Flex uses column um so that's just one thing to note is that if you're used to doing like justify Center for your flex and item Center just know that they're flipped around um that's just something that takes like a little bit to get used to um so basically I'm using this paper Library for lateral components but one thing to talk about before we jump into using third pay libraries is just using regular styling so basically to do regular styling you have to do this like style sheet thing so you can just import that from react native and then on the style sheet itself um like for example let's say what we want to do is we want to uh have a container for our application and let's say we want to have a background color of red so super basic stuff and then on our actual um element or our container we can just reference the Styles style sheet that we're creating and then we can just have our container there so it's just regular CSS wrapped around this style sheet create function which then we can consume by our different elements that we're using and it's important to note that these are not web elements there's just like there's like basically five or ten react native elements and we'll probably see all those in the course of just this first video um so yeah let's have a look at that so we can see that we've got this red background here so one thing to note one property like one yeah one CSS property that's really really important to know what it does in rack native is flex so the reason Flex is so important is or Flex one in particular is because um basically what it what Flex does is it takes up the remaining space so before we saw that the red line ended underneath by our mobile device pretty much everything we want to do and needs to be concerned around taking up the space of the screen or the remaining space of the screen um even when we got scrolling involved because scrolling is still related to just having the screen size at the height of the screen um and the scrolling happens within that height so Flex one um and just knowing that every element is of column a flex column and the property Flex one um that's huge that's just like half your CSS basically for everything um so I mean obviously there's more to react native than just that but we've sort of covered the markup the HTML equivalent and we've also handled the CSS sort of stuff um if you like Tailwind you can install tailwind and then you could have like class name um and then you could have something like um you know BG red 400 you might prefer that I actually do prefer that I just wanted to play around with another UI Library um so that's why I'm doing it this um standard approach or default approach but it's good to see this as well especially since this is the first um video on the react native um but again if you're watching this video chances are you've been a developer for some time um and you probably have your own preferences the good news is react um the JavaScript code and is basically the same as how you write JavaScript in react so it doesn't really take that long to get up to speed with using these elements rather than the HTML elements and styling you can even make similar to Web projects or you could take this approach where it's more like a CSS um approach and then pretty much everything else is just the same as regular react so let's go ahead and just use the um you know use the library um so I think what I want to start by doing is I want to make those tabs so it's really quite simple um we can just come to the react native paper documentation and they call it a bottom navigation and if you look at that bottom navigation you see they've got this sort of thing here which is pretty much what we've got um so I'm just going to copy that pretty much all of this code I can just copy so I'm just going to go ahead and copy this here and rather than having all of this stuff here oh before I do that though one thing is to note is when we're using rack native paper we need to wrap everything in this paper provider so I don't know if that's gonna get the import for us or not uh probably not but we can just go ahead and import that so from Rec native um so let's import that so we can import provider as paper provider um from rack native paper and they give it to you as provider but I'm going to explicitly call it paper provider just to avoid any ambiguity [Music] ambiguity why can't I say that word um yes just to make it clear um that this is related to the paper provider uh so yeah so ah that sorry that threw me off for a second I don't know what happened there um so I basically we can just have our normal react code here I'm just going to go ahead and import use state let's just go ahead and import that from react we no longer need this text or this view or we might need the view I'm not sure um actually we'll probably need the text as well but basically what we can do is we can just go ahead and we can have our um bottom navigation they call it here so let's just go ahead and throw that in there now I don't really like the word bottom navigation it is a bottom navigation um but in the react native paper Library they use it isn't just this part here it's also what's rendered above it in this screen here as well so these are sort of like the main screens so even though they import it at the bottom navigation um or call it bottom navigation I I more think of it as the screens so you can call it whatever you want I'm just going to go ahead and call it as screens just because that makes more sense to me um so yeah so let's just go ahead and just save that um now I'm going to use this text um I don't know if I need the view um actually I don't need the text either because they got the text from uh Rec native paper so I'm just gonna put that in there as well um and rather than like what they're doing here is they're using like I don't know exactly I don't know why they're doing it like this but they're basically rendering the component um I prefer something simple like this um so let's just call this music here save that uh what's wrong with that oh do I need a probably need to call that screens now so yeah does it need to be like that I'm not sure actually um oh my God okay so I'm not really sure why that was happening um so we don't we no longer need the Styles so we can just get rid of those which means we can get rid of the style sheet here um foreign so let's see here I'm just going to copy this just for now I'm just going to have two for now um which means I can get rid of these here so they got the key which corresponds to the element that we're rendering um so we've got the music key and the albums key which relate to these here so I'm just going to go ahead and copy this here and I'm going to get rid of this Ace link thing in a moment I just need to get something up and running uh so this is the albums here so let's see if that's broken everything Okay so we've got favorites and which is related to this title here and then we've got albums so you can see already that we've got the component more or less working um so that's how easy it is to get it working now we just need to tidy up the code a little bit um so let's do that and let's make it more specific to what we're actually doing so yeah I mean let's start by just using typescript a little bit to have a type for this year so we can come up the top here and we can just create an interface for the I'm going to call it nav routes and that's just so we don't get confused with the built-in routes type that they have they have a routes type um so I'm just going to call this navrats which is essentially going to be the same thing so it's going to be a key title uh and a focused icon I don't want the um basically they got this like unfocused icon if you see it like this oh well it's not working now um let's have a look here yeah so you see there's a love heart but then it gets filled in solid when you click on it um I don't actually need that for my application so I'm just going to get rid of that um and then I can just go ahead and I can say well we want the state to be of the nav route um an array of navrats here um and of course you could probably clean this up even further by having these in a variable that you import from another file or something like that but just to keep things simple I'm just going to have the chats uh icon and again if you can come to the material design here if you can't type in chat for example you can get all of these so I just looked at Facebook Messenger application and found some icons that are sort of similar similar enough um and then they all have the label associated with them so you can just type in chat for example um so yeah I mean you can have calls as well I'm gonna make this uppercase though which will use the video one for and then I'll just shift alt down this twice um so we can have people people account stories stories book as the icon um and then we can go ahead um and we can copy this down so we can have the chats key we can have the cause key we can have the people key and then we have the stories key so we'll be adding router as well um it's not really necessary for these routes it's more for like other routes that are off the main route let's say um I don't know why this is erroring let's have a read through it do not define components during render rack will see a new component type on every render and destroy the entire subtree Dom knows then all right so maybe I might have to Define it hello doing it uh still not convinced um but yeah so we could just have something like um calls chats cause people's story chat chats cause people stories so Yeah so basically what we're doing here is for the screens component that we're using um it actually works I'm just considering turning that link rule off so we can already see that this is done what we want it to do but essentially to that component you pass in this scene map thing which has the keys of each of the titles corresponding to the key and the icon and then it internally sort of manages the state um So based on this array here this array of objects whatever one's selected you will know that and it can select the index of that and then we can you know have this index here for now um which keeps that track of that um and then there's this callback two set index so it tells you which one is which so we're actually not using the rec router library for that um so that's okay because we we just want to use it we don't have to use it but every single thing this is sort of like in a web project you do but on a mobile device we only need the URL for um like things that we're doing ourselves for example like if we're on the actual chats page and then we want to click on a specific chat well then it makes sense to I mean you can even then you can still just show a different component and hide this but it it becomes a little easier to just use the rack router native library to do that sort of stuff so let's actually we'll jump into that I just want to sort of look at this for a second uh maybe I will just do it how they do it um which is like this uh let's see here so like for example let's have the chats route which is just that even that does it even doesn't even like that do not define components during a render okay so if I have that there it doesn't like that either right so what can we do can we just turn that off correct no unstable nested components probably we shouldn't turn that off let's have a look here okay so that's that solves it for us obviously we're losing some of the es linking stuff for unstable components but I sort of feel like it's just getting in the way at the moment so let's just turn that off um okay great so now we've done that and everything appears to be working we can go ahead and we can start to add in the chat page so let's do that now we've just got like this flat folder structure here so let's go ahead and create a source folder and in the source folder let's create a screens folder and then in the screens folder let's create a chats folder and then in the chats file let's in the chats folder let's have a index.tsx and I'm just going to use rafce this is the web-based one there might be a react native library for this but this gets the boilerplate up good enough for me so I'll just go ahead and delete that um and then I'm just going to change this to a view delete that import view from react native I'm not seeing that let's just get this gets us halfway there you from react native um ah yeah I thought I'd fixed this by having this here I might run a real Ctrl shift p it's a Reload window will that work or do I actually need to close and open again okay so that looks better I think when I update the prettier it didn't actually um now I'm wondering if this can be removed oh no we'll add that back then um okay so yeah okay I guess we need to reload the window for those prettier effects to take hold kind of makes sense because the default settings that we've got in vs code would be working there so okay enough rambling let's get into it um okay so basically what I want to do is I want to firstly just display a list of users here so I'm not going to give it a typescript type because this is just going to change um so I'm going to just have a friends and this is just going to be a very simple object which will just have an ID and a name here um and then I'm just gonna go ahead and copy that down twice and I have a two and a 3 here and let's become friends with Larry and Barry here so we can just go ahead and we can get that um while we're here we'll probably want the text um Rec native component there we'll probably want the style sheet and then we haven't seen this yet but there's also a component called pressable and that's just like a button it has a on press method rather than something like on click because on a mobile device you're not clicking you're pressing um so it's just basically a button that you can wrap other components with so you can have an event fire off um so let's just initialize our style sheet here oh didn't want that um so we can have a cons called Styles here and we can make use of the style sheet we can go ahead and just run create and then I'll just make a container and then everything inside so basically I don't know if it's in error state but basically what we're creating here is this chats page here everything above the navigation in this area here that's what's currently so if you look at the word chats here that's what's currently getting rendered for that chats page so we want to take up the remaining space so this is where the flex one property comes in handy and then we'll just give that container a little bit of padding so 16 pixels ought to do it um so then we can come to our view here then we can just Chuck on this style here ah okay great so we can check on this style here kind of the Styles container and then we want to Loop through all of our friends so this is exactly how you would expect it to be same as react so for each of the friends um we'll just go ahead and we'll render a button so they can click anywhere on that so we'll just use the pressable here now pressable it needs to have a key and we can just use the friend ID for that and then it's also going to have this on press method here so they'll just be like a callback and for now we'll just leave that blank but we will use the navigation library or the rec native router library to navigate there um and so we can have a view here so for each of these we're going to get a particular um you know we're going to get a particular friend that we're outputting so we could even put this into a sub component if we wanted to um but just to keep things simple I'll just leave it here for now we'll probably come back to refactoring everything later on so let's create a friend CSS class so the friend it can have a flex direction we need to set that to row because it's a column by default um and if it's a row we want the items um across the minor axis so in the y direction or the column we want to align the items to be centered and then we just want to have a margin bottom just a little bit for each one so there's space between each of the um friends uh and then while I'm here I might as well do the last CSS property which is the profile picture um the profile picture you want a little bit of space between that and the text to the right of it so I'm just going to have a margin right of eight pixels here so we can see that we've got this view here um and then we can go ahead and we can use the avatar from react native paper and then we can use the Avatar image this should be self-closing we'll give it a size of 72 pixels we'll give it a style of the Styles dot profile picture and then we'll give it a sauce so the source is an object itself so we can have a object here with the URI of it um and then I'm going to use back ticks here um so I can come I think I've closed it now okay I think the website is https dot colon slash random user this is like an open source to Generate random profile images again we'll probably come back to something like this to get some user images but they have portraits the API there's portraits to get the particular images they go for men and women um and then they have like a particular number so I can actually use the ID that we have for the friends here to just generate something and then I think it's a JPEG file so I think something like that might work um and then we can have this other view so remember we've made this a call a row this whole thing's a row we run the image on the left and then on the right we want the um two text so this will be a column by default and then we can just have a text element in it which will just be the friend name and then if you look at Facebook Messenger app you can actually see like the last message or some of the last message so I'm just going to simulate that by saying this was the last message uh they also have like the date you've seen it so we're gonna dive much deeper into like all that sort of stuff but for now we'll just add code that um so profile picture we've got that and the Styles friends uh let's have a look here okay oh well first thing I want to change the index file I want to call this the um the chat screen I'm using index here rather than chat screen because I want to have some other components later on um just to avoid confusion between what the main file is for that particular feature or screen um so that means here we can just get the chat screens so we can just go ahead and we can just use it like that um chat screen dot Source screen slash chats I think that should be all right yeah I'm not really sure why that's not working let me just try to close this and npm run Android again hmm kind of looked like it was working for a second there um is that not working looks like it's working I think it's just bundling and loading taking a little while all right so that looks like it's working let's just see all right great so we've got some basic friends output there um in this chat screen now the next thing I want to do is I want to be able to click on that and I want to navigate to a singular chat screen so I'm going to create a new folder here I'm going to call it chat and then I'm also going to have a index.tsx file in here and I'm just going to generate a component here and I'm just going to call this the chat screen um so this is the chat screen not the chats screen let's just get a view here instead of a div there probably is a library that or an extension that helps with this if you know anyone uh comment below I've just been too lazy to look for one um yeah why doesn't it give me the react native top right all right let's do this again so we'll get this view we can't do that it's going to come from react native so this page itself is going to be quite simple so I think I'm just going to jump into Akinator paper and get the um back action here so I'm just going to go ahead and copy this here and it's at bar with a lowercase b uh so just make sure you don't do the uppercase B so will this give me that Okay so okay so now we need to add some like navigation um we probably want to make sure that this is similar to this here where we've got the flex one so it takes the remaining of the screen so we can pretty much just copy this and delete all of that there and then we can have a style here equal to the Styles container and then we can just import that real quick so we got that there um I think below here I'm wanting to have the View which is going to have some text and for now it's just going to say chat ID but this is just going to simulate like having Dynamic data um so we can just go ahead and import oops import that um I wasn't like that though I'll come back to that um and then we probably just want like this app bar will take the full width of the screen then the text underneath we probably just want to have a bit of padding so let's just add the chat container here which copy that down here add the word chat here container padding 16. um so we haven't actually got this yet so we need to actually set up the routing um is that just complaining because that's not there I don't know we'll come back to that so basically right now we've just got the screens um so if we come back to the app TSX file here basically we want to use react router so we can actually repel application which is everything well right now it's just this um so we have these providers around it we need to have this native router um and then we also need to have the routes wrapper around this if we're going to use a route so a route this is a self closing tag this will just take a path here so by default we can just sent it to the slash path and then I'll have the element here and this will be the screens element so even though we're navigating to like different pages like this screens component is sort of like making it such that it's showing a different component and the reason I'm doing it like that is because um this react native paper UI Library it not only shows you the bottom of the you know the bottom tabs but also puts the page and it wraps though it sort of couples those two components together which I don't think is ideal but with those limitations um you know I've decided to bundle it into the red it's all fine it doesn't really matter because we're not in a web project uh it's just a little strange to me um of course if you really wanted to route to it you could just use a use effect hook like a life cycle hook with a um so on instantiation uh on render it can navigate to the particular path if you need it but I don't need it so I'm quite happy to just render out the components to this I'm more thinking of getting to the specific chat page because it doesn't have the bottom navigation stuff on the specific um chat screen which is why I've put this stuff in a route um and then I'll probably want to have another route which will go to a dynamic path so I'm going to say slash chat slash colon chat ID which corresponds to this chat ID that I'm going to extract um so basically from the chat screen when we click on a profile or a chat I want to navigate to that particular ID and then based on that chat ID or it might even be the user ID but we'll come back to that when we add real data I want to show the element um the chat screen element so I'll save that I probably need import that and that um so yeah so let's add that navigation stuff in from chats so it's really quite simple all we need to do is put our hook up the top here and we'll have a navigate a function here which we can access by the use navigate hook which is coming from native we can just say here um we just want to navigate and we just want to navigate to slash chat to the particular ID so we can just go ahead and we can save that so that should get us from all of the friends and then it will go to this path here and then this path here will give us the chat screen here so and similarly we want a way to be able to get back to the chat screen and by default the chat screen is the initial screen um now if it wasn't maybe that'd be a use case for um using some URLs for these routes here and if it turns out we need that we can go ahead and set that up but I don't I don't think we need that at least not at this stage here so we'll follow the yagni you ain't going to need it principal so won't over engineered too early we'll just deal with it when it comes um so yeah let's just go ahead and copy this in here um so this is a individual chat now so we actually we can just navigate actually we can just navigate back to the home page here because that'll take us back to the well our home page is the chats page so that just happens to work out nicely um now we can use the params to get the params so let's get the chat ID so we can destructure that from the use params so let's bring that in and let's also bring this in here um so yeah the way that works is well we've already seen how this route renders so we're navigating to that route this is a dynamic part the chat ID I mean honestly I think that's probably the wrong variable name but I'll come back to that um and then we'll get that out and then based on that we can show that and then that exactly how we've done it there that's how we're going to show um you know the particular user or based on the friend ID we can make the request uh you know we can hit the cache get the previous messages quickly um and all that sort of stuff future messages will be able to send there um have the room number all this sort of stuff so I mean again I'll come back to that when we're using real data uh still trying to figure out why this is erroring so let's just hover over this read this try to figure something out um I'm not really sure why that's airing at the moment but if you look at the application uh it seems to work maybe we need to reload or something like that um I might be missing a property or something but if we come here we see that we've got the chat ID of one you can come back and for the second you can see the chat ID of two uh and so on so we can see that we've set up our react native application so this was just an introductory this was a real beginner's tutorial um but it also shows you how to use the react native paper library and the react uh router native Library how to do some basic stuff here get some different pages going um using components and that navigation stuff there um so using based on those fundamentals in the next video we're going to set up the authentication pages so we're going to protect the routes we have to sign up and the login so we're going to use our nest.js API for that and then we're going to use axios to do some of the interception of the tokens and stuff like that so we can have these as protect pages um and we'll also do the you know the Json web token stuff users sign up hashing the password and all that sort of stuff that gets handled in the back end so make sure you subscribe to our YouTube channel and stay tuned for that next video thanks so much cheers

Channel: Jon Peppinck

Views: 6,104

Keywords: react native, react, javascript, react native tutorial, react js, react native for beginners, react native app, react tutorial, what is react native, programming, react native course, mobile development, app development, learn react, why react native, why learn react native, why react native is not garbage, react native tutorial for beginners, learn react js, react native ios, what is react, react vs react native, react native material, learn react native, react navigation

Id: Cr5eXyr6CJ4

Length: 74min 31sec (4471 seconds)

Published: Tue Jan 17 2023