Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

React Native: Basic iOS Routing

6:00 React lesson by

React Native does not maintain NavigatorIOS

Note the differences in the React Native docs.

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.

Get the Code Now
click to level up

React Native does not maintain NavigatorIOS

Note the differences in the React Native docs.

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Paul

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

Avatar
Wojtek

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

Having the code available helps.

In reply to Paul
Avatar
James

Thanks for pointing this out! :)

In reply to Paul
Avatar
Tiago

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

Avatar
Tyler

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.

In reply to Tiago
Avatar
Marty

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');

In reply to Paul
Avatar
Lars Jägare

Maybe worth mentioning NavigatorIOS is neither supported nor recommended by the React Native team. Instead Navigator component is recommended see [[https://facebook.github.io/react-native/docs/navigator-comparison.html]]

In reply to egghead.io
Avatar
Tyler

Where is it mentioned they don't support it?

In reply to Lars Jägare
Avatar
Kenny

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

Avatar
Tyler

Hi Kenny,

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

In reply to Kenny
Avatar
Stephane

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

Avatar
jeff

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

Avatar
Michael Lumbroso

Hi,

do you plan to update it with Navigator component?

Thanks

Avatar
Russell

Hi,

do you plan to update it with Navigator component?

Thanks

Would be nice.

In reply to Michael Lumbroso
Avatar
peterschussheim

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.

Avatar
Rolando

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.

Avatar
dameng

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

Avatar
Chris

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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."

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.

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.

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.

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.

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?