Nesting Drawer and Tabs (with shared routes?)

[Jeroen-G]

Summary

I would like to create an app that has a tab bar with a few buttons and a drawer that has other links (and at least one of the links goes to the same page as a tab button). Since both navigations need to be present at all times I think I need to nest navigators (although which one goes in which is still a mystery to me).

I tried nesting navigators and using shared routes and I tried to understand this thread from the RFC. But the proposed solution of shared routes does not seem to work for me.

Minimal reproducible example

Attempt with nesting: https://github.com/Jeroen-G/expo-router-repro
(see this commit for where I try to link to another page in another stack)

Attempt with shared routes: https://github.com/Jeroen-G/expo-router-repro/tree/shared-routes

[EvanBacon]

Could please elaborate on what you're trying to build and perhaps include some info on how you'd obtain this same behavior with React Navigation.

There are a number of issues with the repro:

• Multiple groups with the same name: (tabs), (tabs,drawer) -> [(tabs), (drawer)]
• Using SafeAreaProvider -- not needed.
• Screens point to nonexistent routes.

---

The following modifications work for me:

(one,two)
  _layout.js -> <Tabs />
  alpha -> Screen
  beta -> Screen
_layout.js -> <Drawer />

I have some naive example in (one,two)/_layout.js to change the first screen based on the segment:

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

export default function Layout({ segment }) {
  let children = [
    <Tabs.Screen
      name="agenda"
      options={{
        title: "agenda",
      }}
    />,
    <Tabs.Screen
      name="help"
      options={{
        title: "help",
      }}
    />,
  ];
  if (segment === "(one)") {
    children = children.reverse();
  }
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          href: null,
        }}
      />

      {children}
    </Tabs>
  );
}

Clone syntax (foo,bar) is not required, it just acts as a convenience layer over physically copying the same files multiple times.

[dbattpursuut]

It would be great to have a template with tabs and a drawer. I think people have two main use cases:

1. The drawer is only visible from one tab
2. The drawer is visible from all tabs

[Jeroen-G]

Thanks for your help (and this library!)

In the end I was able to create the drawer I want with a custom drawer component in a app/_layout, and all the tabs in a subdirectory:

function CustomDrawerContent(props) {
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItem label="Website" onPress={() => Linking.openURL('https://www.expo.dev/')} />
            <Link href={'/alpha'} onPress={() => props.navigation.closeDrawer()}>Alpha</Link>
            <Link href={'/beta'} onPress={() => props.navigation.closeDrawer()}>Beta</Link>
            <Link href={'/charlie'} onPress={() => props.navigation.closeDrawer()}>Charlie</Link>
        </DrawerContentScrollView>
    );
}

export default function Layout() {
    return (
        <Drawer drawerContent={(props) => <CustomDrawerContent {...props} />}>
            {/* All other screens should be hidden */}
        </Drawer>
    );
};

(I have pushed the code for this).

Thanks again!

[moedeveloper]

I would like to understand, how to disable the behavior of the drawer at startup? did you notice that on startup the drawer slides. I really don't understand why this is happening.

[Pyakz]

Hi, how do i change the order of the list in drawer?

right now i have
Menu
Settings
Transactions

i want the settings to be the last

[Jeroen-G]

Could you share the code?

[Pyakz]

I dont think its about the code, it just that the file based system is reading it alphabetically first, so the settings comes first after transactions.

[Jeroen-G]

You should be able to change the order through a Layout.

[amin79]

@EvanBacon @jonsamp Hi. I have scenario which I was able to create it with React Navigation. But have no idea how to do that here.

If the user is not authenticated, they shall see the login page. There they should be able to navigate to SignUp page too.
When they are authenticated, they should not see the login page anymore and be navigated to the main screen. (I was able to do that with the sample in the documentation)

Now here in the main page, I need to have some tabs which they have to be present in all pages.
I also need to have a drawer which I show it conditionally to the users.(If they have admin permission for example)
If they click on any links in the drawer and navigate to that page, the tabs should be also present there.

Thank you in advance.

[amin79]

@Jeroen-G What you have done is close to what I need. Just need to show the drawer conditionally. And also the tabs be present in all pages. Even when you click on the links in drawer.

[ddwebdevv]

@amin79 was you able to do it? if so can you share your structure/coed, please?

Trying the same. as you guys but with Auth nav as separate.

[amin79]

Unfortunately not. No one answered that and I’m still searching to find a solution. Please share your solution if you find and I’ll do the same.

[Jeroen-G]

Expo router is just a small layer on top of React navigation. So it is easier to first find out how to do what you want in React navigation and then port it to Expo router.
That's what I did, and what I recommended others.

[amin79]

I have done it before with React Navigation. But not able to do it with expo router. Then could you please let me know how to structure my project to have Tabs visible in all pages ? With RN i was able to have nested navigation ( like importing Tabs navigation in Drawer) but here it doesn’t work and I cannot find it in documents.

[Jeroen-G]

No I can't help you with anything else than my reproduction repo above.

[oussamachah2020]

m working on an app of two parts, client and store each part has its own layout . client has drawer and store has tabs
a client can create a store and than navigate to it , the prob is how can i navigate to the store from the client drawer.

[Jeroen-G]

Check out the docs on links, and use the sitemap to help guide you.