React Native multiple "Root" Views? - react-native

Question

Building my first React Native Application.
Currently I am using this way of navigating through different views.
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name={"Start"} component={Welcome}/>
<Stack.Screen name={"LoginMethod"} component={LoginMethod}/>
<Stack.Screen name={"SocialSecurityNumber"} component={SocialSecurityNumber}/>
<Stack.Screen name={"NorBankId"} component={NorBankId}/>
<Stack.Screen name={"NorBankIdMobile"} component={NorBankIdMobile}/>
<Stack.Screen name={"NorBankIdMobileUsername"} component={NorBankIdMobileUsername}/>
<Stack.Screen name={"NorBankIdMobilePassword"} component={NorBankIdMobilePassword}/>
<Stack.Screen name={"Fingerprint"} component={Fingerprint}/>
<Stack.Screen name={"MainView"} component={MainView}/>
</Stack.Navigator>
</NavigationContainer>
This setup, is for the onboarding process from a new customer.
So the first component is Welcome and then the user moves along, with the option to go backwards.
However, when they are done with the process (the last screen), I want them to arrive to a "Screen" that is not ontop of the Stack, but it's own "Root" or "Base" View.
What I have looked into
I have tried having multiple stack navigators which is a no no. Also checked the Tab navigator, however this creates a tab menu below me screen, which I do not want.
Is it possible to do what I want, or do I need to restructure the way I have my setup now?
Thank you for your time, Stay Safe!

Answer 1

Why you don't want to use multiple Stack-Navigators?
My approach would be:
<NavigationContainer>
{ inWelcomeProcess && <WelcomeNavigator/>}
<AuthNavigator/>
</NavigationContainer>
const AuthStackNavigator = createStackNavigator();
export const AuthNavigator = () => {
return (
<AuthStackNavigator.Navigator screenOptions={defaultNavOptions}>
<AuthStackNavigator.Screen name="Auth" component={AuthScreen} options={authScreenOptions}/>
// Your other screens (after finishing the on-boarding) should go here
</AuthStackNavigator.Navigator>
);
};
const WelcomeStackNavigator= createStackNavigator();
export const WelcomeNavigator= () => {
return (
<WelcomeStackNavigator.Navigator screenOptions={defaultNavOptions}>
// Your On-Boarding process screens here
</WelcomeStackNavigator.Navigator>
);
};