Can't find variable: navigate - ReactNative navigation

Question

i have been trying to solve this problem from few days. i want to impelment navigation stack and navigate to another views. i referred this official document here. https://reactnavigation.org. but im not getting success. please can anyone show me where am i doing wrong.

even this title also not showing up.

static navigationOptions = {
        title: 'Welcome',
      };

Here is my code for Login.js.

import React, { Component } from 'react';

import { Text, View, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView, Image} from 'react-native';

import { StackNavigator } from 'react-navigation';

import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, LinesLoader} from 'react-native-indicator';

var Spinner = require('react-native-spinkit');

import OrderList from './OrderList';

export default class Login extends Component {
    constructor(props){
        super(props);
         this.state = {
            username: '',
            password: '',
            showLoader: false,
            autoCorrect: false,
        }

        this._login = this._login.bind(this);
    }

/** Login Web Service **/
    _login(){
        this.setState({showLoader: true})
        const { username, password, showLoader } = this.state;
        console.log(username);
            let formdata = new FormData();
            formdata.append("username", username)
            formdata.append("password", password)
            formdata.append("device_type", 'I')
            fetch('http://www.URL.com.au/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
            .then(function(response) {
                if(response.status == 200) return response.json();
                else throw new Error('Something went wrong on api server!');

                this.setState({showLoader: false})
            }.bind(this))
            .then(function(response) {
                console.log(response);

                /** NAVIGATE TO  ANOTHER VIEW - but getting cant find variable : navigate **/

                navigate('Home');
                this.setState({showLoader: false})
            }.bind(this))
            .catch(function(error) {
                console.error(error);

                this.setState({showLoader: false})
            }.bind(this));      
    }

    /** Even setting up navigation titile doesnt showup **/
    static navigationOptions = {
        title: 'Welcome',
      };


  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.spinnerContainer}>
                     {this.state.showLoader && <LinesLoader />}
                     {/*<TextLoader text="Please wait" />*/}
                </View>
            <View style={styles.formContainer}>
                <TextInput style={styles.input} placeholder="Username" keyboardType="email-address" autoCapitalize="none" autoCorrect={this.state.autoCorrect} returnKeyType="next"
                onSubmitEditing={() => this.passwordInput.focus()}
                onChangeText={(username) => this.setState({username})}/>

                <TextInput style={styles.input} placeholder="Password" secureTextEntry returnKeyType="go"
                ref={(input) => this.passwordInput = input}
                onChangeText={(password) => this.setState({password})}/>

                <TouchableOpacity style={styles.buttonContainer} onPress={this._login}>
                    <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>

                    </View>

    );
  }
}


const ReactNativeDemo = StackNavigator({
  Login: {screen: Login},
  Home: {screen: OrderList}
});

Im Batman · Accepted Answer · 2017-04-12 16:56:22Z

1

It worked after so much of research and testing with other reactnative codes.

Following Code needed to be decalre on index.ios.js file. not in the Login.js file.(the file im using as a root)

const ReactNativeDemo = StackNavigator({
  Login: {screen: Login},
  Home: {screen: OrderList}
});

and also import of the file path and navigation

import Login from './src/components/main/Login';
import OrderList from './src/components/main/OrderList';
import { StackNavigator } from 'react-navigation';

edited Apr 12, 2017 at 16:56

answered Apr 12, 2017 at 16:47

Im Batman

1,9161 gold badge36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A. A. Sebastian Over a year ago

Hi, has this solve the problem. I implemented the same and still i am getting the same error Can't find variable: navigate. Can you please elaborate the answer what changes have you done in the Login.

Im Batman Over a year ago

It worked for me. just use above code in index.ios.js and my rest of the code same like above in question without StackNavigator part in the bottom

A. A. Sebastian Over a year ago

Well I asked this because in my case it didn't work fully, I had to update the code according to this link also : stackoverflow.com/questions/43717456/…

Shubham Khatri · Accepted Answer · 2017-04-12 07:17:02Z

0

You need to get the navigate option from the props like const {navigate} = this.props.navigation; .Add this to your login method .

/** Login Web Service **/
    _login(){
        const {navigate} = this.props.navigation;
        this.setState({showLoader: true})
        const { username, password, showLoader } = this.state;
        console.log(username);
            let formdata = new FormData();
            formdata.append("username", username)
            formdata.append("password", password)
            formdata.append("device_type", 'I')
            fetch('http://www.URL.com.au/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
            .then(function(response) {
                if(response.status == 200) return response.json();
                else throw new Error('Something went wrong on api server!');

                this.setState({showLoader: false})
            }.bind(this))
            .then(function(response) {
                console.log(response);


                navigate('Home');
                this.setState({showLoader: false})
            }.bind(this))
            .catch(function(error) {
                console.error(error);

                this.setState({showLoader: false})
            }.bind(this));      
    }

edited Apr 12, 2017 at 7:17

answered Apr 12, 2017 at 6:39

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

9 Comments

Im Batman Over a year ago

i did it. im getting undefined is not an object (evaluating 'this.props.navigation.navigate')

Shubham Khatri Over a year ago

Can you do console.log(this.props.navigation) in the _login() method

Im Batman Over a year ago

its undefined.

Im Batman Over a year ago

how do i do that?

Shubham Khatri Over a year ago

Can you access this.props in the _login method

|

Collectives™ on Stack Overflow

Can't find variable: navigate - ReactNative navigation

2 Answers 2

3 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related