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.
Minor thing, but you don't mention requiring 'Main' in index.ios.js. People unfamiliar with Node might get thrown off.
Not so minor. It actually took me a good while to figure out what I was missing.
Having the code available helps.
Thanks for pointing this out! :)
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
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.
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');
I wonder why you wouldn't use the NavigatorIOS
API instead of the Navigator
API?
Hi Kenny,
Back when I first made the series Facebook wasn't partial towards a specific Navigator component.
NavigatorIOS is not supported by facebook anymore, it should be Navigator instead.
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
Hi,
do you plan to update it with Navigator component?
Thanks
Hi,
do you plan to update it with Navigator component?
Thanks
Would be nice.
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.
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.
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
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?
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
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).
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.
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