Can't get react navigation bottom tabs to display on my app-no errors-CodePudding

I'm very new to react native.. very much still learning. I read the docs for react navigation but I can't get my bottom tab navigator to display. I run the project and it loads up just fine without any errors or warnings but my bottom tab navigation won't display. I'm not really sure where to start.. Below is a copy of what I wrote so far. This is written in a separate .js named tabnavigator.js

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import  Dashboard  from './src/screens/Dashboard';
import Agencyhome from './src/screens/Agencyhome';

const Tab = createBottomTabNavigator ();

const TabNavigator = () => {
    return (
<Tab.Navigator>
  <Tab.Screen name='Home' component={Dashboard} />
  <Tab.Screen name="Agency" component={Agencyhome} /> 
</Tab.Navigator>
    );
}


export default TabNavigator;

Here is what I have for my App.js

import React from 'react'
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import firebase from 'firebase/app'
import 'firebase/auth'
import { theme } from './src/core/theme'
import {
  AuthLoadingScreen,
  StartScreen,
  LoginScreen,
  RegisterScreen,
  ResetPasswordScreen,
  Dashboard,
} from './src/screens'
import { FIREBASE_CONFIG } from './src/core/config'



const Stack = createStackNavigator()





if (!firebase.apps.length) {
  firebase.initializeApp(FIREBASE_CONFIG)
}







export default function App() {
  return ( 
    <Provider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="AuthLoadingScreen"
          screenOptions={{
            headerShown: false,
          }}
        >
          <Stack.Screen
            name="AuthLoadingScreen"
            component={AuthLoadingScreen} />
          
          
          <Stack.Screen name="StartScreen" component={StartScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
          <Stack.Screen name="Dashboard" component={Dashboard} />
          <Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen} />
        </Stack.Navigator>
       </NavigationContainer>
    </Provider>
    
  )
}

CodePudding user response：

you must use Navigation Container
like this

import { NavigationContainer } from "@react-navigation/native";  
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';  
import  Dashboard  from './src/screens/Dashboard';  
import Agencyhome from './src/screens/Agencyhome';  

const Tab = createBottomTabNavigator ();  

const TabNavigator = () => {  
    return (  
<NavigationContainer>  
<Tab.Navigator>  
  <Tab.Screen name='Home' component={Dashboard} />  
  <Tab.Screen name="Agency" component={Agencyhome} />   
</Tab.Navigator>  
</NavigationContainer>  
    );  
}  
  
export default TabNavigator;

CodePudding user response：

I was able to fix this by using the following component={TabNavigator} within stackscreen