Add React Native Navigation on macOS with React Navigation

So far our application is pre-functional, but it only contains one screen, which is not very useful. So we're going to set up multiple screens using React Navigation. There are many React Native libraries for navigation, but not all of them support macOS, and React Navigation just recently added support for it. So not everything is working, but it's definitely functional. So in order to install React Navigation, we're going to add the following dependencies. React Navigation Native, React Navigation Stack, Save Area Context, and React Native Screens. So unlike all the other dependencies we have installed so far, these dependencies actually contain some native code, which means we cannot just add them into our JavaScript code. We actually need to recompile our app first in order for them to be available on the native side. So in order to do this, I'm just going to close my main application. And just to be careful, I'm also going to close the metro package. And I'm going to go into the macOS folder, and inside of the macOS folder, I'm going to do a port install command. So what this does is now that you have added the dependencies on the JavaScript site, and since they have some native components, you actually have to tell the Xcode project or via co-op, that these dependencies need to be installed or need to be imported into the entire Xcode pipeline. So now that they are installed, I can just go back and run my usual macOS command. And this will compile my app one more time. Great. Let me just reload one more time. Oh, yeah, I actually need to restart the backend server. No. All right, perfect. So I'm just going to close this here one more time. All right, cool. So we now need to set up a router. A router is the component that's going to handle or it's going to contain all the routes. And that's where we will navigate to a different part of our application. Now we mentioned before, there is a difference between containers and components. And now is the time to talk about this. So the basic idea is that containers are going to be the components on the top most level, right? Those are the ones that are direct children's of a router. And components can be or should be a lot smaller. That way it gets a little bit easier to know when a component is the utmost parent of your component tree. And that's quite useful because sometimes the almost parent is the one that might have direct access to props or might get injected some other properties via the router or what not. Right? So this is a very useful pattern to follow because it's going to save you a little bit of time whenever you need to access, especially when you need to access the navigation state. So we're going to start by creating a route folder. So for my start folder, I'm going to create a routes.tsx file. But again, I'm just going to take the same code that's on the lesson. And let's just walk over it. Let me just fix. I changed the name of this one. Dynamic color. And yeah. So I need to fix this one as well. All right. So this is our routes component. And first, the first thing that you're going to notice, let's ignore the imports for a little bit, there's a type that I have created here. So this type is supposed to mimic all the routes that you create inside of your router. And the type of these routes is going to be the parameters that the route itself takes. All right. So this book container, this book route takes a title string that is every time you navigate into this route from any other route, you should also send a title along with it for the component to do its job to display itself properly. Same goes with the home route. This one takes nothing because it's the home route is the application start. But this kind of gives you a lot of type safety, right? Especially because containers, they leave completely separated from each other. So sometimes when you're navigating routes, you might forget to send something. So the latest version of React Navigation has implemented this type safety. And it's quite useful actually. So now that we have our parameter list, we can actually create a stack navig ator. So a stack navigator, the name implies it is just a stack, right? As you go navigating between screens, that will go piling up on it on top of each other. And you can navigate back and you're just going to go down the stack. So it's just what its name says. Now this is not the only navigator that React Navigation offers. There's a few of them. There's the menu navigator, the sidebar navigator. There's the bottom bar navigator. And maybe there's one or two more. But these are all the patterns that you see in most apps nowadays, right? You see a bottom bar, you see a stack navigator, you see a many bar or a sidebar. So you can mix all of them. You can put a stack navigator inside a bottom navigator. You can put a bottom navigator inside of stack navigator. It's quite flexible in that regard. And afterwards, we just pass our stack parameters. So the navigator can type check all of our routes. Great. So what else do we have here? One second. Yeah, this. So this just books. Great. So our right component is just a functional component. Inside of it, I'm using a dynamic color. We'll see in a little bit that it's used to tint our header. So we first need to take a root stack and put the navigator component that wraps all of our routes. Then we can pass screen options. Now the screen options, it's quite long. It has a lot of properties. I'm not going to show them to you, but basically you can customize a lot of the stuff within the navigator itself. You can play with the style, play with the overlays, play with the shadows. You can set that style for the header. You can directly set a title for the header. There's a lot of properties in here, as you can see. So you can customize your application however you want. For now, I just pass in a style to the default header. Sometimes you might even want to do your own header. But I'm just going to leave the header as it is from the default styles and I'm just going to pass a tint color to it. Inside of the router, I created two routes, which are the screen object property. And I pass the name to it, which is important. This is how we're going to navigate to this route. I'm going to pass the component, or in our case, the container that needs to be displayed within this route. And one more time, I can just send an option, set the options in here. Or you can also do it inside of the component. Once the component has mounted, you can actually set the navigation options. But for now, I'm just doing it on this level. So I have two routes, my home route and my book route. I haven't created my book container yet, which is something that I'm going to do next. So once again, I'm just going to take the code from the course. I'm going to create a new book container.tsx file. I'm just going to paste it. So right now, I'm just going to leave it empty. It's just a text for me to test that my router working. I'm going to export it. So here, I can just go and just replace this. And I'm going to go here. This is my book. And I'll just rename a few stuff. Great. So you can see my application reloaded itself. So I have my two routes registered on my router. However, I still cannot access it because I haven't mounted it. So now I'm going to go into my app.tsx file and I'm going to import navigation container, which is the utmost, utmost component that you need to mount navigation. So I'm going to put it below my store because my store does not need the navigation to work. The state is separate from the UI. And what does this say? Navigation container. Great. And inside of my navigation container, instead of directly putting my books container, I'm going to put my routes component. Great. So now my application is still running. I can reload it. Everything is still fine. So now my routes are somewhere in there, but I cannot navigate through them yet because I haven't put any way to navigate through the routes. So in order to do this, I'm going to go to my books container. And inside of it, I'm going to use another hook. This hook I'm going to call navigation. And it is the used navigation hook from React Navigation Core. It might be native, but we'll give it a try. So what I'm going to do is I'm going to wrap my each of my books so that it navigates to a detail page from that book. So I'm just going to use a touchable opacity. I'm going to put my view inside of it. I'm just going to move this key, which is important for React Native to render this stuff. And on the onPress function, I'm going to create a new function for each book. And inside of it, I'm going to say navigation.navigate. And I have to pass the route name. So if I take a look into my route file, what I called it was book. So I'm going to navigate to the book container. And let me just reload it to make everything working correctly. And here you see. So undefined is not an object because we haven't passed the title, right? So like we said, our book route takes a title, which is something that I need to work properly. So I'm going to book back to my books container. And here as the second parameter, which is the state that we're going to send, as a title property, I'm going to send the book title. Now if we navigate, there you go. That's how navigation works. [music playing]