I am trying to create a navigator with two screens. One of them has another navigator. I got this 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 inports. Check the render methon of 'Navigation'.

My code:

import * as React from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';
import { createStackNavigator } from '@react-navigation/stack';

// Locations
const mesta = [
  {
    name: 'Praha', 
    coordinates: {
      latitude: 50.072829,
      longitude: 14.433817 
  }},
  , 
  {
    name: 'České Budějovice',
    coordinates: {
      latitude: 48.975250,
      longitude: 14.479161
}},
]

//Screen names
export const screenNames = {
  mapa: "Mapa", //home
  lokace: "Lokace",  //details
  mapaDet: "Map_map",  //innerDetails
  mapaStack: "MapaStackScreen", //homeStack
  lokaceStack: "LokaceStackScreen",  //detailsStack
};


const MapaStack = createStackNavigator();

function MapaStackScreen() {
  return (
      <MapaStack.Navigator
        initialRouteName={screenNames.mapa}
        >
        <MapaStack.Screen name={screenNames.mapa} children={() => <Secondary towns={mesta}/>}/>
      </MapaStack.Navigator>
  );
}

const LokaceStack = createStackNavigator();

function LokaceStackScreen({ navigation, route }){
  const tabHiddenRoutes = ["Map_map"];
  useEffect(() => {
    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarVisible: false });
    } else {
      navigation.setOptions({ tabBarVisible: true });
    }

  }, [navigation, route]);
  return(
      <LokaceStack.Navigator initialRouteName={screenNames.lokace}>
        <LokaceStack.Screen name={screenNames.lokace} children={() => <Primary towns={mesta}/>}/>
        <LokaceStack.Screen name={screenNames.mapaDet} component={Map_map}/>
      </LokaceStack.Navigator>
  )
}


const Tab = createBottomTabNavigator

export default function Navigation()
{
  return(
    <Tab.Navigator
    initialRouteName={screenNames.mapaStack}
    tabBarOptions={{
      activeTintColor: '#007aff',
      inactiveTintColor: 'grey',
      labelStyle: { paddingBottom: 10, fontSize: 10 },
      style: { padding: 10, height: 70}
    }}
    >
      <Tab.Screen
        name={screenNames.mapaStack}
        component={MapaStackScreen}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name={focused ? 'map' : 'map-outline'}
              size="24"
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name={screenNames.LokaceStackScreen}
        component={LokaceStackScreen}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color, focused }) => (
            <Icon
              name={focused ? 'home' : 'home-outline'}
              size="24"
              color={color}
            />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

CodePudding user response：

I've found my answer:

const Tab = createBottomTabNavigator

should have been:

const Tab = createBottomTabNavigator();

CodePudding user response：

Check the below screen files whether it's exported as default or not

import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';

If not, then try export as default or import here as {'exported name'}