nested navigation question - how to export BottomTabNavigator - react-native

Question

I am stuck with a problem with my bottomTabNavigator that should load the main pages for the app (main, kowops, wallet, scan) which is nested in a stack navigator that handles the login / registration screens (login, register, forget password).
This is my main.js
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';
export default class Main extends Component {
render() {
return (
<View style={styles.container}>
<View style={{alignItems: 'center'}}>
<Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
This is the main page, return to registration
</Text>
<View style={{height:5}}></View>
</View>
</View>
)
}
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main} />
<Tab.Screen name="Scan" component={Scan} />
<Tab.Screen name="Wallet" component={Wallet} />
<Tab.Screen name="Kowops" component={Kowops} />
</Tab.Navigator>
</NavigationContainer>
);
}
export function BottomNav() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 2,
backgroundColor:'#ffffff',
padding: 10,
alignItems: 'stretch',
justifyContent: 'space-around'
},
logoContainer: {
height: 120,
padding: 10,
alignItems: 'center' ,
justifyContent: 'flex-end'
},
logo: {
height: 50,
width: 165
},
formContainer: {
flex:1,
alignItems: 'center' ,
justifyContent: 'center'
},
buttonContainer: {
padding: 10,
marginBottom: 20,
width: 250,
alignItems: 'center',
backgroundColor: '#c5e1a5'
},
inputTextField: {
alignItems: 'center',
justifyContent: 'space-between',
padding: 10,
height: 40,
width: 250,
marginBottom: 10,
fontSize: 16,
borderBottomWidth : 1.0,
},
plainText: {
fontSize: 16,
marginBottom: 5,
color: '#59616e',
textDecorationLine: 'underline',
},
});
And this is my app.js with the login stack navigator
/**
* Load navigation
* Check login state
* Navigate to register.js if no valid session is detected
* Navigate to home.je is a valid session is detected
*/
import 'react-native-gesture-handler';
import React from 'react';
import Register from './register';
import Login from './login';
import main from './main';
import ForgotPassword from './forgotPassword';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Register" screenOptions={{headerShown: false}}>
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="Main" component={main} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Now my bottomnavigation doesn't show on the main page. Ai already tried to replace the default in main.js like this
export class Main extends Component
&
export default function BottomNav()
But then I get
a nasty error:
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
This error is located at:
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:66)
in ThemeProvider (at NavigationContainer.tsx:65)
in ForwardRef(NavigationContainer) (at main.js:42)
in BottomNav (at SceneView.tsx:98)
in StaticContainer
in StaticContainer (at SceneView.tsx:89)
in EnsureSingleNavigator (at SceneView.tsx:88)
in SceneView (at useDescriptors.tsx:125)
in RCTView (at CardContainer.tsx:199)
in RCTView (at CardContainer.tsx:198)
in RCTView (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:526)
in RCTView (at createAnimatedComponent.js:144)
in AnimatedComponent (at createAnimatedComponent.js:194)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:508)
in PanGestureHandler (at GestureHandler.native.tsx:13)
in PanGestureHandler (at Card.tsx:502)
in RCTView (at createAnimatedComponent.js:144)
in AnimatedComponent (at createAnimatedComponent.js:194)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:498)
in RCTView (at Card.tsx:492)
in Card (at CardContainer.tsx:164)
in CardContainer (at CardStack.tsx:497)
in RCTView (at Screens.tsx:70)
in MaybeScreen (at CardStack.tsx:490)
in RCTView (at Screens.tsx:48)
in MaybeScreenContainer (at CardStack.tsx:388)
in CardStack (at StackView.tsx:433)
in KeyboardManager (at StackView.tsx:431)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at App.js:21)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:66)
in ThemeProvider (at NavigationContainer.tsx:65)
in ForwardRef(NavigationContainer) (at App.js:20)
in App (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)
BaseNavigationContainer
BaseNavigationContainer.tsx:114:12
renderWithHooks
ReactNativeRenderer-dev.js:10989:26
updateForwardRef
ReactNativeRenderer-dev.js:13060:34
invokeGuardedCallbackImpl
ReactNativeRenderer-dev.js:286:4
invokeGuardedCallback
ReactNativeRenderer-dev.js:497:2
beginWork$$1
ReactNativeRenderer-dev.js:22028:27
performUnitOfWork
ReactNativeRenderer-dev.js:20871:23
workLoopSync
ReactNativeRenderer-dev.js:20848:38
performSyncWorkOnRoot
ReactNativeRenderer-dev.js:20456:22
performSyncWorkOnRoot
[native code]:0
runWithPriority$argument_1
ReactNativeRenderer-dev.js:5703:31
unstable_runWithPriority
scheduler.development.js:818:23
flushSyncCallbackQueueImpl
ReactNativeRenderer-dev.js:5698:21
flushSyncCallbackQueue
ReactNativeRenderer-dev.js:5686:28
flushSync
ReactNativeRenderer-dev.js:20630:26
scheduleRefresh
ReactNativeRenderer-dev.js:6492:13
mountedRoots.forEach$argument_0
react-refresh-runtime.development.js:218:8
forEach
[native code]:0
performReactRefresh
react-refresh-runtime.development.js:210:4
Refresh.performReactRefresh
setUpReactRefresh.js:43:6
setTimeout$argument_0
require.js:627:10
_callTimer
JSTimers.js:135:14
callTimers
JSTimers.js:387:16
__callFunction
MessageQueue.js:425:19
__guard$argument_0
MessageQueue.js:112:6
__guard
MessageQueue.js:373:10
callFunctionReturnFlushedQueue
MessageQueue.js:111:4
callFunctionReturnFlushedQueue
[native code]:0
Does anyone have an idea on how to fix this?
Best,
Tim

Answer 1

change
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main} />
<Tab.Screen name="Scan" component={Scan} />
<Tab.Screen name="Wallet" component={Wallet} />
<Tab.Screen name="Kowops" component={Kowops} />
</Tab.Navigator>
</NavigationContainer>
);
}
export function BottomNav() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
to
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Main" component={Main} />
<Tab.Screen name="Scan" component={Scan} />
<Tab.Screen name="Wallet" component={Wallet} />
<Tab.Screen name="Kowops" component={Kowops} />
</Tab.Navigator>
);
}
export function BottomNav() {
return (
<MyTabs />
);
}
you are nesting NavigationContainer remove NavigationContainers as I mentioned.
Hope this helps!