React native react-navigation variable inside other component

Question

Inside my header component, there is a menu icon. When I press the icon, it should open the DrawerNavigation.

I already tried to add

const { navigate } = this.props.navigation;

But unfortunately, it doesn't fix the problem.

My header component:

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

My home screen, where I import the header component:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

This error appears when the icon inside the header is pressed

How can I use the navigation inside the header component? Thanks in advance.

Update

Header component:

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {

        const { navigate } = this.props.navigation;

        return (
            <View style={styles.header}>
                <Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

Home screen:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header navigation={this.props.navigation} />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

Error after update

Answer 1

You need to pass the navigation object to your header component like this

<Header navigation={this.props.navigation} />

Your header component now should be something like this

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
    openDrawer() {
      this.props.navigation.navigate('DrawerToggle');
    }
}