I have been trying to nest drawer navigator, bottom tab navigator and stack navigator. I am getting two same errors:
A navigator can only contain 'Screen' components as its direct children (found ';'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.
This error is located at:
in StackNavigator (at WhatsUpscreen.js:27)
in WhatsUpstack (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:68)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:63)
in ResourceSavingScene (at DrawerView.tsx:203)
in RCTView (at View.js:34)
in View (at src/index.native.js:123)
in ScreenContainer (at DrawerView.tsx:182)
in RCTView (at View.js:34)
in View (at Drawer.tsx:625)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:618)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:608)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Drawer.tsx:599)
in DrawerView (at DrawerView.tsx:235)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at DrawerView.tsx:233)
in RCTView (at View.js:34)
in View (at DrawerView.tsx:232)
in DrawerView (at createDrawerNavigator.tsx:47)
in DrawerNavigator (at App.js:19)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:18)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
I have been trying to resolve the error but unable to do so.
This is App.js where I have written the code for drawer navigator. WhatsUpstack and ProfileStack are the two stacks whereas the other components are normal screen components.
App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import DocDetails from './DocsScreen';
import Settings from './SettingsScreen';
import DoubtsQ from './DoubtsScreen';
import HelpScreen from './HelpScreen';
import Blocked from './BlockedScreen';
import ProfileStack from './ProfileScreen';
import WhatsUpstack from './WhatsUpscreen';
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
export default App=() => (
<NavigationContainer>
<Drawer.Navigator initialRouteName="WhatsUp" drawerPosition="right" >
<Drawer.Screen name="WhatsUp" component={WhatsUpstack} options= {{ title:'Main Screen'}} />
<Drawer.Screen name="Your Profile" component={ProfileStack}/>
<Drawer.Screen name="Docs" component={DocDetails} options= {{ title:'Your Documents'}} />
<Drawer.Screen name="Doubts" component={DoubtsQ} options= {{ title:'Your Doubts'}} />
<Drawer.Screen name="Block" component={Blocked} options= {{ title:'Blocked Details'}} />
<Drawer.Screen name="Help" component={HelpScreen}/>
<Drawer.Screen name="Settings" component={Settings}/>
</Drawer.Navigator>
</NavigationContainer>
);
This is WhatsUpScreen.js where I have written the code for bottom tab navigator. WhatsUpStack, SyllabusStack and RecessStack are the stacks that have been used in bottom tab navigator. WhatsUpStack has created in the WhatsUpScreen.js along with WhatsUp function.
WhatsUpScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';
import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';
function WhatsUp({navigation}) {
return (
<View style={styles.container}>
<Text>All the chats will take place here</Text>
<StatusBar style="auto" />
<BottomTab/>
</View>
);
}
const Stack= createStackNavigator();
export default function WhatsUpstack() {
return (
<Stack.Navigator>
<Stack.Screen name="WhatsUp" component={WhatsUp}/>
<Stack.Screen name= "Docs" component={DocDetails} />
<Stack.Screen name= "Sample" component={ChatBox} />;
</Stack.Navigator>
);
}
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
BottomTab=() => (
<Tab.Navigator initialRouteName="WhatsUp" tabBarOptions={{ activeTintColor: '#e91e63', }} >
<Tab.Screen name="WhatsUp" component={WhatsUpstack} options={{ tabBarLabel: 'WhatsUp', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="wechat" color={"#000000"} size={30} />), }}/>
<Tab.Screen name="Syllabus" component={SyllabusStack} options={{ tabBarLabel: 'Syllabus', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="book-open-page-variant" color={"#000000"} size={30} />), }}/>
<Tab.Screen name="Recess" component={RecessStack} options={{ tabBarLabel: 'Recess', tabBarIcon: ({ color, size}) => (<Icon name="game-controller" color={"#0000FF"} size={30} />), }}/>
</Tab.Navigator>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is SyllabusScreen.js where SyllabusStack has been created using two normal function Syllabus and DoubtsQ.
SyllabusScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import DoubtsQ from './DoubtsScreen';
function Syllabus({navigation}) {
return (
<View style={styles.container}>
<Text>All the details for doubts and syllabus will exist here!!!</Text>
<StatusBar style="auto" />
</View>
);
}
const Stack= createStackNavigator();
export default function SyllabusStack()
{
return(
<Stack.Navigator>
<Stack.Screen name="Syllabus-wise video links" component={Syllabus}/>
<Stack.Screen name="Doubts" component={DoubtsQ}/>
</Stack.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is RecessScreen.js where where RecessStack and Recess function has been created. RecessStack has the only one component that is function Recess.
RecessScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
function Recess({navigation}) {
return (
<View style={styles.container}>
<Text>All the games will exist here!!</Text>
<StatusBar style="auto" />
</View>
);
}
const Stack= createStackNavigator();
export default function RecessStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Games" component={Recess}/>
</Stack.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
All the functions used in the above code are normal functions
for eg:
DoubtsScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function DoubtsQ() {
return (
<View style={styles.container}>
<Text>All doubts will exist here!!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
All the functions follow same format.
This is to inform you when I remove WhatsUpStack and ProfileStack from the drawer navigator. It functions perfectly yielding perfect results. Once I include these two stacks, it starts showing the error which I have mentioned above.
