Udemy

Overview of and Installing React Navigation

A free video tutorial from Spencer Carli
Web & Mobile App Developer
Rating: 4.6 out of 5Instructor rating
1 course
8,417 students
Overview of and Installing React Navigation

Learn more from the full course

Create Your First React Native App

A crash course in building your first React Native app in a weekend or less!

03:26:21 of on-demand video • Updated June 2017

How to use the most common React Native components
Install and configure third party packages
Setup various types of navigation
Design reusable React Native components
Confidently create future React Native applications
English [Auto]
To handle navigation in our app that we'll be building through this course, which is absolutely critical for any application you build. Regardless of the complexity or the simplicity, you're likely going to have more than one screen, which means you're likely going to need to navigate between those screens. And to do that, we'll be using React navigation. React Navigation is a community solution that has learned and evolved from multiple core routing solutions, as well as third party routing solutions into one package that really lets us build and develop applications in a way that's easy for us as developers, valuable and familiar for our users. And it's just very straightforward. There's a lot of evolution that's gone into this routing solution. So I'm here on the documentation site which is available at React navigation.org. And if you want to learn some more about what actually went into React navigation behind the scenes, they've got this nice little video here. Then we're also going to look over the documentation a bit, which is an excellent, excellent learning resource. We'll be covering the three navigators that react Navigation actually comes with, but you can do a lot of advanced stuff with this package if you choose if the basic routing solutions don't work for you. So the three navigators that actually come with React navigation are the Stack Navigator, which is basically when you go from one screen to the next and that next screen either slides in or fades in depending on if you're on iOS or Android. The other is the Tab Navigator. We've all seen that on iOS devices, even Android devices. And then finally is the Drawer Navigator, which is where you tap an icon or do some action and a drawer or a screen slides in from the left side and covers the currently active screen giving you access to a menu. So we'll take a look at all three of those navigators throughout this course and before we can actually use it, we need to go ahead and install it. Installation is super, super simple, even easier than other packages we've installed at this point. All you have to do is go into your actual project directory and then run NPM, install, dash dash, save, react navigation. It'll take a moment to actually download that, install it, and once that's completed you can go ahead and progress on to the next.