navigation.navigate() won't allow navigation to different stacks using WithPendoReactNavigation(NavigationContainer);

[chriswickham]

Platform + Version e.g IOS 15.6.1, Android 13

SDK Version RN 0.71.6, React Navigation 6, Pendo 2.22.0 "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/material-top-tabs": "^6.6.3", "@react-navigation/native": "^6.1.7", "@react-navigation/stack": "^6.3.17",

Framework React Native using React Navigation

Describe the bug In my app, whenever navigation.navigate() is called to navigate to a screen in a different stack to the current one, the app displays a black screen temporarily and then reloads to the default screen. I can only successfully navigate to other screens in the same stack.

To Reproduce Steps to reproduce the behavior:

1. Press an element inside PendoNavigationContainer that triggers a navigation.navigate() call to a screen in a different navigation stack.
2. See error

Expected behavior The app navigates to the intended screen.

Logs No relevant logs are created.

Sample Code

RootNavigator.tsx

const RootNavigator = () => {
  const navigationRef = useNavigationContainerRef();

  const PendoNavigationContainer =
    WithPendoReactNavigation(NavigationContainer);

  return (
    <PendoNavigationContainer
      ref={navigationRef}
    >
      <RootStack.Navigator screenOptions={{ headerShown: false, gestureEnabled: false }}>
        {loggedIn ? (
          <>
            <RootStack.Screen
              name={Stack.TABS}
              component={BottomTabNavigator}
            />
            <RootStack.Screen name={Stack.MAIN} component={MainNavigator} />
            <RootStack.Screen
              name={Stack.ONBOARDING}
              component={OnboardingNavigator}
            />
          </>
        ) : (
          <RootStack.Screen name={Stack.AUTH} component={AuthStack} />
        )}
      </RootStack.Navigator>
    </PendoNavigationContainer>
  );
};

MainNavigator.tsx

const MainNavigator = () => {
  return (
    <>
      <MainStack.Navigator
        screenOptions={{
          header: (props) => <ScreenHeader {...props} />,
          headerShadowVisible: false,
        }}
      >
        <MainStack.Screen name={Route.MY_SKILLS} component={MySkillsScreen} />
      </MainStack.Navigator>
    </>
  );
};

Part of LearnScreen (Stack.TABS), used inside BottomTabNavigator:

interface LearnScreenProps {
  navigation: StackNavigationProp<BottomTabsParamList, Route.LEARN>;
}

const LearnScreen = ({ navigation }: LearnScreenProps) => {
  return (
    <StyledContainer
      overScrollMode="never"
      refreshControl={
        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
      }
    >
        <SkillsCarousel
          activeSkill={skill}
          skills={userSkills}
          onSkillPress={setSkill}
          onAddSkillPress={() =>
            navigation.navigate(Stack.MAIN, { screen: Route.MY_SKILLS })
          }
        />
     </StyledContainer>
   )
}

Additional context navigation.navigate() still works using just NavigationContainer with the rest of the Pendo code.

[MikePendo]

@chriswickham Which plugin version are you using, can u please use the latest 2.22 and see if you still have an issue? As we previously fixed some bugs related to navigation ref I saw u r on 2.22 which is the latest one

[MikePendo]

In general, we don't modify the navigation ref in any way. We scan that object to create a screen identifier for analytics. That happens onStateChange. So it's hard to say from a first glance where we could miss it. Do you have any other analytics tools that u use ?

[chriswickham]

@MikePendo the issues persists when there are no props specified for the NavigationContainer, including the ref. Have you attempted to mimic the structure of my code sample? It could be an issue with nested navigators.

I've tried adding console.logs/alerts but I haven't seen anything untoward.

[MikePendo]

@chriswickham So I tried to replicate it with even more complex structure. Which was like that: StackNavigatorA -> DrawerNavigator-> TabNavigator -> (one of the tabs has Stack NavigatorB) -> StackNavigatorB and then from StackNavigatorB I called a screen from StackNavigatorA. I tried with ref and without the ref prop and didnt see any thing special.

[MikePendo]

Let me try some other options, (I will create a sample project to replicate your exact issue )

[chriswickham]

@MikePendo I replicated the issue using your demo project as well, just navigating from a Bottom Tab Navigator to a Stack Navigator, and I'm not experiencing the issue with the versions of RN and React Navigation used there.

[chriswickham]

@MikePendo the issue is in our codebase - we have a faulty wrapper component around the main navigator. Apologies for the inconvenience!