CODEWITHSUNDEEP
react-nativereact-routerreact-navigationreact-native-0.46
Kirit Modi
Kirit Modi

Reputation: 23407

React Native - Push one Screen To Another have issue

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 :

enter image description here

Thanks. Please help me.

Upvotes: 0

Views: 173

Answers (2)

Val
Val

Reputation: 22797

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);
    ...
}

Upvotes: 1

HpDev
HpDev

Reputation: 2927

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

Upvotes: 2

Related Questions