Navigation not working with nested navigator in v2

Question

Navigation not working with nested navigator in v2

dasovm opened this issue a year ago · comments

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

yarn

Summary

I'm not getting navigation to work whenever there's a nested navigator in my segment-group. This worked with Router 1.x + Expo 48, but did break after upgrading to Router 2 + Expo 49. Whenever I try to navigate to a page (using the Link-component from Expo Router) I get the following error:

The action 'NAVIGATE' with payload {"name":"app"} was not handled by any navigator.

Do you have a screen named 'app'?

Minimal reproducible example

https://github.com/dasovm/expo-router-issue-768

Init a new repo using the SDK 49 tabs template:

npx create-expo-app@latest --template tabs@49

Use the following type of structure in the app-directory:

- _layout.tsx
- index.tsx
- (app)
  - _layout.tsx
  - app.tsx

In (app)/_layout.tsx just use a basic layout:

import { Stack } from "expo-router";
export default Stack;

In index.tsx use the following code:

export default function IndexPage() {
  return (
    <View>
      <Link href="/(app)/app">App</Link>
    </View>
  );
}

The navigation won't work and will throw the error mentioned above. If you then remove the Stack-layout from (app)/_layout.tsx (remove the file), it will then work again.

Kenneth Stark · Answer 1 · Thu Jul 13 2023 10:34:29 GMT+0800 (China Standard Time)

try with just

<Link href="/app">App</Link>

I believe with the way you have it its looking for (app)/(app)/app.tsx which doesn't exist.

rohovdmytro · Answer 2 · Thu Jul 13 2023 18:37:04 GMT+0800 (China Standard Time)

Groups are not meant to be a part of the URL so it won't work if you specify a group id while navigating.

David Söderberg · Answer 3 · Thu Jul 13 2023 22:57:33 GMT+0800 (China Standard Time)

Isn't the whole concept of Shared Routes built upon using groups in the URL? Also it seems that some of the generated typed routes includes groups as well, so I guess that should be fine.

Anyway, I tried using only /app as href in the Link but unfortunately with the same result: got The action 'NAVIGATE' with payload {"name":"app"} was not handled by any navigator. as error in the console and no navigation happened.

Kenneth Stark · Answer 4 · Fri Jul 14 2023 07:30:40 GMT+0800 (China Standard Time)

I was wrong, docs do say you should be able to include the group in the href. Wonder if it's because they're named the same.. Do other group urls work? Maybe try something like (testA)/testB

David Söderberg · Answer 5 · Fri Jul 14 2023 15:11:50 GMT+0800 (China Standard Time)

Yes, if I remove the app/_layout.tsx-file in the example above, then navigating using <Link href="/(app)/app">App</Link> works for me.

jmankhan · Answer 6 · Tue Jul 18 2023 10:19:01 GMT+0800 (China Standard Time)

I can confirm I am also experiencing this issue, in my case I thought using a (tabs) navigator was messing it up, but it turns out it was just the nested navigation as mentioned in the OP.

Mark Lawlor · Answer 7 · Tue Jul 18 2023 11:20:27 GMT+0800 (China Standard Time)

Can you please provide a full reproduction. I have followed the steps provided and was unable to replicate the issue. Your steps are missing information such as the contents of _layout.tsx. I tried to guess its contents but was still unable to reproduce the issue.

Edd · Answer 8 · Tue Jul 18 2023 16:06:23 GMT+0800 (China Standard Time)

Not the OP but I've recreated this on multiple devices. If you create an app with npx create-expo-app@latest --template tabs@sdk-49

Move modal.tsx into a (modals) folder
Create a _layout.tsx in that folder

import { Stack } from 'expo-router';
export default function ModalLayout () {
    return (
        <Stack>
            <Stack.Screen name="modal" />
        </Stack>
   )
}

Change the RootLayoutNav name="modal" to name="(modals)"

The issue is navigating from one folder with a _layout.tsx to another with it also. Everything else works fine.

David Söderberg · Answer 9 · Tue Jul 18 2023 20:35:39 GMT+0800 (China Standard Time)

@marklawlor sure thing! I created a repo here: https://github.com/dasovm/expo-router-issue-768

The "To App"-link doesn't work for me in the repo above. I tried to look more into what could be the issue and found that it might be something with initialRouteName in app/_layout.tsx. If I remove that setting, the link works as expected.

Kennet Postigo · Answer 10 · Fri Jul 21 2023 11:13:06 GMT+0800 (China Standard Time)

Setting the following property seems to break navigation when you have a combo of stacks or tabs:

export const unstable_settings = {
  initialRouteName: '(auth)',
};

It will throw the following error:

 ERROR  The action 'NAVIGATE' with payload {"name":"home/index"} was not handled by any navigator.

Do you have a screen named 'home/index'?

Even though I do have a validhome/index screen.

This won't allow navigating to (app) later. Removing the above does allow it. navigation to work once again.

badhrin · Answer 11 · Thu Aug 03 2023 23:56:08 GMT+0800 (China Standard Time)

Setting the following property seems to break navigation when you have a combo of stacks or tabs:
export const unstable_settings = {
  initialRouteName: '(auth)',
};
It will throw the following error:
 ERROR  The action 'NAVIGATE' with payload {"name":"home/index"} was not handled by any navigator.

Do you have a screen named 'home/index'?
Even though I do have a validhome/index screen.

This won't allow navigating to (app) later. Removing the above does allow it. navigation to work once again.

Confirming the same problem. I have a Tabs nested within a Stack & cannot navigate to the Tabs.
But the current workaround is to remove the unstable_settings. Am able to navigate to the Tabs once the unstable_settings is removed or commented out.

Tate Larkin · Answer 12 · Thu Aug 10 2023 23:46:33 GMT+0800 (China Standard Time)

Setting the following property seems to break navigation when you have a combo of stacks or tabs:
export const unstable_settings = {
  initialRouteName: '(auth)',
};
It will throw the following error:
 ERROR  The action 'NAVIGATE' with payload {"name":"home/index"} was not handled by any navigator.

Do you have a screen named 'home/index'?
Even though I do have a validhome/index screen.

This won't allow navigating to (app) later. Removing the above does allow it. navigation to work once again.

I'm also confirming this same issue. Removing the unstable_settings worked.

Médédé Raymond KPATCHAA · Answer 13 · Sat Aug 19 2023 16:57:52 GMT+0800 (China Standard Time)

Setting the following property seems to break navigation when you have a combo of stacks or tabs:
export const unstable_settings = {
  initialRouteName: '(auth)',
};
It will throw the following error:
 ERROR  The action 'NAVIGATE' with payload {"name":"home/index"} was not handled by any navigator.

Do you have a screen named 'home/index'?
Even though I do have a validhome/index screen.

This won't allow navigating to (app) later. Removing the above does allow it. navigation to work once again.

Exact same thing. I was wondering if this could break something in the future. I'll comment it out for now and see.

Bratua · Answer 14 · Tue Aug 29 2023 18:51:04 GMT+0800 (China Standard Time)

Upgrading expo-router to latest version (2.0.4 as at this comment) solves this issue.

Mark Lawlor · Answer 15 · Wed Aug 30 2023 15:05:46 GMT+0800 (China Standard Time)

Fixed in 2.0.4. If your still have any issues can you please reply with a reproduction.

Médédé Raymond KPATCHAA · Answer 16 · Thu Aug 31 2023 19:09:05 GMT+0800 (China Standard Time)

@marklawlor It doesn't seem to work.
Here is a simple reproduction repo https://github.com/mrkpatchaa/expo-router-modal-stack
Clicking on the right icon doesn't open the modal.

Mark Lawlor · Answer 17 · Fri Sep 01 2023 09:56:58 GMT+0800 (China Standard Time)

@mrkpatchaa That is a slightly different issue, the fix just got merged and should be published soon expo/expo#24166

Médédé Raymond KPATCHAA · Answer 18 · Fri Sep 01 2023 15:31:04 GMT+0800 (China Standard Time)

Great. Thanks @marklawlor I'll test it once it's published.

Médédé Raymond KPATCHAA · Answer 19 · Sat Sep 02 2023 03:53:59 GMT+0800 (China Standard Time)

@marklawlor I confirm version 2.0.5 works well.
Thanks 🎆

Jakob Helgesson · Answer 20 · Sun Sep 03 2023 17:28:16 GMT+0800 (China Standard Time)

@marklawlor I am still able to reproduce this error on expo-router@2.0.5 using dasovm's minimal reproducible example.
Here are my steps

git clone git@github.com:dasovm/expo-router-issue-768.git
cd expo-router-issue-768
yarn add expo-router@2.0.5
running yarn install just to make sure everything is there, getting success Already up-to-date
yarn start
Scanning qr code and opening Expo Go on iPhone 14 PM
Clicking the To App link inside of the example application
Console and phone showing the bellow error:

 ERROR  The action 'NAVIGATE' with payload {"name":"app"} was not handled by any navigator.

Do you have a screen named 'app'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

Mark Lawlor · Answer 21 · Mon Sep 04 2023 13:44:43 GMT+0800 (China Standard Time)

@svemat01 Did you intend to have an initialRouteName for your navigator? If so, then your navigator needs a Screen with the name index.

    <Stack>
-     <Stack.Screen name="(app)" options={{ headerShown: false }} />
+     <Stack.Screen name="index" />
    </Stack>

If you didn't intend this, then you should remove the unstable_settings

- export const unstable_settings = {
-  initialRouteName: "index",
- };

Jakob Helgesson · Answer 22 · Tue Sep 05 2023 21:40:51 GMT+0800 (China Standard Time)

@marklawlor Thanks for the reply! But yes, I intend to have an initialRouteName however adding an index screen to the navigator as your reply suggests does not appear to fix the issue unfortunately.

Daniel Quinones · Answer 23 · Thu Sep 14 2023 22:47:23 GMT+0800 (China Standard Time)

Hello, I have the same issue where I have a combo of a Stack into Tabs and they don't render.

I'm on expo 49.0.8 and expo-router 2.0.5. This was working on a previous version of both expo and expo-router, it only started happening after I upgraded both to latest.

Additionally, and I'm not sure if this is related, but a slight difference for my setup is that if i remove unstable_settings, in the _layout where I have the Stack component, all pages defined there stop rendering. Right now I can only get them to render via setting them as modal in the Stack.Screen options with unstable_settings defined.

This is my file structure:

- app
  _layout.tsx
 index.tsx
 - (app)
    _layout.tsx -- Stack/Stack.Screen
    - (main)
       _layout.tsx -- Tab component

huix9527 · Answer 24 · Wed Sep 20 2023 11:23:46 GMT+0800 (China Standard Time)

Similar issue, solved by upgrading to latest expo router (2.0.7).