CODEWITHSUNDEEP
react-native
animesh
animesh

Reputation: 151

undefined is not an object(evaluating this.props.navigator.push)

I have two page i.e sign in page and a payment page. I am trying to navigate to payment page on tap on SignIn button, but i am getting error undefined is not an object(evaluating this.props.navigator.push)

The code is as below:

import React, {
StyleSheet,
Text,
View,
TextInput,
Component,
Alert,
Navigator
} from 'react-native';

var Button = require('react-native-button');
import Payments from '../payments'


class Signin extends Component{


 onSubmitPressed(){
    this.props.navigator.push({
        title: 'secure Page',
        component: <Payments/>

    });


  };

render() {
return(

 <View style={styles.container}>
<View style={styles.Inputview}>
<TextInput id='user' style={styles.input}
placeholder={'Username'}
/>
<TextInput id='Password' secureTextEntry={true}
placeholder={'Password'}
onChangeText={password => this.setState({password})}
/>
</View>

<View >
 <Button style={styles.Register}  
 onPress={(this.onSubmitPressed)}>
  Sign In
  </Button>
 </View>
 </View>
 )
  }
 }


 export default Signin


If any one let me know how to solve this issue??

Upvotes: 3

Views: 10639

Answers (2)

Nader Dabit
Nader Dabit

Reputation: 53691

You need to set up your Navigator and initial route as the entry point as opposed to a regular component. Try something like this:

(Also set up a working example here)

https://rnplay.org/apps/iKx2_g

class App extends Component {
  renderScene (route, navigator) {
    return <route.component navigator={navigator} />
  }
  render() {
    return (
      <Navigator
        style={styles.container}
        renderScene={this.renderScene.bind(this)}
        initialRoute={{component: SignIn}}  
      />
    );
  }
}

class SignIn extends Component {
  _navigate () {
    this.props.navigator.push({
        component: Payments
    })  
  }
  render () {
    return (
      <View>
        <Text>Hello from SignIn</Text>
        <Button onPress={this._navigate.bind(this)} />
      </View>
    )
  }
}

class Payments extends Component {
    render () {
    return (
      <Text>Hello from Payments</Text>
    )
  }      
}

Upvotes: 7

Aakash Sigdel
Aakash Sigdel

Reputation: 9300

First you need to bind the this to the function onSubmitPressed. And make sure that you have passed navigator object to this component on the renderScene function of the navigator.

// binding this to onSubmitPressed
<Button style={styles.Register}  
   onPress={this.onSubmitPressed.bind(this)}
 >
    Sign In
</Button>

// binding this to on SubmitPressed using arrow function 
<Button style={styles.Register}  
   onPress={() => this.onSubmitPressed()}
 >
    Sign In
</Button>

Upvotes: 5

Related Questions