How to navigate to a screen in another navigator in react-navigation 6

Issue

I have a application structure that has three levels of nested navigators (you can check the code I provided below). I can't reach the "Home" from the last level of navigation "AccountDetails". When I click on the button I get nothing, no log, no navigation, nothing. It really feels like a bug in the library but I can't rule out that I could have missed something. What is going on?

Here is the code:

type RootStackParamList = {
  SignIn: undefined;
  SignUp: undefined;
  Home: undefined;
};

type HomeTabParamList = {
  BudgetTab: undefined;
  AccountsTab: undefined;
  SettingsTab: undefined;
};

type AccountStackParamList = {
  Accounts: undefined;
  AccountDetails: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<HomeTabParamList>();
const AccountStack = createNativeStackNavigator<AccountStackParamList>();

const AccountDetails = ({ navigation }: any) => {
  return (
    <View>
      <Text>Account Details</Text>
      <Button
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        Go home
      </Button>
    </View>
  );
};

const Accounts = ({ navigation }: any) => {
  return (
    <View>
      <Text>Accounts</Text>
      <Button
        onPress={() => {
          navigation.navigate("AccountDetails");
        }}
      >
        View details
      </Button>
    </View>
  );
};

const BudgetTab = ({ navigation }: any) => {
  return (
    <View>
      <Button
        onPress={() => {
          navigation.navigate("SettingsTab");
        }}
      >
        Sign Up
      </Button>
      <Text>Budget</Text>
    </View>
  );
};
const SettingsTab = () => {
  return (
    <View>
      <Text>Settings</Text>
    </View>
  );
};
const AccountsTab = () => {
  return (
    <AccountStack.Navigator>
      <AccountStack.Screen name="Accounts" component={Accounts} />
      <AccountStack.Screen name="AccountDetails" component={AccountDetails} />
    </AccountStack.Navigator>
  );
};

const SignIn = () => {
  return (
    <View>
      <Text>Sign In</Text>
    </View>
  );
};
const SignUp = () => {
  return (
    <View>
      <Text>Sign Up</Text>
    </View>
  );
};
const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="BudgetTab" component={BudgetTab} />
      <Tab.Screen name="AccountsTab" component={AccountsTab} />
      <Tab.Screen name="SettingsTab" component={SettingsTab} />
    </Tab.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="SignIn" component={SignIn} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Solution

Use popToTop to go to the current tab.

navigation.popToTop()

Define a tab (screen) in navigate to go to any other tab.

navigation.navigate('Home', { screen: 'BudgetTab' });

Answered By - user18309290