Passing Props for button on press event

Question

I created a drawer (react-navigation) in Routes.js and I have a Button in HamburgerBtn.js. I wish to invoke the call on the button to open the drawer with my button. I do not understand how to get this even from outside of routes into the button.

#HamburgerBtn.js;import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
  Text,
  View
} from 'react-native';
import {DrawerNavigator} from 'react-navigation';
import {NavigationActions} from 'react-navigation';

class HamburgerBtn extends Component {
  constructor(props){
    super(props);
    this.state = {
      active: false,
    }
  }
  openControlPanel = () => {
      this.props.navigation.navigate('DrawerOpen'); // open drawer
    };
  render () {
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
    return (
      <View style={styles.hamburgerBtnHome}>
        <Hamburger active={this.state.active}
        type = "arrow"
        color = "black"
        onPress={()=> {this.props.openControlPanel()}}
        />
      </View>
    );
  }
}

export default HamburgerBtn;

--routes.js--

import Connect from './Connect/Connect';
import Setup from './Setup/Setup';
import Update from './Update/Update';
import homePage from './homePage'
import SideMenu from './SideMenu/SideMenu';
import {DrawerNavigator} from 'react-navigation';

openControlPanel = () => {
    this.props.navigation.navigate('DrawerOpen'); // open drawer
  };

export default DrawerNavigator({
  homePage: {
    screen: homePage
  },
  Connect: {
    screen: Connect
  },
  Setup: {
    screen: Setup
  },
  Update: {
    screen: Update
  }
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});

--homepage.js--

import React, {Component} from 'react';
import {
  Text,
  View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';

class homePage extends Component {
  render () {
    return (
      <View style={{padding: 50}}>
      <Hamburger/>
        <Text>
          HomePage
        </Text>
      </View>
    );
  }
}

export default homePage;

Answer 1

--hamburger--

import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
  Text,
  View
} from 'react-native';
import PropTypes from 'prop-types';
import {NavigationActions} from 'react-navigation';

class HamburgerBtn extends Component {
  constructor(props){
    super(props);
    this.state = {
      active: false,
    }
  }
  onPress = () => {
    this.setState({active: !this.state.active});
    this.props.onPress();
    };
  render () {
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
    return (
      <View style={styles.hamburgerBtnHome}>
        <Hamburger active={this.state.active}
        type = "arrow"
        color = "black"
        onPress={() => this.onPress()}
        />
      </View>
    );
  }
}

export default HamburgerBtn;

--homepage--

import React, {Component} from 'react';
import {
  Text,
  View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';

class homePage extends Component {
  openControlPanel = () => {
      this.props.navigation.navigate('DrawerOpen'); // open drawer
    };
  render () {
    return (
      <View style={{padding: 50}}>
      <Hamburger onPress={() => this.openControlPanel()} />
        <Text>
          HomePage
        </Text>
      </View>
    );
  }
}

export default homePage;