React Native drawer navigation screen header title and buttons

user_1745477 0
Viewed 3810

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;
react-navigation react-native
2 Answers

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>
  );
}
user_14517530

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>
        );
    }
}
user_124839970
Related