Handling modals

[jeanregisser]

For of all, thank you for creating this library and experimenting with it. I really like the stated goals.
I've been dreaming of having easy deep linking in a native app for a long time ;)

Now, I'm trying to see how to handle modal screens (fullscreen or popups).

So far I've tried the following:

<Router history={nativeHistory}>
  <StackRoute path="master" component={Master}>
    <StackRoute path="master2" component={Master}>
      <Route path="/" component={Home} overlayComponent={HomeHeader} />
      <Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
    </StackRoute>
    <Route
      path="/modal"
      component={Modal}
      transition="vertical-card-stack"
    />
  </StackRoute>
</Router>

It works partially:

• when I navigate to /modal, I get the correct behavior the first time
• if I go back and navigate again, the modal gets displayed twice quickly
• navigating to /detail/:themeColor animates the nav bar incorrectly

Also there's a warning displayed that says <TabsRoute> and <StackRoute> cannot be nested within <StackRoute>. So I know this wasn't intended to be done like this ;)

Is there another way to handle this?

[jeanregisser]

I've also tried this:

<Router history={nativeHistory}>
  <StackRoute path="master" component={Master}>
    <Route path="/" component={Home} overlayComponent={HomeHeader} />
    <Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
    <StackRoute
      path="master2"
      component={Master}
      transition="vertical-card-stack"
    >
      <Route path="/modal" component={Modal} overlayComponent={HomeHeader} />
    </StackRoute>
  </StackRoute>
</Router>

The main problem is the animation which directly hides the nav bar of the initial stack. And of course I still have the warning about nested <StackRoute>.

[frimoldi]

Hey, I'm getting the same warning for nested <StackRoute>s. Did you solve this ?