WIP: add NavigationHeaderScenesTabs example

[jonathanglasmeyer]

Sooo.. i'm a bit stuck. :) I don't really get the behaviour of StackRoute & how pop works. See index.ios.js L84. I tried to understand defaultStackRouteReducer for ~1h via inserting lots of console.logs but i'm not much smarter now :D. The terminology around nextLeaf and the if-statements concerning it are kind of nebulous to me. On the component side, I do not exactly now how to interact with all the props thats passed to e.g. YourHeader, there is a lot of information coming in. These are the props passed to YourHeader > NavigationHeader::renderLeftComponent after clicking on "Push Route":

I have no clue what to check for here -- i'd love to write some documentation for this if you could explain this.

So, to explain what i try to do right now: we start out at route "/", this redirects us to "/apple". Now i want to click on "Push Route" -- this should lead me to "/apple/foo" and show the back arrow in the top nav bar, which would pop the stack and lead me to "/apple" again. Is there something wrong in the way i approach the routes definition or anything? I just can't pull it off. :)

[jonathanglasmeyer]

After some more digging and understanding of canPopActiveStack, i think i understand the behaviour. StackRoute with path="/apple" has child <Route>s with paths "/apple/foo" and "/apple/bar". Once i push both "apple/foo" and "apple/bar" onto the stack, i am able to pop once. This is because canPop will return false if only one item is present in the stack of the StackRoute = (pos = -1, state.index = 0 means that i cannot pop). So maybe i have modeled the route architecture wrong? I guess i'm basically looking for a up navigation which cannot be modeled by StackRoutes behaviour?

[jonathanglasmeyer]

K, i think i have solved this by remodeling the route architecture like so:

    <TabsRoute path="/" component={YourApplication} onEnter={redirect('/', '/apple')}>
      <StackRoute
        path="/apple"
        component={YourScene}
        overlayComponent={YourHeader}
        transition="horizontal-card-stack"
      >
        <IndexRoute component={Foo} />
        <Route path="bar" component={Foo} />
        <Route path="baz" component={Foo} />
      </StackRoute>

No we have an initial index route and if we push /apple/bar on the stack we have the back button / pop behaviour working. Probably obvious once you know it :D - i just spent three hours finding out.

[jonathanglasmeyer]

Sooo -- i might be tapping in the dark here again, but the behaviour of TabsRoute and StackRoute is not the way i'd expect it to be. This is a demonstration of the current behaviour:

• When i switch to 'banana' and push a route, then switch over to 'apple' and back again to 'banana', i'd expect that banana's stack will be restored (instead it pushes the index route onto that tab's stack, so if i pop once i'm at the point where i'd like to be).
• I also don't expect animations for the tab switches, but only for stack switches.
• Clicking on a bottom tab while its active should reset the stack for this tab (like Twitter ios app does)

What am i doing wrong?

Link to relevant code