CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
mohamed adel
mohamed adel

Reputation: 715

ReactNative Navigation headerRight Toggle Drawer Error

I have a screen where i have a back button and a menu drawer button on the right

when i click on the menu drawer button i get the error (undefined isn't an object)

the code tried to trigger the toggle.drawer(). it works fine in the render code but it doesn't work in the headerRight here is the code 

    export default class categoryScreen extends React.Component {
    static navigationOptions = {
        headerRight:
        <Button 
        onPress={()=> this.props.navigation.toggleDrawer()} // This Doesn't work how to make it work
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>,
      drawerIcon: (
        <Icon style={styles.menu}type="AntDesign" name="home" color="#1a1917" />
      )
    }
    render() {
          return (                                                                                                           
            <Container>
                        <Button 
        onPress={()=> this.props.navigation.toggleDrawer()} // This Works 
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>
            </Container>
         );                                                                                                                 
      }
}

Upvotes: 1

Views: 457

Answers (1)

CampbellMG
CampbellMG

Reputation: 2220

You don't have access to this.props from a static context, you need to access your navigation object like this: 

static navigationOptions = ({ navigation }) => {
        headerRight:
        <Button 
        onPress={()=> navigation.toggleDrawer()} // This Doesn't work how to make it work
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>,
      drawerIcon: (
        <Icon style={styles.menu}type="AntDesign" name="home" color="#1a1917" />
      )
    }

Upvotes: 1

Related Questions