How can I redirect from StackNavigator screen to BottomTabNavigator screen

Question

I'm working on an app in React-Native. How I'm trying to achieve this is by using a SignUpCompleted Flag and checking if its true/false to decide if the page should navigate to the next signup screen or just to the homepage. I have 3 screens as part of the sign-up process that I only want to be shown the 1st time the app opens. I have the 3 screens in a StackNavigator and I'm trying to navigate from the last StackNavigator screen to a BottomTabNavigator screen. Sadly I get the following error:

The action 'NAVIGATE' with payload {"name":"HomeStack"} was not handled by any navigator.

My current setup is as follows:
SignUpStack

const SignUpStack = createStackNavigator();

export default function SignUpStackScreen() {
    const [signUpCompleted, setSignUpCompleted] = useState(false);
  
    return (
    <SignUpStack.Navigator initialRouteName="Welcome" screenOptions={{ headerShown: false }}>
      <SignUpStack.Screen name="Welcome" component={WelcomeScreen} initialParams={{signUpCompleted}} />
      <SignUpStack.Screen name="Department" component={ChooseDepartment} initialParams={{signUpCompleted}} />
      <SignUpStack.Screen name="InputName" component={InputName} initialParams={{signUpCompleted, setSignUpCompleted}}/>
    </SignUpStack.Navigator>
  );
}

From the InputName component I try to redirect to a BottomTabNavigator Screen called homename

The redirect code is as follows: - in InputName component

<TouchableOpacity
    style={[styles.shadow]}
    onPress={() => {navigation.navigate("HomeName"); setSignUpCompleted(true)}}
>

The BottomTabNavigator is as follows: - I'm trying to redirect to HomeStack component

 -const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator initialRouteName={homeName} >
      <Tab.Screen name={ResultsName} component={ResultatenStack} />
      <Tab.Screen name={homeName} component={HomeStack} />
      <Tab.Screen name={settingsName} component={SignUpStack} />
    </Tab.Navigator>
  );
}

When using the same navigation method to direct to screens that are in the stack that I already am, it works fine. I hope someone can give me any pointers or help out! If you need any more info feel free to reach out!

PS: I'm very new to react-native so my apologies if I'm missing information.

Answer 1

I geas you are trying to navigate from stack navigator to tab navigator which is not ideal in react native you have to use nesting navigator

what I mean you have to use the tab navigator as a screen inside the stack navigator

this is React Navigation doc for nesting navigator https://reactnavigation.org/docs/nesting-navigators/