[Expo 49, Router v2] Drawers Missing Dynamic Routing Like Tabs

[kennethstarkrl]

Minimal reproducible example

https://github.com/kennethstarkrl/expo-49-router-v2-drawer-missing-dynamic-routing

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

Drawers are missing the ability to use dynamic routing like tabs do. We should be able to pass the same href object in the options to Drawer.Screen like Tab.Screen as defined in the docs here https://docs.expo.dev/router/advanced/tabs/#dynamic-routes

There is a workaround for this which is to pass in custom drawer item components and control the routing that way, but we shouldn't have to do that.

Environment

expo-env-info 1.0.5 environment info: System: OS: Windows 10 10.0.22621 Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.8.0 - C:\Program Files\nodejs\npm.CMD npmPackages: expo: ~49.0.13 => 49.0.13 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.72.5 => 0.72.5 react-native-web: ~0.19.6 => 0.19.9 Expo Workflow: managed

[EvanBacon]

Drawer isn't necessarily built-in like stack and tabs are. Drawer isn't especially optimized for the web platform and pulls in a lot of javascript on all platforms, so we've tried to keep our usage and official support of it to a minimum. The user-space workaround seems like a fair alternative for the time being until we have a better solution.

[kennethstarkrl]

@EvanBacon Thanks for clarifying, gonna go with the user-space workaround for now.

[Slokh]

hey @kennethstarkrl any pointers on the workaround? been trying to get this working and have some wonky solution but wondering if your solution is better

[kennethstarkrl]

hey @kennethstarkrl any pointers on the workaround? been trying to get this working and have some wonky solution but wondering if your solution is better

I ended up building my own drawer and manually controlling the router from the custom DrawerItems component

_layout

    return (
      <GestureHandlerRootView style={{ flex: 1 }}>
        <Drawer 
          drawerContent={(props) => <DrawerItems {...props}/>} //DrawerItems is just a component with Pressables using route.push()
          backBehavior={'history'}
          }}
          >
            <Drawer.Screen
              name="index"
              options={{
                path:'index',
                drawerLabel: "Home",
                drawerIcon:()=>{return <MaterialCommunityIcons name="home" size={20} color={colors.text} />},
              }}
            />
            ...

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[dlindenkreuz]

Still valid, ping to keep this open

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.