Click here to Skip to main content
15,867,991 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have been trying to nest stack navigator inside bottom tab navigator and which has been nested into drawer navigator. In terms of nesting, bottom tab navigator is at the top, then bottom tab navigator and then at the end stack navigator. I have done this so that my bottom tab navigator appears in some of the screens and my drawer appears in all the screens. I have created stack navigator in order to design the header which is not possible in the case of other navigators. But I have been unable to do so. My code is running properly without any error but as output, blank screen appears. I am unable to get the desired output and the program is not showing any error. Kindly help me in identifying my error. I have pasted the image of the output as well.

What I have tried:

I have written and resolved all the errors but has been unable to obtain output. A blank screen appears on my expo device.

I have mentioned my code for your perusal.

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>
);


BottomTab.js

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default 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>
);


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 DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


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',
  },
});


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',
  },
});


Kindly help me indetifying my error. In case if you have any doubts, Ihave also mentioned the link of my problem on StackOverflow. On stack overflow, I have given a proper explanation as well.

react native - How to nest stack navigator, bottom tab navigator and drawer navigator? - Stack Overflow[^]
Posted
Updated 22-Jul-22 3:54am

1 solution

You have good approach but the problem is that we can not use these navigations from React but instead we can use Flux one.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900