React Native - Push one Screen To Another have issue

Question

I used the 'StackNavigator', I have issue to push when navigation code write in button event. but its working fine if we directly code onPress event,

Import file.

import { StackNavigator } from "react-navigation";
import SignUpScreen from "./SignUp";

Push another is working :

render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
       <View style={styles.viewStyle}>
         <TouchableHighlight style = {styles.buttonStart}
             onPress={() => navigate("SignUpCompany")}>
               <Image
                 source={require('./Images/hire.png')}
               />
         </TouchableHighlight>
       </View>
    );
  }

Push another via function is not working :

   pushcode() {
     console.log('call');
     this.props.navigation.navigate('SignUp');
   }

   render() {
    return (

     <TouchableHighlight style = {styles.buttonStart}
         onPress={this.pushcode}>
           <Image
             source={require('./Images/hire.png')}
           />
     </TouchableHighlight>

    );}

ERROR ON CLICK BUTTON :

Thanks. Please help me.

Answer 1

Look like you are using the push extra in this line

this.props.navigation.navigate.push('SignUp');

Try this will work for you

this.props.navigation.navigate('SignUp');

May be this can help you

Answer 2

I think you miss the function bind within constructor --- that's why you got undefined is not an object (evaluating 'this.props.navigation'). because this is undefined inside pushcode function scope.

add below into your constructor:

constructor(props) {
    super(props);

    this.pushcode = this.pushcode.bind(this);
    ...
}