So we have to install that one as well. So let's go ahead and do that. Let's grab it from Yarn. Let's copy. Let's install the native stack navigator. Okay. So let me boot up my server again with Yarn start. And if you have a previous instance running already in your simulator, you can reload by either hitting command control Z and hitting reload, or you can go into the terminal and hit R. And that will reload on whatever device you have running.

This should be an example in here. And here it is. We have a home screen, which is just in the same file. And then we have this StackNavigator. So let's go ahead and make use of this. So we'll grab this for our new screen. Let's paste that into our code here. Let me just hide the sidebar since we're only going to work in one file. So let's just paste that function up here. Actually, we can put it outside of the export default.

So let's just paste that function up here. Actually, we can put it outside of the export default. So let's put it here. So that's our home screen. Let's make sure we grab the correct imports. So we need the NavigationContainer, which will wrap our entire app. We also need the particular Navigator that we're using. And in this case, it's the StackNavigator. And that comes from the createStackNavigator here. So let's grab these two imports.

And that comes from the createStackNavigator here. So let's grab these two imports. Let's copy that. Paste that in here. Okay. Let's go ahead and instantiate our navigator. So right here. Let's grab that. Let's put it right here. And let's wrap our app correctly with the NavigationContainer and the StackNavigator.

So let's continue on. So let's go to the next part of the tutorial, where we can navigate between screens. So I believe it adds one more screen here. Actually, let's just do it ourselves. So let's just duplicate this home screen. Let's say details screen. Details screen. Change this to details screen. So now we have two screens. Oops, there should be no space here.

So now we have two screens. Oops, there should be no space here. And we have to add another route here. So this is similar to React router. But now we have screens. The name is details. And the component is DetailsScreen. So yeah, ideally, we'd have these in their own files. But for demo purposes, we'll just leave it in the App.jsx for now.

But for demo purposes, we'll just leave it in the app.js for now. Okay. So if I save that, nothing's going to change because we're not navigating between the screens yet. So let's go ahead and do that. So pretty straightforward. We just have to grab the navigation object from the props and call the navigate method and then navigate to whatever screen you want. So let's do that. Let's grab a Button. Let's put it in our HomeScreen underneath our text. Let's make sure to import Button from React Native.

Let's put it in our home screen underneath our text. Let's make sure to import Button from React Native. Should be this one. And we have to grab our navigation object from the props. So let's go ahead and destructure that like this navigation. Okay. And this key should be whatever you named your screen up here or down here actually. And we named it details. So this should navigate to that screen. And there we go.

We would click on that post and then it would go to that specific post. Now, if we were in a browser, typically we would pass this through the URL as a URL param. So let's see how we can do it in a mobile app. So there's a section for that as well. Passing params to routes. Pretty straightforward. We just have to pass it as a second argument to the navigate method. So let's go ahead and do that. So let's grab this example here. It's passing in an itemId and other param.

So let's grab this example here. It's passing in an itemId and other param. So let's grab that back to our app. Let's paste that in here as a second param, like I said. And that's fine for now. And to accept the params, scroll down here. We can make use of route.params and just grab it like this. You also have to destructure route. So let's grab this. Back to our code.

So let's grab this. Back to our code. Let's destructure route as well. Oops, I meant in the detail screen. So let's grab this. Let's paste this in. And now we should have access to those params being passed in. So detail screen for, we have this items, itemID coming in. And let's just output the other one as well. It's called otherParam.

And let's just output the other one as well. It's called otherParam. otherParam. Okay. Save that. Go to details. And there is the params that we pass in. What else can we do here? If you go back to the documentation, we can do some basic customization. For example, if you want to configure the headerBar,

If you go back to the documentation, we can do some basic customization. For example, if you want to configure the header bar, we can change some of the stuff in there. For example, the title. Right now it just defaults to whatever you named it, but you can change that if you like. So just change it in an options object on the screen. So that would be down here in our screens. For example, this we can change to title my home instead of just home. And now that should change to my home right there.

and it's going to make use of this useFocusEffect, which is similar to useEffect. And as you see, any code that's in here will run whenever the screen is focused. And same for here, but when the screen is unfocused. So let's take a look at using this. And we'll just console.log so we can see them firing. So back to our code right here. Let's add that useFocusEffect. Sorry, this is in the wrong place. We want it to be in a particular screen. So say for example, we wanted it in our DetailScreen, but here let's paste that in and it's just console.log. DetailScreen focused, and let's do the same for unfocused.

but here let's paste that in and it's just console.log. Detail screen focused, and let's do the same for unfocused. Okay, and let's try that out. So I'm going to save that. And I think I forgot to import useFocusEffect. So let me make sure to do that. Okay, that should have imported up here and VS Code doesn't seem to be importing it. So let me just do it manually. Describe it from react-navigation/native. So that should be in here. And this should work now, hopefully. Okay, so let's open up our console here. Let me just make this a bit smaller. And we should see the console.log

Okay, so let's open up our console here. Let me just make this a bit smaller. And we should see the console log every time the detail screen is focused. There it is. If we go back, it should unfocus. And there it is. And same for any other time it happens. Cool. Okay, let's take a look at some of the other navigators available. Start with the tab navigation. So let's go ahead and install this. So let's grab this. Let me stop this for now. And let's go ahead and add that. And we'll take a look at the drawer navigation as well. So let's grab the yarn add for that as well.

So let me just duplicate this and then comment this one out. And then we can replace our stackNavigator with our tabNavigator. And did I instantiate it? I did right here. And I believe I called it detailsScreen. So let's just replace that. And now we should have bottom tabs. So there we go right here. So let's take a look at some of the options here. So let's go ahead and say options. We can change the label here using tabBarLabel. And it's a myHome instead of home. Let's see if that works. Okay, and to specify an icon, we can do tabBarIcon and we're going to grab the color and the size or we're going to destructure them. So color, size and we can do this as a function.

I'm going to duplicate this. This is for our tabs. Duplicate it. And then comment out this one. Okay. And let's just grab this navigation container with our DrawerNavigator. And let's paste that in here. So we don't need our TabNavigator anymore. Let's paste that in. As you see, we have an initial route of home and this one is our DetailScreen. So let's change that DetailScreen. And now we should have a DrawerNavigation. I forgot to import the createDrawerNavigator. So let's import that. Okay. Oh, yeah, I think we need one more import for the createDrawerNavigator. So if you go here to installation instructions, we have this already,