bottom tabs not on all screens despite being nested - react-native

Question

export default function Navigation({ colorScheme }: { colorScheme:
ColorSchemeName }) {
return (
<NavigationContainer
linking= {LinkingConfiguration}
theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<RootNavigator />
</NavigationContainer> ); }
function RootNavigator() {
return (
<Stack.Navigator screenOptions={{
headerShown: false}}
>
<Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false
}} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }}
/>
<Stack.Group screenOptions={{ presentation: 'fullScreenModal' }}>
<Stack.Screen name="Modal" component={ModalScreen} />
<Stack.Screen name="Paywall1" component={Paywall1Screen} />
<Stack.Screen name="Paywall" component={PaywallScreen} />
<Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
</Stack.Group>
</Stack.Navigator>
);
}
const BottomTab = createBottomTabNavigator<RootTabParamList>();
function BottomTabNavigator() {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName="HomeScreen"
screenOptions={{
headerShown: false,
tabBarActiveTintColor: Colors[colorScheme].tint,
}}>
<BottomTab.Screen
name="HomeScreen"
component={HomeScreen}
options={{
tabBarLabel: 'Today',
tabBarIcon: ({ color }) => <TabBarIcon name="home" color=
{color} />,
}}
/>
<BottomTab.Screen
name="Episodes"
component={EpisodesScreen}
options={{
title: 'Episodes',
tabBarIcon: ({ color }) => <TabBarFeatherIcon
name="headphones" color={color} />,
}}
/>
<BottomTab.Screen
name="TabThree"
component={TabThreeScreen}
options={{
title: 'Guides',
tabBarIcon: ({ color }) => <TabBarFeatherIcon name="bookmark" color={color} />,
}}
/>
<BottomTab.Screen
name="CommunityScreen"
component={CommunityScreen}
options={{
title: 'Community',
tabBarIcon: ({ color }) => <TabBarIcon name="users" color=
{color} />,
}}
/>
<BottomTab.Screen
name="ProfileScreen"
component={ProfileScreen}
options={{
title: 'Profile',
tabBarIcon: ({ color }) => <TabBarIcon name="user" color=
{color} />,
}}
/>
</BottomTab.Navigator>
);
}
Using EXPO version 43.0.1 with react-navigation/core 6.1.0 react-navigation/bottom-tabs 6.0.9
I need the bottomTabNavigator to show on all screens and not just the 5 i have listed in my bottomTabNavigator. nothing on here seems to help with this just the opposite of keeping them off the screens the user doesnt want them on.
For example if i'm on my Paywall screen i do not see my bottomTabs (this route is not included in the bottomTabNavigator)

Answer 1

At the current moment in your question you do not mention what version or the entire file for the component RootNavigator. At glance, if you're using React Navigation 6 it needs a NavigationContainer and I don't see that in your question, example with NavigationContainer:
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
const Stack = createNativeStackNavigator()
const RootNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name='Root' component={BottomTabNavigator} options={{ headerShown: false }} />
<Stack.Screen name='NotFound' component={NotFoundScreen} options={{ title: 'Oops!' }} />
<Stack.Group screenOptions={{ presentation: 'fullScreenModal' }}>
<Stack.Screen name='Modal' component={ModalScreen} />
<Stack.Screen name='Paywall1' component={Paywall1Screen} />
<Stack.Screen name='Paywall' component={PaywallScreen} />
<Stack.Screen name='WelcomeScreen' component={WelcomeScreen} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
)
}
export default RootNavigator