skip to Main Content

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>
    
  )
}


2

Answers


  1. Chosen as BEST ANSWER

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


  2. 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;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search