Overview of and Installing React Navigation

Spencer Carli
A free video tutorial from Spencer Carli
Web & Mobile App Developer
4.1 instructor rating • 1 course • 4,084 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 Riak navigation re-act 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 out re-act navigation dot org. And if you want to learn some more about what actually went into re-act 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 react navigation actually comes with what 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 reac 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 either 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 drawer or a screen slides in from the left side and covers that currently active screen giving you access to menu. So I'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 patches we've been stalled at this point. All you have to do is go into your actual project directory and then run NPM install dash dash save re-act navigation. It will take a moment to actually download that. Install it and once that's completed you can go ahead and progress onto the next.