React Native with Bottom Tab Navigation (1)

all right in this tutorial we are going to finally add that tab navigation to our app so just to kind of give you a preview of what we're going to be doing i've got my app up here we're going to log in and when we sign in it'll display our navigation here at the bottom with some little icons and if i click here this will be active color and then info so i've got three screens and i can navigate between them i can also go from this screen back to that screen and then i'm gonna sign out and it should take me back to our sign in page so let's go ahead and get started adding this all right the first thing we're going to do is go ahead and open your project in vs code and then we're going to go open a terminal and let me just go ahead and expand this and then we're going to be using a package called react navigation uh if you go to reactnavigation.org and then go to the docs here and the get started we're going to start here at the top and installation the bare minimum we need is this react navigation native package so copy that and then we'll do npm install oops and then we'll just paste that here and make sure you add dash dash save so this can save to our projects packages.json file all right so now that that's installed let's see the next step we want to install some more dependencies uh we don't want to do anything with expo we've used a bare react native so we're gonna follow these instructions so i'm gonna copy again this here go back to my terminal paste it and again let's just do dash dash save all right we're gonna need another package here so since that was the bare minimum there's a bunch of different packages here kind of like they say they're like building blocks so we're going to use the stack package here so copy that and we'll paste that in dash dash save and there's one more and then we'll be done with installing everything we need the next one we want is the tab navigator so there's a tab and there's also a drawer drawer is kind of like this type of navigation we won't be installing this we're just going to be installing the tab so npm install here again go to your terminal and then dash dash save all right and then finally we're going to cd to ios and install these for our ios packages so pod install and return all right now that that's done let's go ahead and see if we can run our app so cd up one directory and then react native run ios all right so now our app is running let's go ahead first thing we want to do is open your app.js and at the very top here of your file before all the other imports we are going to import react native gesture handler and make sure this stays at the very top and nothing comes before this all right and then next we're going to create a new file in our source directory we're going to call this user context dot js and we're going to use this file to share our auth data between the components so that we don't have to explicitly pass them through import react from react and then it's just const context equals react dot create context and it pass that an object we'll say user data and we'll just set that to null for now and then export default the user context all right and save that the next thing we want to do we're going to create a new folder in our source directory called screens okay i already have a directory called screens if you don't go ahead and create one mine's empty i'm gonna create a new file in there called home.js so this is just gonna be a bare minimum home screen landing page so first thing first we're going to import react from react let's move this out of the way so we can see i'll just import um safe area view and text components from react native and then const home props pass that in and then we're just going to return safe area view so this component what it'll do is it'll safely display the content of your screen so it's not covered by these navigation etc up here all right and then let's just do text home screen that's not right let's go ahead and fix this oops so we're going to return safe area view and we're just going to display a text that says home screen and i'm also going to add a little bit of styling to this we'll make it a flexbox and we'll justify content center and align items center we have our home screen and remember we had a home a profile and a about in the bottom now so we need three screens for those i'm just gonna copy home a couple of times and rename it i'm gonna rename this profile and i'll rename this one about actually i'm going to create one more and i'm going to call this my info all right let's go and change the text in these actually we did forget one thing we need to export this so we can import it into our components and use it and then for about let's just call this about and then we'll say about screen export default about so we have about we have home and then let's do my info my info screen export default my info same profile all right so we have profile my info home and about so we've got all our screens we have our user context and then finally we need to add another component for our navigation so i'm creating a file called navigation.js inside the components directory first thing we're going to do we're going to import react from react this is a component and then a couple things we need navigation components from those dependencies so we'll need um from at react oops react navigation native and what we need from this one is a navigation container and we also need import a component from react navigation stack and what we need from that is create stack navigator then we're gonna import from [Music] react navi bottom tabs and what we need from here is create bottom tab navigator so this is to create our stack this is our tabs and then this is our navigation container itself all right and then i'm going to use import icon from react native vector icons i'm using ionic icons let's just call this call this ionic icon if you just google react native vector icons i'm going into the directory here so i'm going to be using these icons here for the icons in the bottom tab in my navigation and you can use any of these i'm going to use a couple from ionic icons and you can use any of them or you can mix and match whichever ones you like next we're going to import our all our screens so let's do that import screens so import home from screens home import about and then import profile and then we had my info all right one more thing i want to uh import up here a few things actually let's import text and dimensions from react native i'm going to use this dimensions to set the width of the tab at the bottom of the screen and let's just declare a const uh full screen [Music] with equals dimensions dot get and it's window dot width all right that's i think all we need to import for now all right so we're going to create a stack by calling create stack navigator and we're going to create three stacks meaning each of those tabs in the bottom of our tab is a stack of screens so we're going to define a function called home stack screen oops and this is going to return stack dot navigator and within this i'm going to return stack dot screen and this has a couple of props name for the name of the screen and the component that it'll render this will be home will be our home screen and that's all we're going to have on the home stack so any additional or subsequent screens you want to add like i can navigate within this screen to sign in this would all go into one stack if it was the home screen and we'll go over that with an example in a little bit so let's do let's copy this so we can just use that for our about about and it's gonna be about and this is gonna be about okay and then we're gonna paste it one more time for our profile all right so we have three stacks a home and about in a profile stack and they each return the stack navigator so it can navigate to all the screens within this stack so let's say within the profile screen i want to go to the my info so i'm going to add another stack dot green name equal my info and component equal my info so i could even go oh i want to go to the about from within there i could do that but i'm not going to but you can navigate within the screen to any other screen that you like you just have to include it within the stack and again we'll go over example of this all right next let's go ahead and define tab which equals create bottom tab navigator going to define our navigation component and this is going to return a navigation container and that will include tab dot navigator and then in the tab navigator we're going to include each of the tabs that we're going to display down here and to do that it's tab.screen and this also has props name name of the tab and then the component here the component is going to be the stack that we defined above so this is going to be home stack screen and then let's do about oops and then profile so now it'll display them in this order if you want the profile to be in the middle and about here then you can just uh reverse those all right let's go ahead and set up our icons for our tabs and to do that we're gonna set a couple of properties on the tab navigator one of these is screen options and that has a proper identity structure called route which has some properties on it for our screen routes all right and then the properties here are going to be header title these are just default props that we want to set set these to anything you like for now i'm just going to say header the one we really want to set is the tab bar icon and this one has some props focused color size padding let's put a comma here and then here we're going to return that ionic icon component so first thing i want to do is i want to set up an icon name based on the route or the screen name basically so the route down name is my screen i'm going to say if it equals home then my icon name if it's focused then i'm gonna call it home otherwise it'll be home outline so let's pull this guy up here so let's see it's a little hard to navigate in here here we go so home and home outline so that's the name that i'm passing in home and home outline and that's right here if the screen is active it'll be the filled icon otherwise it's the outline version so let's do else if route dot name equal about oops then icon name equal focus we'll do um in formation [Music] circle otherwise it's information circle outline and finally if our route dot name is profile we're gonna set icon name if it's focused oops we're gonna set it to person otherwise it'll be person outline and of course you can go through and choose any of these that you like all right now that we've set up our icon name we're going to return the component that's going to be displayed in the tab in the bottom so i'm using ionic icon and it has name equal icon name and then i also have a size equal size and then color equal color and finally i'm gonna add a style equal i'm gonna give it some padding to the bottom actually oops padding bottom and it's padding and you'll see in a minute where or how to set these see these are passed in through here and these are going to be passed in through and then we also have so this was all within screen options now we're gonna set up is the tab bar options and that just has a couple of properties active tint color which i'm going to use that light c green you can set this to whatever you like then uh inactive tint color mine will be gray and that's just the color of that icon when i click on it if i'm on the screen it'll be light see green if not it'll be a great label style to set the font of the label on that icon or the label on the name of the tab and label style let's do font size 16. finally i'm going to set the style and i'm going to set width to that full screen width that we defined earlier up here which was the full width of the screen okay i think that wraps up our navigation component all right next let's go ahead and open your app.js and we imported gesture handler next thing we need to import are we need to import that navigation component we just created from components and we also need to import the user context okay we're already getting a error here let's see unexpected token and navigation.js line 83 let's see what did we do here okay i see this should be a colon here all right there we go all right we're good here now let's go back to app we've got those two imported so this is our landing page when you're signed in i'm going to go ahead and change this and we're going to remove all of this so instead we're going to return that user context and we're going to wrap the navigator so this is how we're passing through to all our screens the auth data so we're going to pass props dot author data to our navigator by doing this here now all our screens can consume this data use it display it however we want to use it but this is just one way you can pass props through your components here oops it should be user context sorry dot provider and this should be dot provider okay that was wrong and that should also be user context.provider all right let's see what else we have here so we have this button sign out if there is if the user is signed in so let's get rid of this because we won't be using this anymore let's actually delete all this and we've got one more view there all right so and then for this part of the screen we're only going to display this if you the user is logged in so i'm just going to add line of code here right before the view and then wrap that around that so now if there's user data then display this otherwise won't be displaying login with apple sorry if user is not logged in if user is not logged in you see what happened is the user is logged in it'll display it so it disappeared so we don't want to do that we want to only display those login buttons if the user is not logged in all right let's give this a test drive and see if it's working so i'm going to go ahead log in open all right so something's wrong nothing's being displayed let's see what if we've got any errors all right so if you can see right in my authenticator i have a console.log props dot authstate and that's outputting verify contact uh the reason mine is doing that is because i never verified the contact when i signed up with google i got the email i didn't come back and put my confirmation code so for now since i don't have that case i'm going to say verify contact and i'm going to still return that home screen here all right so there's the error here can't find navigator of course it's called navigation okay looks like we have another error a navigator can only contain screen components all right so that looks like it's in our navigator i see so our navigator stack navigator here has this screen i misspelled this this should be uppercase screen all right let's see if that fixes our issue there there we go all right now we can navigate between our screens here all right so let's add a couple of things to our profile screen first let's add um maybe a sign out button so we can actually sign out and test to make sure that it's gonna go back to the sign in page so to sign up we need uh to import off from aws amplify and then we're also going to need button from react native and then we'll just do button title equals uh sign out and on press equals and we're just going to call off dot sign out and let's close this all right let's go ahead and sign up and see what happens there we go more landed back here i'm going to go ahead and sign back in one more time and there you go took a little while to render but this is in our simulator it shouldn't be as slow in our actual device so now i'd like to show you how to go between screens from here so in that stack in our navigation we have profile and my info so we want to get to the my info apparently we can't get to it from here right so how do i get to this my info screen go ahead and demonstrate that so let's go back to our profile and i'm going to create another button i'm going to call it my info my info and then on press here is going to use a navigation which is on our props here so that's the navigation so i'm going to use navigation from our prop so props.navigation and we're just going to call navigate and that'll take argument for the screen name that we want to navigate to and then let's pass it uh if we want to pass parameters to this we'll include them here as an object so i'll call my parameter greeting and i'll just say hello all right so now i should be able to go to my info screen there you go and it automatically creates a nice flow between the screens as you can see now how do i read this parameter that i passed to my info screen also remember we wrapped our navigator and our app in the user context provider to pass down auth data maybe i would like to display some of my user info on this page how would i access that as well so here in my info i'm going to do structure navigation and route those are all part of the props that are passed through to our screen so i'm going to go ahead and destructure params from the route let's see if we can display that greeting so we'll go params dot reading all right there you go it says hello so we can get rid of this info screen it'll just say hello all right now how do we display our user data so we are going to use a react hook called use context not call back use context and we're also going to import user context from user oops and we're also going to import user context from all right all right now what i'm going to do is i'm going to set user data equal to i'm going to use that hook use context and i'm going to pass it the user context and that'll return the data that's stored there all right and then next i'm going to destructure uh username from user data and then let's see if we can display that here all right my info uh let's see so user data is undefined so let's just set this so that if it is undefined it'll just be an empty object so we don't get that error another way we can do this is we can say uh const username equals user data dot username or it's blank so i like that better just because it doesn't throw that error all right so there's no usernames something is not right here let's check our app.js and see okay so i see what's going on you see we need to pass the props through [Music] to our home component here that's how it gets the auth data but there's no props being passed through so we forgot to do that let's do props and then save that let's go back and see if we see our username now there we go so now we have our username being displayed in that my info page and then if i go back here i've got sign out and let's just make sure one more time yep everything looks like it's working still all right that wraps up these tutorials hopefully in the next tutorials we can cover maybe lambda functions graphql or animation if you have any requests let me know down below in the comments and as always if you like these tutorials please hit the subscribe button and see you guys soon

Channel: CodeWithGigi

Views: 7,161

Keywords:

Id: NwX3mV3LeW8

Length: 38min 3sec (2283 seconds)

Published: Fri Jan 22 2021