Learn about an easy way to do routing in React Native. Over the past year or so, navigation in React Native was somewhat complex if you compare it to the easy routing solutions available to React. That is no longer the case with the React Navigation libra
- [Instructor] In the last video, we installed all the dependencies that we need, and in this video we'll actually code our routers. So let's go ahead and open up ReactCourses, and what we'll do, we'll refactor some of this. The first thing I want you to do is add a button, we'll import the button that we'll actually use. The next thing that I want to do is change the name of the component to ReactCourses, plural. Then what we'll do is create a few things.
The first thing I want to do is create a static object that will hold all of the navigation options. And for this particular video, we'll only have a title, but we'll add more. So basically that will put a title at the top of your component in the view that will be ReactCourses. Then what I want to do is create a variable for the function navigate that we'll use momentarily.
And we'll use the prop navigation that is passed from the library we just imported. And then inside of our view we'll change a few things. So the first thing I want to do is delete all this text and replace it with the button that we just imported. So in this button we'll have two things. One, we'll have a function called onPress, and in this function we'll just use the navigate prop that we just passed, and basically what that will do is allow us to press the button and send us to the second screen, which is the native courses.
Again, make all these plural, so native courses, react courses, 'cause that could be an error if you don't. And the title is React Native Course, and that's the title of the button. Okay, and you want to make sure you close your element. And then remove all the instruction styles, 'cause we won't need them. Okay, that should do it for that particular component. Let's copy and paste all that code, and it will be the exact same thing here and we'll change a few options.
So for example, on the navigation option, it will be React Native Courses. In here it's going to be React Courses. And again, if you want to follow along, this is the title of that particular screen, this is where we want to go if we press the button. So we're currently on the React Native Course view, and we want to go to the React Course view. So we'll change that as well.
Okay, so let me quickly check, there's nothing else we need to change. Yes, we do have to change the name of our component, like so, and the styles stay the same. Okay, so the last thing we need to do is change the entry point, and this is where we'll create the routes in the index.ios.js, which is the entry point. And in this file you'll first import a few things.
So first, we'll import the stack navigator. Navigator, from our react-navigation. Very important. Then you want to import the two components that we just created, so app doesn't exist any more, so let's remove that one and import ReactCourses, again plural, from where we need to pull it from.
In components, and then ReactCourses. Last but not least, NativeCourses from the same directory, like so, okay. Now we'll remove the component and create a variable that will hold the function of stack navigator and will create a route. So let's remove that and create the constant courses with the function StackNavigator.
We'll create an object which has the two routes, so ReactCourses, and with this route, we'll load the component ReactCourses, and then last but not least NativeCourses, and this route will load the screen NativeCourses, like so. Okay, so let's quickly check, we have our app registry, stack navigation, we have our two components, we created the course, and used StackNavigator to create the two routes, which will load those views.
So column, okay, so now let's reload this. And we have our view React Courses, we'll come to React Courses, if we click on React Native Course it brings us to the second screen, React Native Courses. Welcome to React Courses, React Courses, let's just do one more thing just to make sure that we are on the right screen. Let's just change the title, 'cause it's confusing a little bit. So let's save that.
There you go, so we are on the Welcome to React Native Courses, and voila. You have routing set up in your app without going through the complex setups we used to do. In the next video, we'll create our data files so we have some data to play with. See you in a bit.
- Initiating a React Native project
- Creating your data files
- Creating your React course listing view
- Creating your tab navigation
- Adding material design styles
- Finalizing your styles
- Filtering your courses for the views
- Reviewing debugging options