CODEWITHSUNDEEP
react-nativereact-native-navigationreact-native-tab-viewreact-native-drawer
sinan_u
sinan_u

Reputation: 61

React Native Drawer Navigation not showing on each page

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;

Upvotes: 0

Views: 837

Answers (0)

Related Questions