Reputation: 99
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>
);
}
Upvotes: 1
Views: 4985
Reputation: 536
I had a similar problem, but it had nothing to do with the navigation tab after all. My firebase upload was failing, but because react native has a hard time with async hooks it was sucking up the error instead of displaying it. On web you can run an async function in a hook, but apparently not with react native. Once I turned the async function back into a .then function I was able to see the error.
Upvotes: 0
Reputation: 625
I am using monorepo generated from nx
. My fix was to just switch to this specific version:
"@react-navigation/bottom-tabs": "^6.5.9"
Upvotes: 1
Reputation: 81
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.
Upvotes: 6
Reputation: 3659
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>
);
}
Upvotes: 0