Dynamic number of routes?

[likeSo]

We know that expo router is a file-based routing system, so what if the number of pages in my tab is dynamic?

For example, I have a top tab navigator, and the screens of this navigator are dynamic, maybe only 1, or maybe 10

[likeSo]

For now, i cannot use route layouts, i have to use React Native Tab View and create a tab view manually

[likeSo]

I am using React Navigation's Material Top Tab Navigator to achieve this:

      <TopTab.Navigator
          screenOptions={{
            tabBarGap: 12,
            tabBarItemStyle: { width: 'auto' },
            tabBarScrollEnabled: true,
          }}
        >
          {taskList.map((value, index) => {
            return (
              <TopTab.Screen
                name={value.stop}
                component={TaskList}
                options={{ lazy: index > 1 }}
                initialParams={{ taskInfo: value }}
                key={index.toString()}
              />
            );
          })}
        </TopTab.Navigator>

But i got a new problem:

But the URL seems like not correct and will lose the initialParams once change the tab

URL:
http://localhost:19000/?taskInfo=%5Bobject%20Object%5D&initial=true&path=%2F&screen=index

First time:

After change the tab:

My initialParams are gone!

[wcastand]

can't use https://expo.github.io/router/docs/features/routing#dynamic-routes ?
From your code, the component is always the same so only the name changes, which let me think you can use a dynamic route.

[likeSo]

I need to generate routes based on my data. For example, the tabs inside my Top Tab Bar Navigator, are dynamic, maybe only 1 tab, or maybe 100

[ItsMeJules]

Hi @likeSo, I have the same problem you had, and on top of that, I wanted to hide some folders in the active one as they could be swiped to (both of which I couldn't achieve with expo-router). I ended up doing everything with react-navigation-material-top-tabs.

Now, I'm facing another issue... I can't navigate to my top tabs navigator anymore from outside of it. I don't even know what to provide as parameters to useNavigation().navigate.

What did you end up doing?

[likeSo]

You can still use router.push() to navigate, and useLocalSearchParams() to get params.

[ItsMeJules]

What? Really? I tried navigating to with router.push() using the return value from usePathname(), but no navigation seemed to happen.

Do you have any code snippet to show me (or, I can show you some of mine) @likeSo?

[likeSo]

I am sorry but my use case may not suit you. In my case, all of my top tabs came from the network. For example, I have a couple of categories with a goods list, I just pass categoryId or something using the initialParams. I don't need to navigate because I can't predict how many categories I have. In short, according to my experience, even if you use the React Navigation API, you will still get a corresponding route, so as long as you have the route path, you should be able to navigate to the specific page