title: Undefined is not an object (evaluating 'this.props.navigation.navigate') React native
body: <p>what I'm trying to do is to custom android back buttom, so when I'm in a screen, when I press the back button, the screen must navigate through the <code>MyProducts</code>, but I'm receiving <a href="https://i.stack.imgur.com/cN9gW.png" rel="nofollow noreferrer">this error</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, StyleSheet, Text, Keyboard, Animated } from 'react-native';
  import { Textarea, Form, Item, Input, Label, Button } from 'native-base';
  import jwt_decode from 'jwt-decode';
  
  class CreateProduct extends Component {
    constructor(props) {
      super(props);
      this.keyboardHeight = new Animated.Value(0);
      this.imageHeight = new Animated.Value(199);
  
      this.state = {
        isButtonsHidden: false,
        title: null,
        description: '',
        isDialogVisible: false,
        messageError: '',
      };
    }
  
    registerProduct = () =&gt; {
      const { state } = this.props.navigation;
      const token = state.params ? state.params.token : undefined;
      const user = jwt_decode(token);
  
      fetch(createProductPath, {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((response) =&gt; {
        return response.json();
      })
      .then((responseJson) =&gt; {
        if (responseJson.error != null) {
          this.setState({ messageError: responseJson.error })
          this.setState({ isDialogVisible: true })
        }
        else {
          this.props.navigation.navigate('MyProducts', { token: token });
        }
      })
    }
  
    componentDidMount() {
      BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }
    componentWillUnmount() {
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }
  
    handleBackButton() {
      this.props.navigation.navigate('MyProducts', { token: token });
      return true;
    }
  
    render() {
      const { state } = this.props.navigation;
      var token = state.params ? state.params.token : undefined;
  
      return (
        &lt;Animated.View
          style={[styles.container, { paddingBottom: this.keyboardHeight }]}
        &gt;
          &lt;Form style={styles.description}&gt;
            &lt;Item floatingLabel&gt;
              &lt;Label&gt;Title&lt;/Label&gt;
              &lt;Input
                onChangeText={(title) =&gt; { this.setState({ title }) }}
              /&gt;
            &lt;/Item&gt;
            &lt;Textarea
              onChangeText={(description) =&gt; { this.setState({ description }) }}
            /&gt;
          &lt;/Form&gt;
          &lt;ToogleView hide={this.state.isButtonsHidden}&gt;
            &lt;View style={styles.buttonContainer}&gt;
              &lt;Button
                onPress={() =&gt; { this.props.navigation.navigate('MyProducts', { token: token }); }}
                danger
              &gt;
                &lt;Text style={{ color: 'white' }}&gt; CANCEL &lt;/Text&gt;
              &lt;/Button&gt;
              &lt;Button
                onPress={this.registerProduct}
                success
              &gt;
                &lt;Text style={{ color: 'white' }}&gt; SAVE &lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/View&gt;
          &lt;/ToogleView&gt;
        &lt;/Animated.View&gt;
      );
    }
  }
  export default CreateProduct;
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      flex: 1
    },
    description: {
      flex: 1,
      height: '35%',
      width: '95%',
    },
    buttonContainer: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      paddingBottom: 10,
    },
  });
  </code></pre>
  
  <p>For reasons unknown to me, my props is undefined when i saw it with a <code>console.log</code>, so I can't pass throught the</p>
  
  <p><code>handleBackButton() {
     this.props.navigation.navigate('MyProducts', { token: token });
   }</code></p>
  
  <p>Is there a good way to do this? I appreciate.</p>