Home > Back-end >  TypeError: undefined is not a function (near '...(0, _reactNavigationTabs.createBottomTapNaviga
TypeError: undefined is not a function (near '...(0, _reactNavigationTabs.createBottomTapNaviga

Time:02-22

Hi I have this error popping up all the time:

TypeError: undefined is not a function (near '...(0, _reactNavigationTabs.createBottomTapNavigator)...') at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule at http://10.0.5.48:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:165799:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called. at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

my App.js looks like this:


import React from "react";
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTapNavigator } from 'react-navigation-tabs';
import AccountScreen from "./src/screens/AccountScreen";
import SignInScreen from "./src/screens/SignInScreen";
import SignUpScreen from "./src/screens/SignUpScreen";
import TrackCreateScreen from "./src/screens/TrackCreateScreen";
import TrackDetailScreen from "./src/screens/TrackDetailScreen.js";
import TrackListScreen from "./src/screens/TrackListScreen";

const switchNavigator = createSwitchNavigator(
  {
    loginFLow: createStackNavigator({
      SignUp: SignUpScreen,
      SignIn: SignInScreen
    }),
    mainFlow: createBottomTapNavigator({
      trackListFlow: createStackNavigator({
        TrackList: TrackListScreen,
        TrackDetail: TrackDetailScreen
      }),
      TrackCreate: TrackCreateScreen,
      Account: AccountScreen
    })
  }
)

export default createAppContainer(switchNavigator)

This is my package.json:

{
  "name": "tracks",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I am using expo. Is this due to outdated syntax or does anyone know what the problem could be?

I installed all the dependencies and looked into the docs but haven't found anything

CodePudding user response:

This is a typo error. Should be:

createBottomTabNavigator 

and not:

createBottomTapNavigator

CodePudding user response:

I don't see anything wrong in your code.

There are a number of different caches associated with your project that can prevent your project from running as intended. Clearing a cache sometimes can help you work around issues related to stale or corrupt data and is often useful when troubleshooting and debugging.

Use this to clear your project cache:

expo r -c

you can read more about here:

https://forums.expo.dev/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste/1352

  • Related