undefined is not an object( evaluating ''_this.props.navigator.push") - react-native

Question

I am trying to navigate to other page when the user login. But i am getting this error and i can't seem to figure out why. I am using working on mac.
I tried using navigatorIOS too, but the problem won't go away. Please help.
import React, { Component } from 'react';
import {AppRegistry,View,Text,Image, StyleSheet,Navigator, AsyncStorage } from 'react-native';
import {
Container,
List,
ListItem,
Content,
Footer,
FooterTab,
Header,
Button,
Icon,
Tabs,
Title,
InputGroup,
Input
} from 'native-base';
import{
Actions,
Scene,
Router
}from 'react-native-router-flux';
import Reg from './Reg'
export default class Log extends Component{
render(){
return(
<Container>
<View style={{alignItems:'center'}}>
<Icon name='ios-contact' style={{fontSize:120}}/>
</View>
<Content style={{flex:1, top:50}}>
<List>
<ListItem>
<InputGroup>
<Icon name='ios-at-outline' style={{color:'#5bc0de'}}/>
<Input
onChangeText={(username) => this.setState({username})}
value={this.state.username} placeholder='Email id' />
</InputGroup>
</ListItem>
<ListItem>
<InputGroup>
<Icon name='ios-lock-outline' style={{color:'#5bc0de'}}/>
<Input onChangeText={(password) => this.setState({password})}
value={this.state.password} placeholder="Password" secureTextEntry />
</InputGroup>
</ListItem>
<Button info style={{alignSelf:'center'}} onPress={this.Log}>
LOGIN
</Button>
</List>
</Content>
</Container>
);
}
constructor(props){
super(props);
this.state = {username: '', password: ''};
console.log();
}
Log = () => {
fetch('http://192.168.0.20:3000/users', {
method : 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
})
})
.then((response) => response.json())
.then((res) => {
if(res.success=== true){
var username = res.message;
AsyncStorage.setItem('username', username);
this.props.navigator.push({
id: 'Ideas'
});
}else {
alert(res.message);
}
})
.done();
}
}

Answer 1

Could you use the navigate to other page
Actions.()
EX:
Actions.dashboard();
if pass any data
Actions.dashboard({id: 'Ideas'});
import React, { Component } from 'react';
import {AppRegistry,View,Text,Image, StyleSheet,Navigator, AsyncStorage } from 'react-native';
import {
Container,
List,
ListItem,
Content,
Footer,
FooterTab,
Header,
Button,
Icon,
Tabs,
Title,
InputGroup,
Input
} from 'native-base';
import{
Actions,
Scene,
Router
}from 'react-native-router-flux';
import Reg from './Reg'
export default class Log extends Component{
render(){
return(
<Container>
<View style={{alignItems:'center'}}>
<Icon name='ios-contact' style={{fontSize:120}}/>
</View>
<Content style={{flex:1, top:50}}>
<List>
<ListItem>
<InputGroup>
<Icon name='ios-at-outline' style={{color:'#5bc0de'}}/>
<Input
onChangeText={(username) => this.setState({username})}
value={this.state.username} placeholder='Email id' />
</InputGroup>
</ListItem>
<ListItem>
<InputGroup>
<Icon name='ios-lock-outline' style={{color:'#5bc0de'}}/>
<Input onChangeText={(password) => this.setState({password})}
value={this.state.password} placeholder="Password" secureTextEntry />
</InputGroup>
</ListItem>
<Button info style={{alignSelf:'center'}} onPress={this.Log}>
LOGIN
</Button>
</List>
</Content>
</Container>
);
}
constructor(props){
super(props);
this.state = {username: '', password: ''};
console.log();
}
Log = () => {
fetch('http://192.168.0.20:3000/users', {
method : 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
})
})
.then((response) => response.json())
.then((res) => {
if(res.success=== true){
var username = res.message;
AsyncStorage.setItem('username', username);
this.props.navigator.push({ // Remove this line
id: 'Ideas' // Remove this line
}); // Remove this line
Actions.<pushComponentName>({id: 'Ideas'}) // Add this line
}else {
alert(res.message);
}
})
.done();
}
}