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

Question

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??

Answer 1

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

Answer 2

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>