The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Set up Basic iOS Routing with React Native

Set up Basic iOS Routing with React Native

6:00
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.
Watch this lesson now
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?

Avatar
Ahmed Khaled A. Mohamed

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

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