How to get started with navigation in Ignite2?

[pekkanikolaus]

Still a newbie to RN and ignite, and still struggling to understand the various navigation options available (+ then coupled with Redux! Arrrrgh!)

In Ignite1, we had a ready-made navigation (with the dev screens) to build on. Now in I2, that part of the system seems to have moved into the separate "dev screens" container, which is great - but now I'm stumped as to how to get started with setting up my own nav.

Is there an Ignite way to do this, or do I simply integrate whichever nav solution I decide upon? Do I have to be aware of any conflicts between whatever nav solution I choose, and what I2 is using for the dev screens?

I can't find anything on this in the documentation, and there don't seem to be any navigation-related boilerplates ready yet.

[GantMan]

Heya! In short, I'll trade you a start up screen share for an hour, if you'll help document/blog what you learn. I'm trying to get the docs friendly to help people like you get started, and could use help with your perspective 👍

[pekkanikolaus]

@GantMan that sounds great, happy to do that! I sent you an E-Mail through your contact form. If it doesn't make it, hit me up directly through my E-Mail address in my Github profile. Looking forward to it!

[GantMan]

email sent!

[GantMan]

closing this bc we had an awesome chat! I hope to see links to anything you publish. Cheers!

[jmuziki]

@pekkanikolaus I happen to be in the same noob situation. Could you advise on the resources you found helpful with regard to navigation in I2? Alternatively, were you able yo document/blog your session with @GantMan

[pekkanikolaus]

@jmuziki I'm intending to do a detailed writeup on how I got it working, but realistically, it'll be a while!

Short version though. Gant has a very instructive video on building a tiny I2 project here: https://youtu.be/lv00UOXxy0g

The key in that video is the very first command he uses. If you create an ignite project using the ir-next boilerplate, you'll get an empty project with React Navigation already set up.

ignite new MyApp -b ir-next

React Navigation is really cool and looking like it might become a standard for navigation in RN; it's definitely what its creators want it to become. :) It has a site with documentation and examples here.

Creating an Ignite 2 project with that boilerplate will give you a Navigation/AppNavigation.js ready to tinker with.

Gant's example doesn't utilize tab navigation, though, which is what I wanted. So I removed the StackNavigator defined in AppNavigation.js and replaced it with a TabNavigator.

That sort of works, but I've since learned that is not the ideal way to go - the root navigation element is always supposed to be a StackNavigator and the TabNavigator is supposed to be a child of the root nav.

Robin Harris, the guy who pointed that out to me, has an example of an Ignite 2 project with React Navigation and a Redux-based tab nav. That's what I'm planning to look at next, and adjust the way I set up navigation in my project accordingly (but I'll have to go over my Redux lessons first, that stuff still melts my brain.)

Hope that helps you get started!

[jmuziki]

Perfect! Just ran through what Robin Harris did. Its a useful example. Thanks :)

[nicozenf]

For activate the navigation bar on a brand new ignite project, we must turn "header mode" to "screen" in AppNavigation.js.
I looking for this for so many time, it could be usefull to someone else.