CODEWITHSUNDEEP
react-nativereact-navigation
velvetInk
velvetInk

Reputation: 368

react Navigation 3.x open drawer from header button?

I want to create a header on top with title for each screen and button on the right to open the drawer in react navigation 3.x

In the code below the header does not show.

//Updated with Current code

  import React, { Component } from 'react';
import { Button } from 'react-native';
import {
  createStackNavigator,
  createDrawerNavigator,
  createAppContainer
} from 'react-navigation';

import MyHomeScreen from './components/HomeScreen';
import MyNotificationsScreen from './components/ProfileScreen';

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: MyHomeScreen
    },
    Notifications: {
      screen: MyNotificationsScreen
    }
  },
  {
    initialRouteName: 'Home',
    navigationOptions: navigationOptionsHeader
  }
);

const navigationOptionsHeader = ({ navigation }) => {
  return {
    headerTitle: 'MY Home',
    headerRight: (
      <Button
        onPress={() => navigation.toggleDrawer()}
        title="Info"
        color="#222"
      />
    )
  };
};

const AppContainer = createAppContainer(MyDrawerNavigator);

class App extends Component {
  render() {
    return <AppContainer />;
  }
}
export default App;

Upvotes: 5

Views: 12277

Answers (5)

Marcio Klepacz
Marcio Klepacz

Reputation: 666

For React Navigation 5

Use the prop options as a function:

      <Stack.Screen
        name="screen name"
        component={ScreenComponent}
        options={({ navigation }) => ({ 
          headerRight: (props) => {
            return <Button onPress={() => navigation.toggleDrawer() }} />
          }
        })}
      />

https://reactnavigation.org/docs/upgrading-from-4.x/#configuring-the-navigator

Upvotes: 2

Harry
Harry

Reputation: 1091

For react navigation 5.x

<Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        headerLeft: () => (
          <View>
            <Icon
              onPress={() => navigation.toggleDrawer()}
              name="menu"
            />
          </View>
        ),
      }}
/>

Upvotes: 1

Shivam Raj
Shivam Raj

Reputation: 79

Use this inside your screen class 

 static navigationOptions = ({ navigation }) => {
        return {
        title: 'Home',
        headerLeft: (
          < Icon name="menu" size={30} style={{marginStart:10}} backgroundColor="#000000" onPress={() => navigation.openDrawer()} > < /Icon>
        ),
      };
    };

Upvotes: 7

vignesh
vignesh

Reputation: 2525

The navigationoptions had been renamed as defaultNavigationOptions in v3.

Please refer the documentation from https://reactnavigation.org/docs/en/headers.html

Upvotes: 2

vignesh
vignesh

Reputation: 2525

try this 

const MyDrawerNavigator = createDrawerNavigator(
      {
        Home: {
          screen: MyHomeScreen
        },
        Notifications: {
          screen: MyNotificationsScreen
        }
      },
      {
        initialRouteName: 'Home'
     navigationOptions: navigationOptionsHeader,

      }
    );


    const navigationOptionsHeader=({navigation})=>{


        return {

      headerRight: (
          <Button
            onPress={() => navigation.toggleDrawer();
    }
            title="Info"
            color="#222"
          />
        )
      };

    }

you can also add other stuffs in header like this

    const navigationOptionsHeader=({navigation})=>{


        return {

      headerRight: (
          <Button
            onPress={() => navigation.toggleDrawer();
    }
            title="Info"
            color="#222"
          />
        )

  headerLeft : <headerLeft/>,
  title: //Header Title
  headerStyle: { backgroundColor: '#161616', height:48, },
  headerTitleStyle:{ color:'#cd9bf0', fontWeight: '400', alignSe
      };

    }

Upvotes: 4

Related Questions