Expo router - shared routes with array syntax

Question

I'm building an app with React Native and Expo Router, and I'm struggling with setting up shared routes using the array syntax for shared routes..

My folder structure looks something like this:

app/
 _layout.tsx (root layout)
 (tabs)/
 -- _layout.ts (tab layout)
 -- (index)/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- search/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- post/
 auth/
 ...

I want to add shared screens, such as user/[id] or organization/[id], that can be accessed from multiple routes like index, search, and post.

Users should be able to navigate to these shared screens without switching tabs and while maintaining their tab context and history.

For example:

• If a user navigates to user/[id] from the search tab, they should stay within the search tab's layout, maintaining its history.
• Similarly, navigating to the shared user/[id] screen from the index tab should keep the user within the home tab's layout.

Here are the specific challenges I'm facing:

Folder Structure: I don't fully understand what my folder structure should look like for shared routes. How should I organize user/[id] so it can be shared across index, search, and post while maintaining their independent indexes and screens?

Layout Handling: Which layout should handle the segments, and where should it be placed?

Navigation: If I want to navigate from the home (index) screen to user/[id], I’d use something like '(index)/user/[id]'. But if I want to navigate from search, do I need to use 'search/user/[id]'? How does navigation work for shared components across different routes?

Array Syntax: If I use something like '(index, search, post)/user/[id]' to share the same screen between these routes, where does that leave their own indexes/ unique screens? What’s the proper way to handle this?

Any guidance on folder structure, layout setup, and navigation for shared routes with Expo Router would be greatly appreciated!

Answer 1

Sorry for the delayed answer but let me know if this is still useful.

So shared routing, I think, is an unstable feature so its a bit weird in how it works but I'll do my best to explain it.

So this would be the optimal file structure for shared routing:

app/
 _layout.tsx (root layout)
 (tabs)/
 -- (index,search,post)-> all the files in here will basically be copied and pasted into each respective folders
 ---- _layout.tsx
 -----user
 --------[id].tsx
 -----organization
 --------[id].tsx
 -----sharedfolder
 --------sharedfile.tsx
 -- (index)/
 ---- index.tsx /
 ---- screenxy.tsx /screenxy
 -- (search)/ -> If you want have shared routes inside you need to have () around folder name that will just make sure the tab bar doesnt show all the shared routes
 ---- index.tsx /
 ---- screenxy.tsx /screenxy -> if (index)/screnxy.tsx has the same name as this route, the route will be defaulted to (index)/screnxy.tsx if you try to use the browser and search the route manually
 -- (post)/
 ...

So the link tag is going to stay constant through all files if you need to go to user/id through search you would just use 'user/id' and expo will handle the rest stacking wise. If you want to use the Link tag here would be an example:

<Link href=`user/{id}`>
<Link href='sharedfolder/sharedfile'>

With _layout.tsx it will just be copied into all the folders as it is, but if you want custom _layout.tsx in each folder you can do so with this code in app/(tabs)/(index,search,post)/_layout.tsx

import { Stack, Tabs } from "expo-router";
import React from "react";


export default function DynamicLayout({ segment }: { segment: string }) {
    if (segment === '(index)') {
      return <Tabs />; //custom layout in the (index) folder
    }
    if (segment === '(notifications)') {
      return // any custom layout;
    }

    // this would be the default 
    return <Stack />;
    // remember the file layout for each segment will also contain the files from (index,search,post)

  }
  

Thats basically it if you have this formate expo will do the rest which is to copy all the files form (index,search,post) and put them in (index), (search), and (post) individually.

Let me know if anything is unclear.