Question 34627 in React native Question posted in
The official React Native documentation can be found here.

Undefined Is Not A Function (React Navigation Bottom Tab Navigator) – React native

I am building bottom tabs navigator from react navigation v6 in react native mobile app but encountered an error.

 ERROR  TypeError: undefined is not a function

This error is located at:
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by tabNavigation)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by tabNavigation)
    in tabNavigation (created by App)
    in RCTView (created by View)
    in View (created by App)
    in authState (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in KFC(RootComponent), js engine: hermes

The Code Of Tab Navigator That I have written for tabs. I am using physical device for test:

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from '../views/Home';
import Auth from '../views/Auth';
import Bucket from '../views/Bucket';
import Menu from '../views/Menu';
import {NavigationContainer} from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default function tabNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="home">
        <Tab.Screen name="home" component={Home} />
        <Tab.Screen name="auth" component={Auth} />
        <Tab.Screen name="bucket" component={Bucket} />
        <Tab.Screen name="menu" component={Menu} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
Tags:

2

Answers


  1. 0

    Try to replace your screen one by one and you will find your trouble maker

    import React from 'react';
import { View, Text } from 'react-native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
//import Home from '../views/Home';
//import Auth from '../views/Auth';
//import Bucket from '../views/Bucket';
//import Menu from '../views/Menu';
import {NavigationContainer} from '@react-navigation/native';

const Tab = createBottomTabNavigator();

function Dummy() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Dummy</Text>
    </View>
  );
}


export default function tabNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="home">
        <Tab.Screen name="home" component={Dummy} />
        <Tab.Screen name="auth" component={Dummy} />
        <Tab.Screen name="bucket" component={Dummy} />
        <Tab.Screen name="menu" component={Dummy} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
    Login or Signup to reply.
  2. 0

    Ran into the same error. Turns out, bottom tabs navigator also needs react-native-screens.

    yarn add react-native-screens | npm install react-native-screens should do the trick. You may have to re-build or clear your cache as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search