React Native Drawer Navigation not showing on each page

Question

I am very new to React Native and this is the reason why I need your help now. I try to create an app with a normal Sidemenu (Burgermenu) which should apear on ech page. And I have a Bottom tab bar which should appear on 3 pages. The problem is, that on those 3 pages the Sidemenu is not displayed. What am I doing wrong?

This is the first called Page:

import * as React from 'react';
import DrawerNavigator from './DrawerNavigator'

function App() {    
    return ( 
        <DrawerNavigator />
    );      
}
export default App;

This is the Sidemenu (DrawerNavigator.js):


import * as React from 'react'
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer'
import ProjekteStackNavigator from './side_menu/Projekte'
import DashboardStackNavigator from './side_menu/Desktop'

...

import { Text, View, StyleSheet} from 'react-native';

//##################### ICONS Importieren ##################### 
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';


const Icon = createIconSetFromIcoMoon(
  require('../../assets/icomoon/selection.json'),
  'IcoMoon',
  'zepra_icons.ttf'
);

//#############################################################

const Drawer = createDrawerNavigator()

function myLogout(){
    navigation.navigate("LoginScreen"); 
}

const DrawerNavigator = () => {

  const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
    
      if (!fontsLoaded) {
        return <AppLoading />;
      } 
        
    
  return (
    <Drawer.Navigator initialRouteName="Home" drawerContent={props => {
    return (
      <DrawerContentScrollView {...props} scrollIndicatorInsets={{ right: 1 }}>
        <DrawerItemList {...props} />
        <DrawerItem label="Logout" labelStyle={{marginLeft:-18, fontSize: 15,}}
      icon={({ focused, color, size }) => <Icon2 style={{marginLeft:8}} color={focused ? '#1585b5' : '#6cbabf'} size={26} name={focused ? 'log-out-outline' : 'log-out-outline'} /> }
      onPress={() => props.navigation.navigate("StartScreen") } />
      </DrawerContentScrollView>
    )
  }}>
      
       
      <Drawer.Screen name="Dashboard" component={DashboardStackNavigator} 
          options={{
          drawerLabel: 'Dashboard',
          drawerLabelStyle:{ marginLeft:-20, fontSize: 15},
          drawerIcon: ({focused, size}) => (
              <Icon name='HAUS_3' size={35} color={focused ? '#1585b5' : '#6cbabf'} />
       )}}/>


      <Drawer.Screen name="Projekte" component={ProjekteStackNavigator} 
          options={{
          drawerLabel: 'Projekte',
          drawerLabelStyle:{marginLeft:-20, fontSize: 15},
          drawerIcon: ({focused, size}) => (
              <Icon name='PROJEKTE_ALLE' size={35} color={focused ? '#1585b5' : '#6cbabf'} />
      )}}/>
    </Drawer.Navigator>
  )
}

export default DrawerNavigator

This is the Projects Page which calls the Pages with the Bottom Tab:

import React, { useState, useEffect } from 'react';
import {Alert, View, Text, Modal, StyleSheet, Pressable, ListView, FlatList, TouchableOpacity } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import { theme } from '../../core/theme';
import clientConfig from '../../../client-config';
import Icon2 from 'react-native-vector-icons/Ionicons';
import ProjektOverview from '../ProjektOverview'


//##################### ICONS Importieren ##################### 
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';


const Icon = createIconSetFromIcoMoon(
  require('../../../assets/icomoon/selection.json'),
  'IcoMoon',
  'zepra_icons.ttf'
);

//#############################################################




const Stack = createStackNavigator()
const ModalComponent = ({ modalVisible, setModalVisible, children }) => {
  return (
    <Modal
      animationType="slide"
      transparent={true}
      style={styles.centeredView}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
        setModalVisible(!modalVisible);
      }}>
      {children}
    </Modal>
  );
};


export default function ObjectsScreen({ navigation }){

  const [modalVisible, setModalVisible] = useState(false);
  const [modal2Visible, setModal2Visible] = useState(false);
    
  const [data, setData] = React.useState(null);
  const [fontsLoaded] = useFonts({ IcoMoon: require('../../../assets/icomoon/zepra_icons.ttf') });
    
    
const onClickHandler =(data)=>()=> {
    navigation.navigate('ProjektOverview', {data});
};  
    

    
    
const comp_id = localStorage.getItem('anwender_unternehmen');
    
if ( localStorage.getItem( 'token' )!=null ) {

    React.useEffect(() => {
        async function getData() {
            try {   
                
                const siteUrl = clientConfig.siteUrl + '/wp-json/zep/v1/projekt-liste/' + comp_id;
                const response = await fetch(siteUrl, {
                        method: 'GET',
                        headers: {
                          Authorization: 'Bearer '+localStorage.getItem( 'token' )
                        }
                      })

                            if (response.status === 200) {  

                                    let json = await response.json();
                                
                                    const array = json.data;
                                    const error = array.error_code; 

                                        if(error == 0){
                                            const projekte = array.data_values[0];      
                                            setData(projekte);
                                            
                                        }else{                                          
                                            setData(1201);                                          
                                        }
                            }else {

                                if(response.status === 503) {
                                  setModalVisible(true);
                                }
                                
                                if(response.status === 403) {
                                  setModal2Visible(true);
                                }  
                            
                                throw new Error(`failed due to status code ${response.status}`); 
                            }

            } catch (err) { 
                 console.log(err);  
            }
            
        }
        getData();

    }, []); 
    
    

    if(data != 1201){

            return (
                <FlatList
                      data={data}
                      keyExtractor={(item, index) => String(index) + item.value}
                      renderItem={({item, index})=>(

                        <TouchableOpacity onPress={ onClickHandler({item}) } >  
                          
                        <View style={{ textAlign: 'left', borderColor:'#6cbabf', borderBottomWidth: 1, padding:10, margin:0, flexDirection: "row", alignItems: "center"}}> 
                          
                          <Text style={{textAlign: 'left', marginLeft:15, fontSize: 16, fontWeight: '500',}}>
                          {item.projekt_name} {item.projekt_nummer}</Text>
                          
                          
                          <View style={{flex:1, alignItems: "center", flexDirection: "row", justifyContent: "flex-end", marginRight:30}}>
                          <Icon name='PROJEKTE_BEARBEITEN' size={40} color={'#6cbabf'} />
                          <Icon2 name='eye-outline' size={10} color={'#6cbabf'} style={{padding:-100, margin:-17, bottom:-7.5}} />
                          </View>
                        </View>  

                       </TouchableOpacity>
                  )}/>
            ); // return
       
       }else{
            return (
                    <View style={{borderColor:'#6cbabf',borderWidth: 1,borderRadius:5, padding:15,margin:12,}}>  
                <View style={{justiftyContent:"center", alignItems:"center"}}>
                        <Icon name='PROJEKTE_ALLE' size={100} color={'#6cbabf'} />
                </View>
                        <Text style={{textAlign: 'left', fontSize: 16, fontWeight: '700', paddingBottm:15,}}>Sie haben noch keine Projekte erstellt.</Text>
                        <Text style={{fontSize: 12}}> </Text>
                        <Text style={{textAlign: 'center', fontSize: 13}}>Projekte können nur in der Desktopanwendung verwalten werden.</Text>
                        </View>  
            ); // return           
           
       }
    
}else{
  navigation.navigate('Dashboard');
}   
    
    

return (
    <>      
      <ModalComponent
        modalVisible={modalVisible}
        setModalVisible={(val) => {
          setModalVisible(val);
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Fehler 503</Text>
            <Text style={styles.modalText}>Ein unbekannter Fehler ist aufgetreten!.</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}>
              <Text style={styles.textStyle}>Ok</Text>
            </Pressable>
          </View>
        </View>
      </ModalComponent>
                
      <ModalComponent
        modalVisible={modal2Visible}
        setModalVisible={(val) => {
          setModal2Visible(val);
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Fehler 403</Text>
            <Text style={styles.modalText}>Bitte loggen Sie sich erneut ein!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModal2Visible(!modal2Visible)}>
              <Text style={styles.textStyle}>Ok</Text>
            </Pressable>
          </View>
        </View>
      </ModalComponent>     
    </>
  );        
    
}

This is the Bottom Navigator:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


//##################### ICONS Importieren ##################### 
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';


const Icon = createIconSetFromIcoMoon(
  require('../../assets/icomoon/selection.json'),
  'IcoMoon',
  'zepra_icons.ttf'
);

//#############################################################


//##################### Seiten importieren #####################
import ProjectsScreen from './ProjectScreen';
import WaermeschutzScreen from './tabs/waermeschutz';
import BegehungenScreen from './tabs/begehungen';
//##############################################################




//##################### Menünamen für Buttontab ################
const projectsName = "Projekte";
const waermeschutzName = "Wärmeschutz";
const begehungenName = "Begehungen";
//##############################################################





//#################### BUTTON-TAB erstellen #####################

const Tab = createBottomTabNavigator();

function MainContainer() {
    
  // Load the icon font before using it
  const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
    
  if (!fontsLoaded) {
    return <AppLoading />;
  }
    
  return (
      <Tab.Navigator
                initialRouteName={projectsName}
                screenOptions={({ route }) => ({
                  headerShown: false,
                  tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let rn = route.name;

                    if (rn === projectsName) {
                      iconName = focused ? 'PROJEKTE_ALLE' : 'PROJEKTE_ALLE';
                    } else if (rn === waermeschutzName) {
                      iconName = focused ? 'HAUS_3' : 'HAUS_3';
                    } else if (rn === begehungenName) {
                      iconName = focused ? 'NOTIZ_ERSTELLEN' : 'NOTIZ_ERSTELLEN';
                    }

                    // You can return any component that you like here!
                    return <Icon name={iconName} size={43} color={color} />;
                  },
                  'tabBarActiveTintColor': '#4283b1',
                  'tabBarInactiveTintColor': '#5db8bd',
                  'tabBarStyle':{ 'paddingTop':4, 'height':90 },
                  'tabBarLabelStyle':{ 'paddingTop':3, 'fontSize':13 }
                })}>
                <Tab.Screen name={projectsName} component={ProjectsScreen} /> 
                <Tab.Screen name={waermeschutzName} component={WaermeschutzScreen} />
                <Tab.Screen name={begehungenName} component={BegehungenScreen} />
                    
      </Tab.Navigator>
  );
}

export default MainContainer;

And this is the page with the ProjectsScreen:

import React, { useState, useEffect } from 'react';
import {Alert, View, Text, Modal, StyleSheet, ImageBackground, ScrollView, FlatList , TouchableOpacity, Linking} from 'react-native';
import Background from '../components/Background_2';
import BackButton from '../components/BackButton';
import helpers from '../components/Data_funks';
import Icon2 from 'react-native-vector-icons/Ionicons';

import DrawerNavigator from './DrawerNavigator'


//##################### ICONS Importieren ##################### 

import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';

const Icon = createIconSetFromIcoMoon( require('../../assets/icomoon/selection.json'), 'IcoMoon', 'zepra_icons.ttf');
const Bold = ({ children }) => <Text style={{ fontWeight: 'bold' }}>{children}</Text>

//#############################################################


//export default function ProjectsScreen({ route, navigation }) {
    
function ProjectsScreen({ route, navigation }) {    


      const data = route.params['data'];
      
      const [projekte_data, setProjektdata] = useState([]);
      const [bauherr, setBauherr] = useState([]);
      const [bauleiter, setBauleiter] = useState([]);
      const [projektleiter, setProjektleiter] = useState([]);
      const [sachbearbeiter, setSachbearbeiter] = useState([]);
      const [objekte, getObjekte] = useState([]);
    
// Projektdaten ########################################################################
    
  useEffect(() => {
    const init = async () => {
    await helpers.get_projekt_data(data.item.projekt_id).then(result =>{    
        setProjektdata(result.p_data[0]);
        setBauherr(result.bauherr[0]);
        setBauleiter(result.bauleiter[0]);
        setProjektleiter(result.projektleiter[0]);
        setSachbearbeiter(result.sachbearbeiter[0]);
    })
          }   
;
          init();
  },[]);
    
//###################################################################################       
    

    
    
    
// Objektdaten ########################################################################
    
  useEffect(() => {
    const init2 = async () => {
    await helpers.getObjekte(data.item.projekt_id).then(result2 =>{ 
        getObjekte(result2[0]);
    })
          }   
;
          init2();
  },[]);
    
//###################################################################################       
    

    
    
const onClickHandler =(data)=>()=> {
    navigation.navigate('ProjektOverview', {data});
};  
    
console.log(objekte);
    
return(

<ScrollView scrollIndicatorInsets={{ right: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
<Background>
        <DrawerNavigator /> 
  <View  style={{paddingTop:50,}}>  
        <Icon name='KRAN' size={80} color={'#6cbabf'} style={{textAlign: 'center',}} />
  </View>
  <View style={{paddingTop:10,}}>
        { data.item.projekt_name !='Kein Titel'? <Text style={styles.HeadNameStyle}>{data.item.projekt_name} 
        <Text>{"\n"}</Text>
        {data.item.projekt_nummer}</Text> : <Text style={styles.HeadNameStyle}>{data.item.projekt_nummer}</Text> }
  </View>

        
 <View style={styles.tabsStyle}>
    
         <View style={styles.row}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${bauleiter['kontakte_mobil']}`) }> 
                 <Icon2 style={styles.icon} name='call-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>

            <View style={styles.inputWrap}>
                <Text style={styles.tabsHeader}><Bold>Bauleiter:</Bold> {bauleiter['kontakte_vorname']} {bauleiter['kontakte_vorname']}</Text>
           </View>

           <View style={styles.inputWrap2}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${bauleiter['kontakte_mail']}`) }> 
                  <Icon2 style={styles.icon} name='md-mail-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
          </View>

        </View>

         <View style={styles.row}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${bauherr['kontakte_mobil']}`) }> 
                 <Icon2 style={styles.icon} name='call-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
            <View style={styles.inputWrap}>
                <Text style={styles.tabsHeader}><Bold>Bauherr:</Bold> {bauherr['kontakte_vorname']} {bauherr['kontakte_nachname']}</Text>
           </View>

           <View style={styles.inputWrap2}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${bauherr['kontakte_mail']}`) }> 
                  <Icon2 style={styles.icon} name='md-mail-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
          </View>
        </View>


         <View style={styles.row}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${projektleiter['anwender_mobil']}`) }> 
                 <Icon2 style={styles.icon} name='call-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
            <View style={styles.inputWrap}>
                <Text style={styles.tabsHeader}><Bold>Projektleiter:</Bold> {projektleiter['anwender_vorname']} {projektleiter['anwender_nachname']}</Text>
           </View>

           <View style={styles.inputWrap2}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${projektleiter['anwender_mail']}`) }> 
                  <Icon2 style={styles.icon} name='md-mail-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
          </View>
        </View>

         <View style={styles.row}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${sachbearbeiter['anwender_mobil']}`) }> 
                 <Icon2 style={styles.icon} name='call-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
            <View style={styles.inputWrap}>
                <Text style={styles.tabsHeader}><Bold>Sachbearbeiter:</Bold> {sachbearbeiter['anwender_vorname']} {sachbearbeiter['anwender_nachname']}</Text>
           </View>

           <View style={styles.inputWrap2}>
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${sachbearbeiter['anwender_mail']}`) }> 
                  <Icon2 style={styles.icon} name='md-mail-outline' size={22} color={'#6cbabf'} />
                </TouchableOpacity>
          </View>
        </View>
 </View>
    

<View style={styles.objectHeader}>
{ objekte !=''? <Text style={styles.HeadNameStyle}>Objekte</Text>: null}
</View> 


<FlatList style={styles.FlatList}
     data={objekte}
     scrollEnabled={false}
        keyExtractor={(item, index) => String(index) + item.value}
        renderItem={({item, index})=>(

    <View style={styles.Container}> 
        <View style={styles.navBar}>
              <Icon name='HAUS_3' size={110} color={'#6cbabf'} />
            <View style={styles.centerContainer}>
                <Text style={styles.centerText}>{item.objekt_name} </Text>
                <Text style={styles.centerText}>{item.objekt_nummer} </Text>
            </View>
        </View>

<Text>{<Bold>Adresse:</Bold>} {item.objekt_strasse}</Text>
<Text>{'                '} {item.objekt_plz}, {item.objekt_ort}</Text>
<Text>{'                '}</Text>
<Text>{<Bold>Nutzung:</Bold>} {item.objekt_typ},  {<Bold>Vorhaben:</Bold>} {item.objekt_sanierungs_art}</Text>
    </View>
)}/>
<Text>{''}</Text>

</Background>        
</ScrollView>    
    )
}

export default ProjectsScreen;

So basically your structure should be Root(SideMenu) > One of the menu Connected to Tabbar, This way SideMenu ie Drawer will be available on all the screens you have. It will be better if you put screens how you need, to show your problem rather than long code that are not required. — iphonic, Jun 21 '22 at 11:51
Hello iphonic, thnk you for your reply but how would I do this in my case? — sinan_u, Jun 21 '22 at 12:09
Read this article https://dev.to/deversity/combining-drawer-tab-and-stack-navigators-in-react-navigation-6-l4m it will give you clear picture. — iphonic, Jun 21 '22 at 12:15

React Native Drawer Navigation not showing on each page

0 Answers0