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

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();

} }