Set up Basic iOS Routing with React Native

InstructorTyler McGinnis

Share this video with your friends

Send Tweet

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.

Paul
~ 9 years ago

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

Wojtek
~ 9 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
~ 9 years ago

Thanks for pointing this out! :)

Tiago Ferreira
~ 9 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 McGinnisinstructor
~ 9 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
~ 9 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
~ 9 years ago

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

Tyler McGinnisinstructor
~ 9 years ago

Hi Kenny,

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

Stephane
~ 9 years ago

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

Jeff Gnatek
~ 9 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
~ 8 years ago

Hi,

do you plan to update it with Navigator component?

Thanks

Russell Wells
~ 8 years ago

Hi,

do you plan to update it with Navigator component?

Thanks

Would be nice.

peterschussheim
~ 8 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
~ 8 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
~ 8 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
~ 8 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
~ 7 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
~ 7 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
~ 7 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
~ 7 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