expo: Unable to route between Stacks inside Tabs

Any updates on this issue? Huge blocker for our march release. Shall I switch to React Native Navigation until then?

I was able to get the behavior hackily working using the navigation object instead of the router object, and using the “initial: false” option.

Something like:

const navigation = useNavigation()

<Pressable
    onPress={() => {
        navigation.navigate(<stackName>, {
          screen: <screenNameInStack>,
          params: { <queryParams> },
          initial: false // This renders the initial screen in the stack even when navigating to the nested screen?
        })
     }}
 >

I also used a custom back button to have more control over the routing

https://reactnavigation.org/docs/nesting-navigators/

this issue deservers much more attention. I’m glad to found @kaustubnvd workaround. many thanks!

I was able to get the behavior hackily working using the navigation object instead of the router object, and using the “initial: false” option.

Something like:

const navigation = useNavigation()

<Pressable
    onPress={() => {
        navigation.navigate(<stackName>, {
          screen: <screenNameInStack>,
          params: { <queryParams> },
          initial: false // This renders the initial screen in the stack even when navigating to the nested screen?
        })
     }}
 >

I also used a custom back button to have more control over the routing

https://reactnavigation.org/docs/nesting-navigators/

Hey all, it may be easier to create a patch file. That way you don’t need to change all the calls from router.navigate to navigation.navigate:

diff --git a/node_modules/expo-router/build/global-state/routing.js b/build/global-state/routing.js
index dfd96d110aaa01e014ed4172d7333092f708243d..6a40662a213c1b6e9051199854e0a06412c36332 100644
--- a/node_modules/expo-router/build/global-state/routing.js
+++ b/node_modules/expo-router/build/global-state/routing.js
@@ -150,6 +150,9 @@ function getNavigateAction(state, parentState, type = 'NAVIGATE') {
     else if (type === 'REPLACE' && parentState.type === 'tab') {
         type = 'JUMP_TO';
     }
+
+    params.initial = false
+
     return {
         type,
         target: parentState.key,

@kpoelhekke Version 3.5.x is current in beta and we’re finalising it for SDK 51. I haven’t verified that this particular issue has been resolved yet, but it includes many fixes for navigating across nested layouts.

From your description, it seems like your experiencing a number of different issues that may or may not relate the discussion at hand. Its hard to provide an answer without knowing the specifics. I would recommend creating an issue for each one so I can provide correct information.

@marklawlor what can be expected from expo-router regarding this issue? Is this really a bug or is this expected behavior?

We have a pretty large app, and this behavior easily lead to bugs when navigating between tabs via deeper nested stacks. It will become very difficult to keep track of all components that have inter-tab navigation. In all those locations we have to make sure the initial route is rendered before the actual navigation event is dispatched.

Also a lot of times the <Redirect /> component sends users to a screen in a different tab and they’re not able to go back. We have some workarounds in place now, but it is definitely a big concern here and causes cognitive overhead for our developers going forward.

The params.initial = false also doesn’t always work when working with nested Stacks.

Would be nice to know if this is on the roadmap or if this is too big of a breaking change to implement.

the patch worked for me

Hey all, it may be easier to create a patch file. That way you don’t need to change all the calls from router.navigate to navigation.navigate:

diff --git a/node_modules/expo-router/build/global-state/routing.js b/build/global-state/routing.js
index dfd96d110aaa01e014ed4172d7333092f708243d..6a40662a213c1b6e9051199854e0a06412c36332 100644
--- a/node_modules/expo-router/build/global-state/routing.js
+++ b/node_modules/expo-router/build/global-state/routing.js
@@ -150,6 +150,9 @@ function getNavigateAction(state, parentState, type = 'NAVIGATE') {
     else if (type === 'REPLACE' && parentState.type === 'tab') {
         type = 'JUMP_TO';
     }
+
+    params.initial = false
+
     return {
         type,
         target: parentState.key,

Thank you so much, it saved me a lot of time of debugging…

In case someone will try to adapt it on expo-50:

diff --git a/node_modules/expo-router/build/global-state/routing.js b/node_modules/expo-router/build/global-state/routing.js
index 2fba9d1..9cce0c9 100644
--- a/node_modules/expo-router/build/global-state/routing.js
+++ b/node_modules/expo-router/build/global-state/routing.js
@@ -173,6 +173,9 @@ function getNavigateAction(state, parentState, type = 'NAVIGATE') {
     else if (type === 'REPLACE' && parentState.type === 'tab') {
         type = 'JUMP_TO';
     }
+
+    params.initial = false
+    
     return {
         type,
         target: parentState.key,

Just issue two commands. First one command that switches tab and then the one that pushes to stack. You might have to put a small delay between the. Like an await on a promise that resolved after a few ms

On Thu, 11 Jan 2024 at 21:32, Chrıs Seelus @.***> wrote:

@killerchip https://github.com/killerchip How did you trigger two navigation actions?

Similar problem here. My app consists of five tabs, each with its own stack and linking from the first tab directly to a page nested inside another tab, won’t show a back button, resulting in the tab being trapped on the nested page.

— Reply to this email directly, view it on GitHub https://github.com/expo/expo/issues/26211#issuecomment-1887831484, or unsubscribe https://github.com/notifications/unsubscribe-auth/AELMPHWKU6QHXCFVQHKC2UTYOA433AVCNFSM6AAAAABBKK53K2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBXHAZTCNBYGQ . You are receiving this because you were mentioned.Message ID: @.***>