Ignite: NavigatorExperimental Away Mission

[skellock]

<Navigator> is sun-setting.

<NavigatorExperimental> is transitioning in (the name will change).

I'm hearing nothing but great things about it. Redux like apparently.

Anyone up for spiking it through before its officially released? This is my only hesitation in picking a 3rd party library @ryanlntn for Navigation routing & presentation.

It's all about to change.

[jamonholmgren]

The notification email was funny, because it removed the code tags:

[skellock]

is sorry.

is fixed.

:smiley_cat:

[skellock]

@GantMan is on this.

[mmazzarolo]

Hey @GantMan, are you still working on the Navigation Experimental?
I've been working on an app that uses almost the same structure of ignite but I always used react-native-router-flux... which is a mess since it's last update.
I was looking for a substitute for the navigation and I'm still undecided between the standard navigation and the experimental one, any hint? :)
Thank you!

[GantMan]

Hey @mmazzarolo :)

I spent a whole 2 days fighting the new Navigation Experimental, and it just wasn't ready. It hurt so bad! LOL. I saw he was updating it every day, so I decided to give it a bit of time and back off. Now it might be time to come back. I'll start carving some time to venture off again. If anyone else wants to take a look, I'm happy to download what I've learned to them.

[mmazzarolo]

@GantMan i toyed a bit with it this morning, it _seems_ to be working fine in my project (still need to add a drawer and some more tricky routes).
If you're interested I created this Gist with my current setup... I'm following most of your coding standard but you should style it a bit (especially NavigationHeader.js).

Disclaimer: I've stolen and then tweaked all that boilerplate from here 🐼

[GantMan]

This is awesome, I'll check into this immediately. Also, this seems like a good opportunity if you want to get your name on the list of contributors to ignite ;)

[mmazzarolo]

Yup, I've been a bit hesitant on contributing because I never tried the Ignite app itself, i only used the boilerplate.
Give me a day of two and I'll probably take a look at it and try to implement the new experimental navigation (I'm still playing with it).

[mmazzarolo]

@GantMan, don't know if you're interested but I updated the Gist adding a native toolbar for both iOS and Android and the drawer.
This navigator seems to be super flexible and I organized all the navigation stuff like in my first file in the Gist, but I'm continuously refactoring it.

HOWEVER
I'm having some problem resetting the navigation stack (when switching routes from the drawer) and it seems to be a known issue.
When I'll reach a stable working navigator I'll also dive into the ignite one, if still needed.

👘

[GantMan]

Man, you're my hero. I was just lining up this weekend to dive deep into re-writing the nav stack. I think if anything, I'll either hold off, or set the ground for you.

I would love an ignite navigation best practices PR.

[GantMan]

@mmazzarolo - Any luck? I was thinking of taking a swing at this task this week.

[mmazzarolo]

@GantMan, nope, I stopped working on it because currently replacing the stack is buggy, but we should have a fix soon.
If you need to reset the screen stack (e.g. from a logout or from a drawer) I would still wait a little.

[GantMan]

awesome, will wait for a bit :) as per your recommendation.

[mmazzarolo]

Just a small update: still no updates.
Navigation Experimental development seems to be really slow 🎌

[markrickert]

Update: no updates.

:trollface:

[steve21124]

The current initial ignite base generator has empty drawer menu. from above discussion
https://gist.github.com/mmazzarolo/5a4f235b6b07fa14247c0fb081b1f13f
https://github.com/caroaguilar/NavigationDrawerExample
http://caroaguilar.com/post/react-native-navigation-tutorial/

did any one has idea which way is a good way to create drawer menu?

[GantMan]

We've got drawers working with our current nav, but not with NavigatorExperimental, which is what this ticket is geared towards.

Are you looking fora good example drawer in the initial ignite base?

[steve21124]

yes, I am looking for a good example of drawer menu in ignite base. there are several drawer menu react native. but I just wandering. which one is a good one to use so it integrate nicely to ignite base

[mmazzarolo]

@steve21224 I'd go with react-native-drawer, it is the most flexible one in my opinion.
The only issue I've had so far with it is regarding a11y but it might be a corner case.
It also integrates nicely with the current navigator of Ignite.

[steve21124]

good thanks. then I will reuse the react native drawer from http://caroaguilar.com/post/react-native-navigation-tutorial/ then.....
ok. I found out the solution to integrate it to ignite
==> using this isnite root.js will push the drawer content
Theme Screen

also, if you have some snippet of your drawer menu integrate to ignite. feel free to share if you don't mind

[steve21124]

Finally, I got it. my left drawer menu be able to replace the main container page.
Here what I did.
1.

  _navigate(route) {
      this.navigator.resetTo(route);
      this.navigator.drawer.close();
  }  
  renderDrawerContent () {
    return (
      View style={{marginTop: 30, padding: 10}}>
        RoundedButton onPress={() => this._navigate(Routes.PresentationScreen)}>
          Theme Screen
        RoundedButton>
        RoundedButton onPress={() => this._navigate(Routes.PresentationScreenB)}>
          Theme Screen
        RoundedButton>
        RoundedButton onPress={() => this._navigate(Routes.PresentationScreenC)}>
          Theme Screen
        RoundedButton>
      View>
    )
  }

and each presentation screen will have it own page. this will integrate nicely with ignite.
thanks for the help

[GantMan]

Awesome @steve21124

If you'd like to do an example in a PR we'd be happy to accept it.

[steve21124]

Thank you. Yes, if I can put some time in writing the tutorial for it. it will let you know.
This generator so awesome. I just look it yesterday. Now, I feel so productive in creating react native application.

From the ignite readme, I did not see there is generator for menu items. It might be cool. given a list of string array, using command "ignite generate menu 'Screen1,Screen2,Screen3,Screen4'". it will automatically create left drawer menu with the associate screen page from (ignite generate screen ...)

[GantMan]

I like that! Thoughts, @kevinvangelder and @skellock ?

[GantMan]

We will need to get ignite on the new navigator ASAP

[mmazzarolo]

@gantman, I'll try to submit a basic pr in two data if you're still interested

[steve21124]

i think. any pr that help. it will be great

[mmazzarolo]

days*, not data
...and unfortunately I'm too busy with other stuff, hope to take a look at it soon.
In the meantime if anyone else want to start this might help.
P.S.: they still haven't fixed the reset issue (on 0.26.1)

[GantMan]

I believe @skellock is slated to attack this this week.

[ahmed1490]

these might be useful.

• https://medium.com/@satya164/react-natives-navigationexperimental-with-redux-467acee02756#.hezs77704
• https://twitter.com/ReactEurope/status/739117962578296832
• https://github.com/ericvicenti/rn-sample

[sudharsan1988]

@steve21124 Just followed your instruction to add drawer menu content and that worked nicely but it makes the backbutton not working on the screen when we visit from the drawer menu item.

Is the backbutton working fine for you?

[sudharsan1988]

@steve21124 I replaced the below line on the _navigate() function,

this.navigator.resetTo(route);
to
this.navigator.push(route);

After made this change, back button works but there are two problems.

1) If I click on the menu items couple of times, I have to press the back button couple of times to get to the previous screen

2) Transition to the new screen isn't natural when we press the menu item from drawer. I guess, we need to change the transition method for drawer menu items.

Any idea how do we resolve this?

[ahmed1490]

useful: http://www.reactnativediary.com/2016/06/23/navigation-examples-1.html

[GantMan]

235 - solves how we're going to handle this. Going to close this ticket.