Custom Drawer component in react navigation 5.x not working properly

Question

I have tried to customize react-navigation drawer(v 5.x) because I want to add company information in the drawer header. But it isn't going good because adding custom drawer component to the drawer scraps any list of navigation items already available on the drawer( the names of all screens). Below is my code:

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

  </ScrollView>)
  
};

render(){
  return(
     <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerStyle={{
    width: 240,
  }} drawerContent={(props)=><CustomDrawerContentComponent {...props} />}>
        <Drawer.Screen name="Home" component={HomePage} options={{
          title: 'Home',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="home"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Menu" component={MenuNavigator} options={{
          title: 'Menu',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="list"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Contact Us" component={ContactComponent} options={{
          title: 'Contact',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="address-card"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="About Us" component={AboutComponent} options={{
          title: 'About Us',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="info-circle"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

If I try to move screen components inside the customDrawerContentComponent, it says the Drawer hasn't any screen to render.

Below is my app on using custom drawer component:

Below is my app without using custom drawer component:

So I want to have both the components working. Which mean, I should have the logo as well as the list of navigation links in second image. I cannot achieve this. Please help me to achieve this.

Thank You!

Answer 1

You have to add the DrawerItemList to the custom drawer component

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

 <DrawerItemList {...props} />   <-- this is required
  </ScrollView>)
  
};

Also its better if you can use the DrawerContentScrollView instead of the ScrollView.