BottomTabNavigation: Element type is invalid: expected a string or a class/function but got: object

Question

I am trying to test my application and I cannot get the navigation to work. When I test my navigation to go to bottomtabnavigator I have the error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Is it just a syntax error? Thank you for any help.

App.js

import React, { useState, useEffect } from 'react';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Authentication from './Screens/Authentication';
import Login from './Screens/Login';
import Register from './Screens/Register';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/StackNavigator';

export default function App() {

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  if (loading) {
    return <Splash />;
  }

  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {user.loggedIn ? (
          <AuthenticationStack.Navigator>
            <AuthenticationStack.Screen name="Authentication" component={Authentication} />
            <AuthenticationStack.Screen name="Login" component={Login} />
            <AuthenticationStack.Screen name="Register" component={Register} />
          </AuthenticationStack.Navigator>
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

StackNavigator:

import React from 'react';
import { createStackNavigator} from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Authentication from '../Screens/Authentication';
import Activities from '../Screens/Activities';
import Login from '../Screens/Login';
import Register from '../Screens/Register';
import Tools from '../Screens/Tools';
import Dashboard from '../Screens/Dashboard';
import Orders from '../Screens/Orders';
import About from '../Screens/About';
import Terms from '../Screens/Terms';
import Completed from '../Screens/Orders/Completed';
import Current from '../Screens/Orders/Current';
import Settings from '../Screens/Settings';
import Contact from '../Screens/Contact';
import Scan from '../Screens/Tools/Scan';
import Products from '../Screens/Tools/Products';
import Tickets from '../Screens/Tools/Tickets';
import Welcome from '../Screens/Welcome';
import i18n from '../src/i18n';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#F78400",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
  backgroundColor:'#f7f6f6'
};


const MainStackNavigator = () => {
  return (
   <Stack.Navigator screenOptions={screenOptionStyle}>       
      <Stack.Screen name = 'Orders' component = {Orders} options={{ title: i18n.t("orders.title") }}/> 
      <Stack.Screen name = 'Authentication' component = {Authentication} options={{ title: i18n.t("authentication.title") }}/> 
      <Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/> 
      <Stack.Screen name = 'Contact' component = {Contact} options={{ title: i18n.t("contact.title") }}/> 
      <Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title") }}/>
      <Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title") }}/>
      <Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
      <Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>      
      <Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
      <Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
      <Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>
      <Stack.Screen name = 'Terms' component = {Terms} options={{ title: i18n.t("terms.title") }}/> 
      <Stack.Screen name = 'About' component = {About} options={{ title: i18n.t("about.title") }}/>      
      <Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
      <Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
      <Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
      <Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
    </Stack.Navigator>
  );
}

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator tabBarOptions={{activeTintColor: 'black',
                   labelStyle: {fontSize: 12, color: 'white'}, 
                   style: {backgroundColor: '#F78400'},
                     }}>      
      <Tab.Screen
          name={i18n.t("orders.title")}
          component={MainStackNavigator}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../assets/images/orders.png")}
                    style={styles.icon}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("dashboard.title")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("tools.title")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("settings.title")}
          component={SettingsStackNavigator}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
    </Tab.Navigator>
  );
};


export default { MainStackNavigator, BottomTabNavigator };

score 5 · Answer 1 · answered Aug 13 '21 at 12:46

5

this error comes because i was using @react-navigation/native and @react-navigation/bottom-tabs of different version

answered Aug 13 '21 at 12:46

Raghuvansh mani mishra

59
1
3

Guruparan Giritharan · Accepted Answer · 2020-11-18T10:14:39.260

2

You are exporting a single object, you can do like beloe

export const BottomTabNavigator = () => {

to

import {BottomTabNavigator} from './Navigation/StackNavigator';

Use the same way to export the MainStackNavigator as well

edited Nov 18 '20 at 10:14

answered Nov 18 '20 at 10:08

Guruparan Giritharan

15,660
4
27
50

it gives me Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `App`. – Kimako Nov 18 '20 at 10:12
2

I want to thank you from the bottom of my heart, I've been struggling for several days, and you have helped me several times with patience and explanations ... I'm embarrassed because I made a lot of mistakes but you were Super nice. Sincere thanks. – Kimako Nov 18 '20 at 10:23
1

You are welcome , dont be embarrassed to learn something :) – Guruparan Giritharan Nov 18 '20 at 10:25
Hi, can you share what fixed it for you? I am getting undefined too. – Thor0o0 Jun 24 '22 at 13:11
Can you share you code? – Guruparan Giritharan Jun 25 '22 at 05:25

score 1 · Answer 3 · answered Sep 25 '21 at 22:51

To build off of Raghuvansh's answer, if you run

npm list

You should see all of your current npm packages for the local project.

In my case, my @react-navigation/native package was version 5.8.10, and my @react-navigation/bottom-tabs package was 6.0.5.

I was able to easily fix this by running npm update, which put them both onto the same package version.

BottomTabNavigation: Element type is invalid: expected a string or a class/function but got: object

3 Answers3