Same routes shared across multiple tabs. about react-router-native

[jmurzy]

React Router matches routes in the order they are defined. See also, remix-run/react-router#1923. Hence, the jumps between tabs. So you will need to make sure "identical" paths are relative to their respective <StackRoute> or <TabRoute>.

I think the best way to approach it will be the following:

const userRoutes = (
 /* relative paths */
 <Route path="user/:userId">
 <Route path="user/:userId/followers">
);

const routes = (
 <TabsRoute path="/">
   <StackRoute path="/friends">
     <Route path="list">
     {userRoutes}
   </StackRoute>
   <StackRoute path="/profile">
     <Route path="me">
     {userRoutes}
   </StackRoute>
 </TabsRoute>
);

However, there is a bug, #17, that prevents this from working as expected. The fix should be live in a week or so few weeks.

🍺

[arthurpark]

With proposed solution, how can I hide tab bar when on userRoutes? Trying to build something similar like FB messenger (Home -> conversation, People -> conversation)

[joonhocho]

@arthurpark You can refer to facebook/react-native#8350 for how to control overlays from the scene. I think the best way is to use either redux or some kind of event system as suggested on the thread.
@jmurzy What do you think about writing a new url matcher that first matches routes under the current route subtree, then climb up the tree if not found, and so on, for each level?
The new matcher will always try to match the route that is closest to the current route, and there can be multiple routes sharing the same url pattern. Do you see any potential problems with this approach?

[jmurzy]

@arthurpark Take a look at the example app. The only difference is that instead of rendering the tabs in the Master component, you'd have to put them in each of your route components that render the individual tabs. So when the transition happens, tabs will just simply hide away as with the rest of your tab component.

@joonhocho I'm still working on this. Recent refactoring of the internal API was to pave the way for more flexibility in how routes are matched. I need to cover all the cases and avoid as much of the magic as possible. Honestly, this is the reason why I'm still tagging the releases with alpha.

🍺