Set up Basic iOS Routing with React Native

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

In React Native you utilize the NavigatorIOS component in order to implement routing. In this tutorial, we'll walk through the app we'll be building in this series as well as how to add routing to your app.

[00:00] What you can do with this app that we'll build is you can enter in someone's GitHub username. You'll see their image. Then what you can do is you can view their profile, some things about them like their email address, their repos, and other things about their GitHub profile.

[00:16] Then what you can do is you can view all their repositories where you'll see a list of their repository names as well as how many stars each one has and a short description. You'll be able to click on that and see a nice web view. Then what you're also able to do if you wanted to take notes about this person, you can do that right here.

[00:37] What I like about this app as a demo app is that it will demonstrate a lot of the things that we'll do every day when we're building these apps. For example, we'll do a lot of routing in this app. We'll do some network requests. We'll update, and we'll need to link that out to the screen. A lot of these things that we'll learn in this app we'll be able to take and apply to basically every other app we build.

[01:01] The first React Native component we're going to be talking about is NavigatorIOS. What NavigatorIOS allows us to do is, inside of our main component, if we drop it in here, it allows us to add an initial route property to our component. Notice we specify a component, a title, and any properties we want to pass to it.

[01:26] Whenever our main component is rendered, it will render this NavigatorIOS component which will then go and render my view. Then inside of my view what we're allowed to do is we're allowed to treat our navigation or our routing almost like it's an array, like we're pushing and popping from it.

[01:45] If I had some button where I wanted to go to a new view, all I would do is this.props.navigator.push and then my next component I want to take it to.

[01:55] Let's go and add NavigatorIOS to our main component. Let's also make it so when our initial component loads, we'll also load another component which we'll also create.

[02:08] Coming over to our code, let's go ahead and take out all this stuff. What I also need to do is whenever you use a new component, you need to make sure that you include it up here. We're going to include NavigatorIOS. Now, what I'm going to return is that component with a few properties.

[02:30] Our initial route is going to have a title of GitHub Note Taker. Then the component we're going to render for the initial route is going to be our main component. We haven't made that yet, so we'll go and do that right now.

[02:53] Let's create a new folder called app. Inside of this folder is where we'll have all of our JavaScript files. In here, let's create another folder called components. Then inside of here, we'll make a new file called main.js. This main.js file, again, will be file that gets rendered. It will be basically the initial component that gets rendered, but it will also include routing.

[03:23] The very first thing is we're going to require React Native. Then what we're going to do is create a class called main which extends React.component. I'm going to capitalize that. Then our render method, what we're going to return, is a view with some text inside of it that just says, "Testing the router."

[04:00] What's going to happen if we try to run this right now is it's going to say, "Hey, view is undefined. We've never said what view is." Using some ES6 destructuring, we're going to say, "View and text" to require those in. Then the second to last thing we need to do is make sure that we export this so that we can require it in our index.ios.js file. The last thing we want to do is set up some styles.

[04:33] I'm going to make sure we have a style sheet. All a style sheet is it basically just makes low level optimizations with your style sheet. Also what I'm going to do for styles, I don't really want to bore you. I don't want to take this into a Flexbox lecture and a CSS lecture. All the styles I'll use I'll just paste in from what I had earlier.

[04:53] Notice with style sheet all we're doing is passing this create method and object which defines all of our styles. What that allows us to do now is on this view we can say, "Style = styles.maincontainer," I believe is what we called it.

[05:10] Now, this component is ready to test, so let's head over to index.ios.js. I'm also going to add some styles here. I'm going to remove default styles, and I'm going to add in some styles up here. Now, what I'll need to do is, on our NavigatorIOS component, I'm going to give it a style of styles.container. I also notice I spelled initial route wrong, so I'm going to redo that. Now, that looks good.

[05:49] What we expect to see when we reload our app is...here we go. We have this title. We have testing our router. Then we also have some styles added to it.

Paul
Paul
~ 7 years ago

Minor thing, but you don't mention requiring 'Main' in index.ios.js. People unfamiliar with Node might get thrown off.

Wojtek
Wojtek
~ 7 years ago

Not so minor. It actually took me a good while to figure out what I was missing.

Having the code available helps.

James
James
~ 7 years ago

Thanks for pointing this out! :)

Tiago Ferreira
Tiago Ferreira
~ 7 years ago

Even though you just copy the styles, it would be nice to talk a little bit about the StyleSheet as it can help others, who like me, prefer to write all the code. When I first implemented the routing, since neither of my elements had style of flex: 1 I was not able to see the sentence "Testing the router" as it was hidden by the title of the route

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

I see where you're coming from, and if I was doing these videos anywhere else, I would have. Egghead likes to keep videos short and to the point. Talking about styling during a React Native lesson would have not been specific enough. Sorry for the confusion.

Marty
Marty
~ 7 years ago

You can look it up on github, but for those lost to require Main here is the line you are looking for in the index.ios.js file: var Main = require('./App/Components/Main');

Kenny
Kenny
~ 6 years ago

I wonder why you wouldn't use the NavigatorIOS API instead of the Navigator API?

Tyler McGinnis
Tyler McGinnisinstructor
~ 6 years ago

Hi Kenny,

Back when I first made the series Facebook wasn't partial towards a specific Navigator component.

Stephane
Stephane
~ 6 years ago

NavigatorIOS is not supported by facebook anymore, it should be Navigator instead.

Jeff Gnatek
Jeff Gnatek
~ 6 years ago

If anyone doesn't see their component show up, check this link out, seems to be a bug with NavigatorIOS and the latest React Native release. https://stackoverflow.com/questions/34669458/react-native-navigatorios-does-not-render-component/34679210#34679210

Michael Lumbroso
Michael Lumbroso
~ 6 years ago

Hi,

do you plan to update it with Navigator component?

Thanks

Russell Wells
Russell Wells
~ 6 years ago

Hi,

do you plan to update it with Navigator component?

Thanks

Would be nice.

peterschussheim
peterschussheim
~ 6 years ago

Will this tutorial be updated? The code on github does not match the video and even worse, when using either the code in the video or github repo, builds fail due to deprecated and/or changed packages.

Rolando Barbella
Rolando Barbella
~ 6 years ago

I'm also voting for please updating this lesson to Navigation, this is a crucial part of learning react-native, is not that easy to get your head around.

dameng
dameng
~ 5 years ago

Hi guys, I got a issue when try to make it works (I have googled, no proper answer) ...

Here is my error message, Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of NavigatorIOS

please help me, thx guys

Chris Frewin
Chris Frewin
~ 5 years ago

I tried to go ahead and use the plain ol' Navigator, but it's simply not rendering the Main component onto the screen. I get just a black screen. I tried like this in my render() function:

render() {
  return (
    <Navigator
      style={styles.container}
      initialRoute={{title: 'Github Notetaker', index: 0}}
      renderScene={(route,navigator) => {
        console.log(Main); 
        Main;
      }}
    />
  ); 
}

The worst part is, Main is defined; the console.log() statement prints in the debugger exactly the component we expect.

It's working when I simply copy all the Main render() stuff to my index.android.js file, but then of course my index.android.js starts to become giant and messy.

Anyone have any ideas?

Ahmed Khaled A. Mohamed
Ahmed Khaled A. Mohamed
~ 5 years ago

This is my effort to extend the github notetaker app. I updated the code to support latest versions of React and React Native, I also extended the app to use react-navigation which the latest navigation library supporting both iOS and Android. I added Redux to manage the store and used Redux-Sagas to handle asynchronous fetch of data. I would appreciate it if you check it out and give it thumbs up if its helpful. I will continue extending to support more features. https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas

Raunaq Sahni
Raunaq Sahni
~ 5 years ago

According to docs on version 0.44 and 0.45 NavigatorIOS seem to be supported. At least there is no message saying that it isn't supported (as it used to be on version 0.23).

Raunaq Sahni
Raunaq Sahni
~ 5 years ago

For people having trouble with following the code from this course can choose to refer to my github repo of this project built with React Native 0.44: https://github.com/raunaqss/githubNotetaker/

Each lesson corresponds to a branch just like Tyler's repository.

Gerardo Palazuelos
Gerardo Palazuelos
~ 4 years ago

Hi, I just want to double check: So, is it worth starting this course as it is? Will it work if I code as the instructors?

thanks