React Native Drawer

Question

React Navigation, problem with Drawer

So, my problem is: the drawer isn't opening when i hit the menu icon, i'm using react-navigation-drawer and i get the error: "TypeError:undefined is not an object (evaluating 'navigation.navigate')". Here's my code:

import {createDrawerNavigator,NavigationActions} from 'react-navigation-drawer';
import {TouchableHighlight,View} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/EvilIcons';
Icon.loadFont();

import Perfil from '../telas/perfil';
import Loja from '../telas/loja';
import Registrador from '../telas/registrador';
import Diy from '../telas/diy';
import QuemSomos from '../telas/quemSomos';
import Problemas from '../telas/problemas';

const DrawerScreen = createDrawerNavigator({
    Perfil:{screen: Perfil},
    Loja:{screen: Loja},
    Registrador:{screen: Registrador},
    Diy:{screen:Diy},
    QuemSomos:{screen:QuemSomos},
    Problemas:{screen:Problemas}
},{
    headerMode:'float'
})

const HeaderButton=(

    <View>
        <TouchableHighlight onPress={()=>navigation.navigate("drawerOpen")}>
            <Icon name="navicon" size={40} color="#FFF"/>
        </TouchableHighlight>    
    </View>

)

DrawerScreen.navigationOptions= {

    /*headerTitle:*/
    title: 'Waste Not',
    headerMode:'float',
    headerLeft: HeaderButton,
    headerTitleStyle:{
        textAlign:'center',
        flex: 1
    },
    headerStyle: {
        backgroundColor: '#aeead3',
    }, 
    headerTintColor: 'green',

}



export default DrawerScreen;

Answer 1

Can you try with this.prop before navigation:

const HeaderButton=(

    <View>
        <TouchableHighlight onPress={()=>this.prop.navigation.navigate("drawerOpen")}>
            <Icon name="navicon" size={40} color="#FFF"/>
        </TouchableHighlight>    
    </View>

)