Nested Navigators navigate with params not working

[drinikol]

I am learning React-navigation 5xx, I have tried some solutions but it doesn't work so I am asking if someone can help me. I want to navigate from Explore bottom tab to Profile bottom tab but I want to navigate two levels deeper.

I have tried using navigate with params.

navigation.navigate("Profile", { screen: "Edit", params: { screen: "EditMore" } }
But it doesn't work. I can successfully navigate once but not deeper in the stack. Maybe someone can help me. Or I am wrong in setting up my navigation. I have tried some of the solutions here like push but it doesnt seem to work. Maybe somebody could enlighten me or teach the correct way. Thank you!

    <ProfileMenu.Navigator>
<ProfileMenu.Screen name={"Main"} component={"Main"} />
<ProfileMenu.Screen  name={"Edit"} component={"Edit"} />
<ProfileMenu.Screen  name={"EditMore"} component={"EditMore"}} />
      }
      )}
    </ProfileMenu.Navigator>

<Bottom.Navigator
     <Bottom.Screen key={generateUUID()} name={"Explore"} component={ExploreNav}/>
     <Bottom.Screen key={generateUUID()} name={"Profile"} component={ProfileNav}/>
</Bottom.Navigator>

<NavigationContainer>
        <Stack.Navigator }>
            <Stack.Screen name={"Splash"} component={SplashScreen} options={{ headerShown: false }} />
            <Stack.Screen name={"Dashboard"} component={BottomNavigatorStack} options={{ headerShown: false }} />
        </Stack.Navigator>
 </NavigationContainer>

    "@react-navigation/bottom-tabs": "^5.10.1",
    "@react-navigation/drawer": "^5.10.1",
    "@react-navigation/material-top-tabs": "^5.3.14",
    "@react-navigation/native": "^5.8.1",
    "@react-navigation/stack": "^5.11.0",

[raajnadar]

use this to navigate navigation.navigate("Profile", { screen: "EditMore" } } you will navigate from Profile tab to EditMore Screen.

[drinikol]

Hi! Yes that will work. But what I want to achieve is. I can still go back . So it would be like this Edit > Edit More. That code will work but I want deeper screen levels. Because that will only navigate me one level. I can use initial: false to show the back. But I want to go deeper in the stack.

[raajnadar]

Can you create a snack I will try to help you.

[drinikol]

Can you create a snack I will try to help you.

Thank you! @raajnadar I am not familiar with Snack but maybe this could visually help. I want to go to screen F. But it must retain the back function. So I could still go back to each screen it passes through. I know I can use this navigation.navigate("Profile", { screen: "screen F" } } but it will not stack up the screens C > D> E, when I press back.

-Parent Navigator
--Nested Navigator 1
---screen A
---screen B
--Nested Navigator 2
---screen C
---screen D
---screen E
---screen F

[raajnadar]

navigation.navigate("Profile", {
   screen: "screen C",
   params: {
     screen: 'screen D',
      params: {
         screen: 'screen E',
            params: {
              screen: 'screen F',
           },
      },
   }
})

I think you are talking about this. If no you need to nest the navigation accordingly.

https://reactnavigation.org/docs/nesting-navigators/#passing-params-to-a-screen-in-a-nested-navigator

[drinikol]

I have tried this and it is not working. I have tried navigation.push() as well and still it doesnt work.