React Native Drawer Navigator, How to add icon and image?

Question

So i just created a Drawer Navigator in react-native app.

It looks like this right now: IMAGE

Now i want to add leading and trailing icons before and after the text.

And i also want to add a header picture on top, And a text on the Bottom.

How can i do this? any help?

Here is my App.js code:

import 'react-native-gesture-handler';

import * as React from 'react';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const NavigationDrawerStructure = (props)=> {
  //Structure for the navigatin Drawer
  const toggleDrawer = () => {
    //Props to open/close the drawer
    props.navigationProps.toggleDrawer();
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={()=> toggleDrawer()}>
        {/*Donute Button Image */}
        <Image
          source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png'}}
          style={{ width: 25, height: 25, marginLeft: 5 }}
        />
      </TouchableOpacity>
    </View>
  );
}

function firstScreenStack({ navigation }) {
  return (
      <Stack.Navigator initialRouteName="FirstPage">
        <Stack.Screen
          name="FirstPage"
          component={FirstPage}
          options={{
            title: 'First Page', //Set Header Title
            headerLeft: ()=> <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="SecondPage">
        <Stack.Screen
          name="SecondPage"
          component={SecondPage}
          options={{
            title: 'Second Page', //Set Header Title
            headerLeft: ()=> <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
  );
}

function thirdScreenStack({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="ThirdPage">
        <Stack.Screen
          name="ThirdPage"
          component={ThirdPage}
          options={{
            title: 'Third Page', //Set Header Title
            headerLeft: ()=> <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: { marginVertical: 5 },
        }}>
        <Drawer.Screen
          name="FirstPage"
          options={{ drawerLabel: 'First page Option' }}
          component={firstScreenStack} />
        <Drawer.Screen
          name="SecondPage"
          options={{ drawerLabel: 'Second page Option' }}
          component={secondScreenStack} />
        <Drawer.Screen
          name="ThirdPage"
          options={{ drawerLabel: 'Third page Option' }}
          component={thirdScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

Will be very thankful if someone help me :)

Answer 1

For this, you have to make a custom component for the drawer and pass it to the drawer navigator with the help of "drawerContent" prop like this

here example

Answer 2

This is how you add icons based on your example you have to supply and alter the following from your <Drawer.Screen options={{ ... }}>:

drawerLabel

drawerLabel:()=>(<View style={{flex:1, flexDirection:"row", justifyContent:"space-between", borderWidth:1,}}><Text style={{color:"red"}}>Login</Text><FontAwesomeIcon name="angle-right" size={20}  color={"#2AE07D"} /></View>),

drawerIcon

drawerIcon: ({focused, size}) => (<SimpleLineIconsIcon name="login" style={StyleConstant.navigationIcon}></SimpleLineIconsIcon>),

or if you want to use the size props on the icon

drawerIcon: ({focused, size}) => (<SimpleLineIconsIcon name="login" size={size} ></SimpleLineIconsIcon>),

To add image on the Drawer as per the suggestion of @rishikesh_07 use drawerContent but the guide he provided does not give a single example how to do so. To give you ease I am giving sample code for it.

First Create a function which would contain the image just to make the Drawer Code neat like so.

function ImageDrawerContent(navigation ) {
return (
  <DrawerContentScrollView {...navigation }>
    <Image source={ require('./assets/sample_image.png') } resizeMethod="resize" resizeMode="contain" style={{ flex:1, alignSelf:"center", width:91, height:86, }} />
    <DrawerItemList {...navigation } />
  </DrawerContentScrollView>
);}

Then on your Drawer.Navigator call the function within drawerContent property

<Drawer.Navigator 
        drawerContent={(props) => <ImageDrawerContent {...props} />} >
...
</Drawer.Navigator>