Unable to navigate betwen stacks even with navigation.navigate('name") - react-native

Question

I'm unable to move between the nested stacks.
I've traced a route from the RootStackScreen back to all the different screens I want to display.
No issues at all with push, pop or back around screens in the same stack but I'm unable to move between them when one is initially displayed.
Does useStates block me from navigation between stacks or is there something else which I'm missing?!
Thanks in advance.
import React, {useState, useEffect} from 'react';
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Feather'
import firebase from 'firebase'
// Screens
// Modal
import Modal from '../screens/modal';
// Onboarding
import OnboardingOne from '../screens/onboardingOne'
import OnboardingTwo from '../screens/onboardingTwo'
import OnboardingThree from '../screens/onboardingThree'
import OnboardingFour from '../screens/onboardingFour'
import SignIn from '../screens/signIn'
import CreateUser from '../screens/createUser'
import OnboardingUser from '../screens/onboardingUser'
// Loading
import Loading from '../screens/loading'
// Tabs
import HomeScreen from '../screens/home'
import AboutScreen from '../screens/about'
import OrganisationScreen from '../screens/organisation'
// Profile
import ProfileScreen from '../screens/profile'
import SignOutScreen from '../screens/signOut'
const OnboardingStack = createStackNavigator();
const OnboardingStackScreen = () => (
<OnboardingStack.Navigator
headerMode='screen'
screenOptions={{animationEnabled: true}}
initialRouteName="OnboardingUser" >
<OnboardingStack.Screen
name="OnboardingOne"
component={OnboardingOne}
options={{
headerTitle: 'Onboarding One',
}}
/>
<OnboardingStack.Screen
name="OnboardingTwo"
component={OnboardingTwo}
options={{
headerTitle: 'OnboardingTwo'
}}
/>
<OnboardingStack.Screen
name="OnboardingThree"
component={OnboardingThree}
options={{
headerTitle: 'OnboardingThree'
}}
/>
<OnboardingStack.Screen
name="OnboardingFour"
component={OnboardingFour}
options={{
headerTitle: 'Onboarding Four'
}}
/>
<OnboardingStack.Screen
name="SignIn"
component={SignIn}
options={{
headerTitle: 'Sign in'
}}
/>
<OnboardingStack.Screen
name="CreateUser"
component={CreateUser}
options={{
headerTitle: 'Create User'
}}
/>
<OnboardingStack.Screen
name="OnboardingUser"
component={OnboardingUser}
options={{
headerTitle: 'Onboarding User',
}}
/>
</OnboardingStack.Navigator>
);
const ProfileStack = createStackNavigator();
const ProfileStackStackScreen = () => (
<ProfileStack.Navigator headerMode='screen' screenOptions={{animationEnabled: true}} >
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerTitle: 'Profile Screen',
}}
/>
<ProfileStack.Screen
name="SignOut"
component={SignOutScreen}
options={{
headerTitle: 'Sign Out',
}}
/>
</ProfileStack.Navigator>
);
const AppTabs = createBottomTabNavigator()
const AppTabsScreen = () => (
<AppTabs.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'orange',
inactiveTintColor: 'gray',
}}>
<AppTabs.Screen name="Home" component={HomeScreen} options={{
tabBarLabel: "Hem",
tabBarIcon: props => <Icon name="home"
size={props.size}
color={props.color}/>
}}/>
<AppTabs.Screen name="About" component={AboutScreen} options={{
tabBarLabel: "Om",
tabBarIcon: props => (
<Icon name="feather"
size={props.size}
color={props.color}/>)
}}/>
<AppTabs.Screen name="Organisation" component={OrganisationScreen} options={{
tabBarLabel: "Organisationer",
tabBarIcon: props => <Icon name="list"
size={props.size}
color={props.color}/>
}}/>
<AppTabs.Screen name="Profile" component={ProfileStackStackScreen} options={{
tabBarLabel: "Profile",
tabBarIcon: props => <Icon name="user"
size={props.size}
color={props.color}/>
}}/>
</AppTabs.Navigator >
);
const RootStack = createStackNavigator();
const RootStackScreen = () => {
const [isLoading, setIsLoading] = useState(true)
const [isLoggedIn, setLoggedIn] = useState(false)
// Do we have a user?
var user = firebase.auth().currentUser;
// Set wait time for loading screen
useEffect(() => {
setIsLoading(!isLoading)
}, [])
return (
<RootStack.Navigator
headerMode="none"
screenOptions={{ animationEnabled: false }}
mode="modal">
{isLoading ? (
<RootStack.Screen name="Loading" component={Loading} />
) : !isLoggedIn ? (
<RootStack.Screen name="AppDrawerScreen" component={OnboardingStackScreen} />
) : (
<RootStack.Screen name="TabHomeScreen" component={AppTabsScreen} />
)}
<RootStack.Screen
name="Modal"
component={ Modal }
options={{ animationEnabled: true }}
/>
<RootStack.Screen
name="Alert"
component={ Modal }
options={{
animationEnabled: true,
cardStyle: { backgroundColor: 'rgba(0,0,0,0.15)'},
cardOverlayEnabled: true,
cardStyleInterpolator: ({current: { progress }}) => {
return{
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
})
},
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
extrapolate: 'clamp',
})
}
}
}
}}
/>
</RootStack.Navigator>
);
};
export default () => {
return (
<NavigationContainer>
<RootStackScreen/>
</NavigationContainer>
)
}

Answer 1

Apparently useState (isLoading & isLoggedIn) prevents me from navigating between these components. Simply fixed my problem by adding:
<RootStack.Screen name="BottomTabNavigation" component={AppTabsScreen}/>
Placed under the the hooks that determine the initial screen of the app and now everything works as intended and navigation.navigate("BottomTabNavigation") now displays the bottomTabNavigator.