NavigatorExperimental Away Mission about ignite HOT 34 CLOSED

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

from ignite.

is sorry.

is fixed.

😺

from ignite.

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

from ignite.

@GantMan is on this.

from ignite.

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!

from ignite.

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.

from ignite.

@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 🐼

from ignite.

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 ;)

from ignite.

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).

from ignite.

@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.

👘

from ignite.

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.

from ignite.

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

from ignite.

@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.

from ignite.

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

from ignite.

Update: no updates.

from ignite.

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?

from ignite.

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?

from ignite.

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

from ignite.

@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.

from ignite.

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
<RoundedButton onPress={() => this.navigator.push(Routes.ThemeScreen)}>
Theme Screen

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

from ignite.

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

from ignite.

Awesome @steve21124

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

from ignite.

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 ...)

from ignite.

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

from ignite.

We will need to get ignite on the new navigator ASAP

from ignite.

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

from ignite.

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

from ignite.

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)

from ignite.

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

from ignite.

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

from ignite.

@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?

from ignite.

@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?

from ignite.

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

from ignite.

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

from ignite.