React Native drawer navigation screen header title and buttons - react-native

Question

I am trying to add title and buttons to my home screen that is opened from drawer navigation. The following does not work(screen loads but no header) and i cant find documentation or sample on this that uses React Navigation v5. Did i miss something? This is the doc i am following.
<Drawer.Screen
name="Home"
component={HomeScreen}
title="Home Screen"
options={{
headerRight: () => (
<Button
onPress={() => alert("This is a button!")}
title="Info"
color="#fff"
/>
),
}}
/>
UPDATE: doing this on the screen didn't work as well.
const HomeScreen = (props) => {
return (
<Container>
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen2</Text>
</View>
</Container>
);
};
HomeScreen.navigationOptions = (props) => ({
title: "Home",
headerStyle: {
backgroundColor: "rgb(0, 145, 234)",
},
headerTintColor: "white",
headerTitleStyle: {
fontWeight: "bold",
color: "white",
},
});
export default HomeScreen;

Answer 1

From the option you put in, I guess you may want to add a Stack inside your Drawer navigation.
From the below example, when you go to the HomeStack, it will have a navigation bar and you can custom it using the option you put in.
(I also created a simple snack here: https://snack.expo.io/#gie3d/insane-ice-cream)
import React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer, DrawerActions } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { Ionicons } from '#expo/vector-icons';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeStack = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={({navigation}) => ({
title: "Home",
headerStyle: {
backgroundColor: "rgb(0, 145, 234)",
},
headerTintColor: "white",
headerTitleStyle: {
fontWeight: "bold",
color: "white",
},
headerLeft: () => (
<Ionicons
name={'md-menu'}
size={24}
style={{ marginLeft: 10 }}
onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())
}
/>
),
})} />
</Stack.Navigator>
);
const Home = () => {
return (
<View>
<Text>This is Home</Text>
</View>
)}
export default () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeStack">
<Drawer.Screen name="HomeStack" component={HomeStack} />
<Drawer.Screen name="HomeNoStack" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}

Answer 2

You need to create the button on your screen too, like this.
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
//headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
headerLeft:(<HeaderBackButton size={20} onPress={()=>{navigation.navigate('Home')}} color="#fff" tintColor="#fff"/>),
headerStyle: {
backgroundColor: 'rgb(0, 145, 234)',
},
headerTintColor: 'white',
headerTitleStyle:
{
fontWeight: 'bold',
color:'white' ,
//paddingTop:"2%",
},
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}