The navigation.navigate() method can't navigate to the desired screen

Structure of the router

NativeStackNavigator
  Screen #1
  Screen #2

  Screen #3
    BottomTabNavigator
      Tab #1
        NativeStackNavigator
          Screen #5 (default)
          Screen #4
      Tab #2
        NativeStackNavigator
          Screen #6

After using props.navigation.navigate(...) from the Screen #2 component I was expecting to open Screen #4 inside Tab #1.

// Called from Screen #2
props.navigation.navigate('Screen #3', {
  screen: 'Tab #1',
  params: {
    screen: 'Screen #4',
  },
});

The actual result:

1. App navigates to the Screen #4.
2. then, app navigates back to the Screen #5 (which is default)
3. App tries to navigate back to the Screen #4 (which was desired)
4. App navigates back to the Screen #5
5. After that, I manually try to navigate to the Screen #4, the Screen #4 is opening, but there is no back button in the header, and I able only navigate back by using swipe back gesture.

The package.json

"@react-native-community/masked-view": "0.1.6",
"@react-navigation/bottom-tabs": "^5.5.1",
"@react-navigation/native": "^5.5.0",
"@react-navigation/stack": "^5.4.1",
"react-native-screens": "^2.8.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "^2.8.0",

Platform: iPhone X (Software version 13.5)

P.S. See the attachment below to see the issue. (video)

IMG_7572.zip

[Josiassejod1]

Hey, @WoLewicki, I was able to reproduce this issue in stand alone project. You can find it by using this reference.

I was trying to put the same package.json and yarn.lock files that I use on my project.

UPDATE: I found work around instead of using navigate to use push method.

Instead of this

props.navigation.navigate('Screen #3', {
  screen: 'Tab #1',
  params: {
    screen: 'Screen #4',
  },
});

use this

props.navigation.push('Screen #3', { // push instead of navigate
  screen: 'Tab #1',
  params: {
    screen: 'Screen #4',
  },
});

Maybe it will help you to understand the root of the problem

UPDATE 2:

This workaround behaves differently from the first approach, because it keep old routes in the memory where props.navigation.navigate reset routes (As far I understand).

At least my application start to behave differently. Doesn’t fix the issue.

push worked for me you are a fife saver

[enheit]

@WoLewicki, I’ve updated to the Expo SDK 38 and issue disappear.

Thank you a lot.