title: react-native-navigation : navigating with custom header
body: <p>I have a custom header for my stack navigation and I want to navigate to another page when I press on an image. But when I press the image I get an error <code>undefined is not an object (evaluating _this.props.navigation.navigate')</code> </p>
  
  <p>In my App.js </p>
  
  <pre><code>const ProfileStackNavi = createStackNavigator({
    stackAndTab:{
      screen:ProfileTopTabNavigator,
      navigationOptions: {
        header: (
          &lt;MyPageTabBarHeader /&gt;
        )
      },
    }
  })
  </code></pre>
  
  <p>In my custom header class</p>
  
  <pre><code>export default class MyPageTabBarHeader extends Component {
    constructor(props) {
      super(props)
    }
    render() {
    return(
      &lt;View style={{width:375,height:250, backgroundColor:'white'}}&gt;
            &lt;TouchableOpacity onPress={()=&gt;this.props.navigation.navigate('Register')}&gt;
                      &lt;Image
                      style={{width:23, height:23}}
                      source{require('../Components/Assets/register.png')} /&gt;
             &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
      &lt;/View&gt;
      )
    };
  }
  </code></pre>
  
  <p>I also tried <code>&lt;MyPageTabBarHeader navigation={this.props.navigation}/&gt;</code> but then it gives me the error <code>undefined is not an object (evaluating this.props.navigation.navigate')</code> the same error as previously but without an _ before <code>this</code>.  </p>
  
  <p><strong>Edited</strong></p>
  
  <p>In my App.js I have <code>createAppContainer</code>. It looks like this:</p>
  
  <pre><code>const StartSwitchNavigator = createStackNavigator(
    {
      one:{
      screen:screenOne,
     },
   {
      two:{
      screen:ProfileStackNavi,
     }
  );
  
  const App = createAppContainer(StartSwitchNavigator);
  
  export default App;
  </code></pre>