routing to a Dynamic path, from Tab.Screen

[lucksp]

The file based routing hasn't exactly clicked all the way for me. The earlier NextJS pages file routing worked easily. I haven't made the conversion to Expo Route file based for some reason. Possibly because of the combo of Stacks & Tabs & Slots. I have been reading through the dynamic route docs. However, the documentation seems missing on how to navigate to a screen with a dynamic route, in terms of folder directory structure & slot v stack setup

When I navigate to /pattern/[id] from within my tabs screen, something is getting lost in translation as Expo is not finding the route. I have tried all sorts of things, but I think it's related to my folder structuring.

What I would like is: the destination /pattern/[id] to be a child of (tabs), not search.

app
  |__(auth)
     |__ _layout.tsx
     |__(tabs)
       |__ index.tsx
       |__ _layout.tsx
       |
       |__ search
       |__ index.tsx // <-- from where I navigate from
       |__ _layout.tsx
       |__ // other tabs content is ok since no navigation
            |
            |__ pattern // <-- where I want to navigate to
                 |__ _layout.tsx
                 |__ [id].tsx // <-- dynamic pattern id name 

Here is my Tab's _layout :

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
      />
      <Tabs.Screen
        name="search"
      />
      <Tabs.Screen
        name="pattern"
        options={{
          href: null, // based on docs this will hide the tab
      />
  </Tabs>
 )
};

On my search UI, when I press on an item to navigate to,

router.push({
  pathname: '/pattern', // I have also tried pathname: '/pattern/[id]', 
  params: { 
    id: dynamicLabelId
  },
});

The error from Expo is that the route cannot be found. You can see the pattern part of the route is not registering in the error:

Here is my current sitemap from Expo:

I am asking for help on:

1. why is router.push({ pathname: '/pattern', params: { id: label },}); not working right?
2. is my file structure ok? Do I need a Stack Screen inside Pattern to capture the [id].tsx page?

thank you in advance

[kyusungpark]

were you able to figure this out?

[lucksp]

Yes...not sure what was wrong before, but it's doing what I expected for the most part:

Inside my Tab screen, I:

router.push({
      pathname: '/searchResults',
      params: {
        id: label,
      },
    });

Unfortunately, I can't figure out the routing to keep the searchResults INSIDE the (tabs) route. Instead I just use my root Stack to display results as a modal on top of tab view.

const StackLayout = () => {
  return (
      <Stack
        screenOptions={{   ...     }}
      >
        <Stack.Screen
          name="searchResults"
          options={{
            presentation: 'modal',
            headerTransparent: true,
            headerRight: () => <FullScreenModalBackButton direction="down" />,
          }}
        />
      </Stack>
  );
};

export default StackLayout;

[kyusungpark]

oh same here. I was able to get it to work with stack, but not on Tabs

[kyusungpark]

I got rid of initial route name and it seems to work for now.