- Read Tutorial
- Watch Guide Video
EDIT: Make sure you're reading the version 4 documentation.
- react-nativigation-v4-docs
Part of going through this course is that I wanna teach you not just how to build the application that we're gonna build as we go through this entire system. I want to teach you how to build any type of mobile application that you need to build. And a big part of that is gonna be you researching various code libraries.
Whenever I'm told that a specific feature needs to be built into an app that I'm creating, I reference the documentation, I look at what's possible, I look at the available functions, I look at the examples, different things like that, and so I want you to be able to start getting in the habit of doing that here.
We're going to install the libraries, and then I'm gonna show you and kinda point you in the right direction on how you can research, and how you are gonna work with those libraries and then in the next guide, we're gonna start implementing them, so let's first start off by, I'm going to stop the server here, and I'm going to install a couple libraries. And you can install these by saying expo install and the other option you could do, you could also say yarn add and then list off the libraries but whenever you run expo install, it gives a few benefits that are kinda nice to have. So this is usually the approach that I go with.
We're going to install a couple libraries here. The first one's gonna be react dash navigation and then you give a space and you can install other libraries and so, in this case, it's gonna be react dash navigation dash stack. So you can just run this command right here and expo's going to go find these libraries. It's gonna leverage yarn to pull down these dependencies and install them into the application. Now while it's doing that and it's actually already done with that, but let's switch into the browser and let's go and let's see how we could research these.
So the first one was react navigation. So the way you'd research these is you can go to the npmjs.com library and then type in react dash navigation and this very first one's gonna come up. You'll see things like the version number, you'll see descriptions, documentation. You'll also see some examples depending on which library you're working with and how good their documentation is. You can click on the getting starting guide in this one and it has all kinds of great examples on how to use it, how to install it, and you can kinda go from there.
So this is definitely one thing that I want you to do is to start going through this documentation before you continue on the next guide, read through these guides, and get a feel for what react navigation does, react native and navigation does because this is gonna give you a really good feel for the next guides so instead of you just following along and just repeating what I'm typing in, you're gonna start to get a mental model and develop a mental model for exactly what we're doing and what we're implementing.
So this is the first one, the react navigation, and so, let's go to the next one, which was react navigation stack and so right here, you can click on it. It's the same exact thing, you'll see all of your different versions, all of those kinds of things, and then you can see a description. This is a stack navigator for IOS and Android. You can also click on the home pages, each one of these guides or each one of these libraries is gonna have a home page, usually, it's their gitHub page. This has some great examples and usually links out to their documentation and so you can see all of these examples on what the stack navigator does.
So your homework, before you go on to the next guide, is to start going through these libraries. Go through their documentation, see their examples, see the code, see the different props, and the different things that you can pass to it and then continue on to the next guide where we are going to implement this.