Set up Basic iOS Routing with React Native

Tyler McGinnis
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
Paul
~ 6 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
~ 6 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
~ 6 years ago

Thanks for pointing this out! :)

Tiago Ferreira
Tiago Ferreira
~ 6 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
~ 6 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
~ 6 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
~ 5 years ago

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

Tyler McGinnis
Tyler McGinnisinstructor
~ 5 years ago

Hi Kenny,

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

Stephane
Stephane
~ 5 years ago

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

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

Hi,

do you plan to update it with Navigator component?

Thanks

Russell Wells
Russell Wells
~ 5 years ago

Hi,

do you plan to update it with Navigator component?

Thanks

Would be nice.

peterschussheim
peterschussheim
~ 5 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
~ 5 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
~ 4 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
~ 4 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
~ 4 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
~ 4 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
~ 4 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
~ 3 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