We'll start with the basic StackNavigator, and then we'll add the tabbed and the drawer navigation as well. So let's go to the StackNavigator. We use the generic StackNavigator and not the native stack one we used in the last video. So let's go down here to installation. Let's go ahead and copy this. Let's add that. And we also need to add this. So let's copy that. Let's add that.

So let's copy that. Let's add that. So this is for our stack navigator, and we'll work on the tabs and the drawer after we get the stack working. Okay, so that should be done. We have to import this at the top of our app. So let's do that at the top of our app.jsx, okay. And let's start our server up, and hopefully this should run in our simulator. So let me just reload this, and it should reload in our simulator here. And we can work like this.

So let me just reload this, and it should reload in our simulator here. And we can work like this. So let me just get rid of this. We don't need this. And let's go ahead and wrap our app in a navigation container. Okay, that's imported. Let's close that out here. And then we'll use the stack navigator to make a few screens. So let's go ahead and create that stack navigator. So say const stack = createStackNavigator(), okay, and that imported it.

So let's go ahead and create that stack navigator. So say const stack equals createStackNavigator, okay, and that imported it. And let's make a few screens here. And this time, we'll actually put them in their own file. So everything's nice and neat. So stack.navigator, and let's close that out, okay. And let's define a few screens here. So stack.screen, this one will be our home screen with all of our tweets for everyone we're following. Home, or we can name it Feed.

we're following. Home, or we can name it Feed. Home is fine for now. Component, we'll make this in a second, equals, let's call it HomeScreen, okay. And let's make a few more, say three more. So we'll make a screen for NewTweet. So this will allow us to create a new tweet. Let's name this one NewTweet. And the next one will be the single tweet screen. Let's name it TweetScreen, okay, TweetScreen.

And the next one will be the single tweetScreen. Let's name it tweetScreen, okay, tweetScreen. And we'll make one for profileScreen. And that should be good for our stack navigator, at least for now. And this one will be called profileScreen, okay. So obviously that's not going to work because we don't have those components. So let's go ahead and create them. So let's make a new folder called screens, and then we'll put those screens in there. So homescreen.jsx, and let me just paste in some code here, some boilerplate. This one's for homescreen.

So homescreen.jsx, and let me just paste in some code here, some boilerplate. This one's for homescreen. And say homescreen here. And let's make sure to import the homescreen here. Okay. So if I save that, let me just comment these ones out for now to make sure it works. And let's reload the app. Okay, so there's our homescreen. So I'm going to go ahead and add the other screens behind the scenes, and I'll be back. Okay, so I added those screens and the imports for them.

So new tweet. So obviously this is going to be styled correctly, and we'll do that in the next video, probably. And on press, let's just go to that tweet screen or the new tweet screen. So let's just do an inline here, and we'll do navigation.navigate to the new tweet screen. Okay. And let's make sure to grab the navigation prop from here. Navigation. Okay. And for some reason, VS Code changed.

Now let's add the drawer navigator to the home screen. So if you remember from the demo I showed you earlier, if we slide in from the left or click an icon here, we should get this drawer navigator. So let me stop this because we have to install some stuff and let's go ahead and install what we need. Let's go back to the documentation. Go here and look for drawer navigator. Okay. Let's go ahead and grab this, paste that in, let that install. And we also need this from Expo.

Let's go ahead and grab this, paste that in, let that install. And we also need this from Expo. Install that. Okay. And do we have this ready? React Native Gesture Handler in app.jsx. We should have that on top and we do. Okay. So let's go ahead and create this drawerNavigator and have the stackNavigator nested within it.

So let's go ahead and create this DrawerNavigator and have the StackNavigator nested within it. So let's grab this. Actually, let's grab the import first. Back to our code. Let's import that here and let's grab the function that creates it right here and let's grab the DrawerNavigator and we will replace this StackNavigator. So let me just comment this out and now our main navigation will be the DrawerNavigator. And now for the first screen, this is going to be our home StackNavigator. So let me just put initialRouteName equals home here.

And now for the first screen, this is going to be our homeStackNavigator. So let me just put initialRouteName equals home here. Okay. So this one will be home, but now the component will be a homeStackNavigator. Okay. And that's basically going to be this. So let me uncomment this, cut this out, and then we will create that homeStackNavigator up here. So let's say const homeStackNavigator equals a function. Okay.

So let's say const homeStackNavigator equals a function. Okay. And we can return this thing I copied. Okay. Let's save that and let's restart our server again and see if this works. Actually we have to remove this. Actually I'm going to make a new component here called settings. So settings and we'll name it SettingsScreen. SettingsScreen. Okay.

Settings screen. Okay. And let's just make that real quick. Settings screen JSX. And we can just grab one of these ones. Okay. And let's just change this to settings screen and this as well. Okay. So let's restart our server and make sure everything is working correctly. So let me just reload this, open up our simulator here.

So let's restart our server and make sure everything is working correctly. So let me just reload this, open up our simulator here. Settings screen. Yes. We have to import that from app.js. So import that, save, let's reload again. And there we go. So you can see a warning on the bottom that says we have the same name nested. So let me just change this one to home1. Okay.

Cool. But we also have the tabbed navigation on the home screen. So we want to nest that as well. So let's go ahead and do something similar here. So let me stop my server again. Let's open up the documentation and let's go to tabbed or bottom tabs. Okay. Let's install this, copy, paste, and that's it for tabs. So let's go ahead and import this. So back here to our app.js, let's import it after the drawer and let's create that.

So let's go ahead and import this. So back here to our app.jsx, let's import it after the drawer and let's create that TabNavigator. Okay. And we want to do something similar to what we did with the DrawerNavigator and stacking the StackNavigator or nesting the StackNavigator within there. So let's duplicate this. Let's call this one TabNavigator. Okay.

Let's call this one tabNavigator. Okay. And this one will be a tabNavigator. So let me just delete this and let's grab the example here. So these two, but in my case, I have three. So let me add one more. So again, this corresponds to the bottom tabs on the Twitter app. So the first tab is home. So again, we already have that name. So let me change this to home2 and this one will actually be the homeScreen.

So again, we already have that name. So let me change this to homeTwo and this one will actually be the home screen. The second one was the search. So let's name that search and we'll add a component in a second. Let's name it searchScreen. Sorry, I forgot to wrap this in a TabNavigator. So tab.navigator. And it's pasted this here. Okay. And the third one is notifications.

Okay. And the third one is notifications. There's actually four in the Twitter app, but I'm just going to stick with three. Okay. And notifications screen. So I'm just going to make these two components like I did for the other ones. So let me just do that behind the scenes. Okay. So we have those two new screens, the search screen and the notification screen, but we're not using the tab navigator yet.

So we have those two new screens, the search screen and the notification screen, but we're not using the tab navigator yet. So what we want to do is instead of this, let me just comment this out. We want to nest the TabNavigator within this first HomeScreen here within the StackNavigator. So now we can say tab and we can give it the TabNavigator. Okay. And let's just rename this to homeOne. Like that. And now we have these three title bars because we have three nested navigators, but you can see the tabs on the bottom now.

Okay. So I just added all the icons here, and I also don't want the label on the icons. So we can set an option on the tab navigator. So we can say screenOptions equals, and the option is tabBarShowLabel, and I set that to false. Okay. Okay. And the labels are gone, and we also want the header. So this header to not be shown. So the option for that is headerShown, false as well.

So this header to not be shown. So the option for that is headerShown, false as well. Okay. So that one is gone, and you can find all of these options within the API documentation here. So if you scroll down here for the tabs, you'll see all the options here, and the option can go either on the individual tab or the entire tab navigator. So for the DrawerNavigator, let's also get rid of the title bar here. So let's look for drawer.navigator. So let's put it here.

So let's look for drawer.navigator. So let's put it here. Same screenOptions. So screenOptions equals, and it's headerShown, false. Okay. Okay. That one's gone. Cool. But let's make sure our backButton is still preserved. And it is.

So headerShown is set. Let's just be explicit about that and leave it on because we want the back button. And let's get rid of the headerBackTitleVisible set to false. Okay. And maybe we can get rid of the title as well. So this title, I don't want it to show at least for this one here. So that would be this component. We can do options = { headerShown: false }. Okay. And that looks pretty good.

Okay. And that looks pretty good. So I guess we can remove it from the other ones as well. So let's grab this. So that would be this screen here. Okay. But we still want the title bar to show, because if you don't show it, then the back button will be lost. So we can just say title is an empty string. Okay, cool.

So we can just say title is an empty string. Okay, cool. So we can do the same for the others as well. This one and for this one. And I think that's fine for now. We'll tweak things later on, but now we have the general layout of our screens. And I'm not sure why the icons are incorrect, because when I had the marking, but let's fix that. This one should be search. Okay.

This one should be search. Okay. And this one should be notifications. Yeah, I'm not sure why that changed. Okay. So that looks good. So we have our home screen. We also have the drawer navigator. Actually, let's put that back. So for the stack navigator, I removed the header on the first screen.

navigators and these multiple screens. So in the next video, we'll start styling some of the screens similar to what you see on the Twitter app. So I'm going to stop here and make a commit as always. So I'll stop this, do a git status, git add, git commit, let's say general layout of screens and navigators working.