CODEWITHSUNDEEP
react-nativereact-navigation
dinolin
dinolin

Reputation: 78

The side menu button in navigation drawer is not working when i press it in React native

static navigationOptions = ({navigation}) => {
  return {
    headerLeft: (
      <View style ={{padding:10}}>
        <Ionicons name = "md-menu" size={32} onPress ={()=>{navigation.navigate('DrawerOpen')}}/>
      </View>
    )
  }
}

Upvotes: 0

Views: 1765

Answers (2)

Nate
Nate

Reputation: 535

This solved the issue of navigation for me.

  1. Install NativeBase by running npm install --save native-base

  2. Run react-native link to link the fonts

  3. Import this import {Header, Left, Icon} from 'native-base'

  4. The add this code to render(){} 

    render() {
  return (
    <View>
      <Header>
        <Left>
          <Icon name="menu" style={{ color: 'white'}} 
           onPress={() => this.props.navigation.toggleDrawer()} />
        </Left>
      </Header>
      <View>
        <Text>Home Contents</Text>
      </View>
    </View>
  );
}

Upvotes: 0

Jeeva
Jeeva

Reputation: 1590

As by React Navigation(v2). you may find the documentation here https://reactnavigation.org/docs/en/drawer-based-navigation.html

you need to use like this below

static navigationOptions = ({ navigation }) => ({
    headerLeft: <Button onPress={() => navigation.toggleDrawer()} />
})

To open and close drawer, use the following helpers to open and close the drawer:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

If you would like to toggle the drawer you call the following:

this.props.navigation.toggleDrawer();

Each of these functions, behind the scenes, are simply dispatching actions:

this.props.navigation.dispatch(DrawerActions.openDrawer());
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.toggleDrawer());

Upvotes: 3

Related Questions