Overview of and Installing React Navigation

Spencer Carli
A free video tutorial from Spencer Carli
Web & Mobile App Developer
3.9 instructor rating • 1 course • 4,291 students

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 will 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 reac navigation. REAC 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 to react navigation dog. And if you want to learn some more about what actually went into Riak navigation behind the scenes, they've got this nice little video here. Then we're also going to look over the documentation of that, which is an excellent, excellent learning resource. We'll be covering the three navigators that REAC 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 Riak 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. And 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 navigator, which is where you tap an icon or do some action and a draw or 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 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 onto the next.