How to add clickable Icons to reactNative navbar - react-native

Question

I want to add clickable icons to my reactnative header component
Currently it looks like this
next to the title text on the right I want to add an audio symbol but i cant figure out on doing this.
I have seen plenty of answers that work with navigation but Im using drawers so i dnt understand how to add icons.
This is what my code looks like
app.js
<NavigationContainer >
<Drawer.Navigator initialRouteName="MetalDetector" screenOptions={{
drawerStyle: {
backgroundColor: '#3e4463',
width: 220
},
}}>
<Drawer.Screen name="MetalDetector" component={Home} options={{drawerLabel: '🔦 MetalDetector'}} />
<Drawer.Screen name="Settings" component={Settings} options={{drawerLabel: '🛠 Settings'}} />
<Drawer.Screen name="Calibrate" component={Home} options={{drawerLabel: '💡 Calibration'}}/>
<Drawer.Screen name="Feedback" component={Home} options={{drawerLabel: '👨‍👩‍👧‍👦 Feedback'}}/>
and this is my home.js file which renders content for the metaldetector page
<View style={styles.container}>
<View style={styles.buttonContainer}>
//Cde is below
</View>
</View>
);
}
So where would i add icons to the titlemenu?
I found this here, which covers on how to set the header using stackscreen
https://reactnavigation.org/docs/headers/
but since I use drawer.screen i dont know how to apply that

Answer 1

Option 1:
The DrawerContent file
import React, { useState } from 'react';
import { View, StyleSheet, Image, Alert, Text } from 'react-native';
import { Title, Drawer } from 'react-native-paper';
import { DrawerContentScrollView, DrawerItem } from '#react-navigation/drawer';
import { FontAwesome, MaterialIcons, AntDesign, Ionicons } from '#expo/vector-icons';
import colors from '../config/colors';
const AppDrawerItem = ({ label , icon, onPress, ...props }) => {
return (
<DrawerItem
icon={icon}
label={label}
onPress={onPress}
/>
);
}
export function DrawerContent(props) {
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
<Drawer.Section style={styles.drawerSection}>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Dashboard') }}
label="Dashboard"
icon={({ color, size, focused }) => (
<MaterialIcons
name="dashboard"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Messages') }}
label="Messages"
icon={({ color, size, focused }) => (
<MaterialIcons
name="notifications"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
</Drawer.Section>
</DrawerContentScrollView >
</View >
);
}
DrawerNavigator
<Drawer.Navigator
screenOptions={{
headerTitleStyle: {
color: "black",
opacity: 0.9
},
headerTintColor: colors.primary,
swipeEnabled: false,
headerTitleAlign: 'center',
headerShadowVisible: false,
}} drawerContent={props => <DrawerContent {...props} />} > //---here you can add drawercontent component
<Drawer.Screen name="Dashboard" component={HomeScreen} />
<Drawer.Screen options={{ headerShown: true }} name="Messages" component={NotificationNavigator} />
</Drawer.Navigator >
Edit:
Option2:
You can add the icon in the <Drawer.Screen> tag.
<Drawer.Screen name="Feed" component={Feed} options={{
title: 'Home',
drawerIcon: ({focused, size}) => (
<Ionicons
name="md-home"
size={size}
color={focused ? '#7cc' : '#ccc'}
/>
),
}} />