Need help to understand how transition works

[smontlouis]

I have a regular Tabs interface, and I want to slide between tabs (this one works).
But when I click for example on a Topic in Topics Tab, I want to go in topics/:topicId with a horizontal-card-stack (this one is not working).

Am I doing something wrong ?

    <Router
      history={nativeHistory}
      addressBar
    >
      <TabsRoute
        path="/home"
        component={Master}
        onEnter={userIsLogged}
        transition="horizontal-pager"
      >
        <Route
          path="/"
          component={Topics}
        />
        <Route
          path="/favorites"
          component={Favorites}
        />
        <Route
          path="/profile"
          component={Profile}
        />
        <Route
          path="/more"
          component={More}
        />
      </TabsRoute>
      <Route
        path="/topics/:topicId"
        component={Topic}
        transition="horizontal-card-stack"
      />
      <Route
        path="/questions/:questionId"
        component={Question}
        transition="horizontal-card-stack"
      />
      <Route
        path="/login"
        component={Login}
        onEnter={userIsNotLogged}
      />
    </Router>

[jonathanglasmeyer]

Try a StackRoute with path /topics with a child Route with path /topics/:topicId. Specify the transition on the StackRoute.

[smontlouis]

Thank you @jonathanewerner, but if I do this, :topicId will inherits from /topics, but their layouts are totally different.

[smontlouis]

I tried something like that :

     <TabsRoute
        path="mainApp"
        component={MasterWithTabs}
        onEnter={userIsLogged}
        transition="horizontal-pager"
      >
        <StackRoute
          path="something"
          component={Master}
          transition="horizontal-card-stack"
        >
          <Route
            path="/"
            component={Topics}
          />
          <Route
            path="/topics/:topicId"
            component={Topic}
          />
          <Route
            path="/questions/:questionId"
            component={Question}
          />
        </StackRoute>
        <Route
          path="/favorites"
          component={Favorites}
        />
        <Route
          path="/profile"
          component={Profile}
        />
        <Route
          path="/more"
          component={More}
        />
      </TabsRoute>

But now topics inherits tabs from MasterWithTabs... I'm lost ^^'

[smontlouis]

@jonathanewerner This is what I'm trying to achieve link here
(EDIT: @DenJohX, @jonathanewerner here is the correct link)

Just have Tabs and want to open Topics/:topicId with a card stack style

[DenJohX]

This is actually related to #56, the only solution I found was to show a modal for the "stacked" routes inside the tabs route, that way you can style them the way you want.

Edit: The downside of showing a modal is that you cant have a url for it, unless you create the modal inside the view then handle the opening/closing with the changes in the url, this is something i was thinking to do, but I have not needed yet. So if you do, please post the code ;-)

PS. I can't see the example, check the link.

[jonathanglasmeyer]

Yea the link doesn't work.
I don't fully understand what you mean by "inherits tabs". A visualization / reference gif will surely help. :)

[farwayer]

I have the same question. How can I have no animation between tabs and stack animation in one of them?

<Router>
      <TabsRoute path='/' component={UI}>
        <StackRoute path='tab1' component={Container} transition='none'>
          <IndexRoute component={screens.Portfolio} />
          <Route path='/register' component={screens.Register} />
        </StackRoute>
        <Route path='tab2' component={screens.Info} />
        <Route path='tab3' component={screens.Info} />
        <Route path='tab4' component={screens.Info} />
      </TabsRoute>
    </Router>

And is it possible to not reset stack state after switching to another tab?