React Native Tab Navigation Not Showing

Question

import { View, Text } from 'react-native'
import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Octicons } from '@expo/vector-icons';
import Dashboard from '../app/Dashboard'
import Timetable from '../app/Timetable'

const Tab = createBottomTabNavigator();

const dashboard = 'Home';
const timetable = 'Timetable';

export default function TabNavigation() {
  return (
    <NavigationContainer>
        <Tab.Navigator
        initialRouteName={dashboard}
        screenOptions={(
            {route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if (rn === dashboard) {
                    iconName = focused ? 'home' : 'home-outline'
                } else if (rn === timetable) {
                    iconName = focused ? 'home' : 'home-outline'
                }

                return <Octicons name={iconName} size={size} color={color}/>
            },
        })}>

        <Tab.Screen name={dashboard} component={Dashboard}/>
        <Tab.Screen name={timetable} component={Timetable}/>

        </Tab.Navigator>
    </NavigationContainer>
  );
}

Expecting two tabs to appear across the bottom of the IOS XCode simulator, one for Dashboard and one for Timetable, but nothing is showing. Unsure where l have gone wrong here. Any help or explanation would be much appreciated.

Am not getting any errors so unsure why its not showing. I am using Expo CLI.

Answer 1

Your code is correct ! Here is a minimal demo of it working on Snack.

This means the issue must come from the project setup. Here are some troubleshooting steps for your Expo project:

1. Is there a App.jsx/tsx file at the root of your project ? It is now used by default as the entry point of Expo apps. In the past, you would have to run

import { registerRootComponent } from "expo";
import App from "./App";

registerRootComponent(App);

but now you can just put an the App.jsx/tsx at the root of your project. Do ensure that it is there if you use a recent Expo version, or use registerRootComponent instead.

2. Ensure peer dependencies are installed, without other packages overwriting dependencies versions. Dependencies can affect each other and cause version issues (though Yarn should fix that). Also, @react-navigation/bottom-tabs & @react-navigation/native require the react-native-safe-area-context and react-native-screens dependencies, ensure those are installed too (or at least set as peer dependencies).

3. Use Yarn instead of other node package managers, as I have personally seen dependencies issues using NPM or PNPM with Expo in the past.

4. Ensure all dependencies are up to date & compatible with your Expo version by running expo doctor. It will automatically fix dependency issues.

If none of those help, I would recommend starting a new project from scratch using the Expo with-tab-navigation example which has roughly the same code as the one you tried.

You can try it by using npx create-react-native-app --template with-tab-navigation. This will allow you to have a project running the latest Expo version, and have a good start for a codebase.

If you still run into an issue, please post a comment !

Good luck with your project Ronan, I hope this answer helped.