ReactNative StackNavigator inside DrawerNavigator

Question

Code first:

import React, { Component } from 'react';
import {AppRegistry, Image, TouchableHighlight} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';

import ScreenHome from './screens/Home'
import ScreenRegister from './screens/Register'
import FontAwesome from "react-native-vector-icons/FontAwesome";

const StackScreens = StackNavigator({
    Home: { screen: ScreenHome },
    Register: { screen: ScreenRegister },
},{
    headerMode: "screen",
    navigationOptions : {
        header: {
            visible: true,
            title: (
                <Image
                    source={require("./images/logo_colored.png")}
                    style={{width: 150, height: 25, marginLeft: 15, marginRight: 15}}
                    resizeMode={"contain"}
                />
            ),
            left: (
                <TouchableHighlight
                    underlayColor='rgba(94, 3, 67, 0.5)'
                    onPress={() => {
                        // ERROR HERE: this.props.navigation is undefined
                        //this.props.navigation.navigate('DrawerOpen')
                    }}>
                <FontAwesome name='bars' size={20} color={"#333333"} style={{paddingLeft: 20}}/>
                </TouchableHighlight>
            ),
            right: (
                <FontAwesome name='user-o' size={20} color={"#333333"} style={{paddingRight: 20}}/>
            )
        }
    }
});

const App = DrawerNavigator({
    Home: { screen: ScreenHome },
    Register: { screen: StackScreens }
})

AppRegistry.registerComponent('ReactApp', () => App);

When i want to call this.props.navigation.navigate('DrawerOpen') i get an error (is undefined ...). Inside the ScreenRegister this works as intended and the Drawer Menu opens. How can i call this.props.navigation inside the navigationOptions of my StackNavigator Header? This header will then be displayed in all my further screens with the icon to open the drawer menu.

Answer 1

Updated your header section with below code.

    header:({ navigate })=>({
        visible: false,
        title: (
            <Image
                source={require("./images/logo_colored.png")}
                style={{width: 150, height: 25, marginLeft: 15, marginRight: 15}}
                resizeMode={"contain"}
            />
        ),
        left: (
            <TouchableHighlight
                underlayColor='rgba(94, 3, 67, 0.5)'
                onPress={() => {
                    // UPDATED HERE
                    navigate('DrawerOpen')
                }}>
            <FontAwesome name='bars' size={20} color={"#333333"} style={{paddingLeft: 20}}/>
            </TouchableHighlight>
        ),
        right: (
            <FontAwesome name='user-o' size={20} color={"#333333"} style={{paddingRight: 20}}/>
        )
    })