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-12T16:56:22.487

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 '17 at 16:56

answered Apr 12 '17 at 16:47

Im Batman

1,842
1
31
48

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`. – A. A. Sebastian Sep 14 '17 at 12:46
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 – Im Batman Sep 15 '17 at 04:04
Well I asked this because in my case it didn't work fully, I had to update the code according to this link also : https://stackoverflow.com/questions/43717456/cant-find-variable-navigate – A. A. Sebastian Sep 15 '17 at 05:38

Shubham Khatri · Answer 2 · 2017-04-12T07:17:02.223

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 '17 at 07:17

answered Apr 12 '17 at 06:39

Shubham Khatri

270,417
55
406
400

1

i did it. im getting `undefined is not an object (evaluating 'this.props.navigation.navigate')` – Im Batman Apr 12 '17 at 06:52
Can you do `console.log(this.props.navigation)` in the _login() method – Shubham Khatri Apr 12 '17 at 06:56
its `undefined.` – Im Batman Apr 12 '17 at 06:58
how do i do that? – Im Batman Apr 12 '17 at 07:15
Can you access this.props in the _login method – Shubham Khatri Apr 12 '17 at 07:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141508/discussion-between-im-batman-and-shubham-khatri). – Im Batman Apr 12 '17 at 07:27
@ShubhamKhatri Can any you give me some guidance on my issue :- https://stackoverflow.com/questions/44362543/cant-find-variable-navigation – user2028 Jun 05 '17 at 07:12
@Siddharth, I had a look at your question, but your problem wasn't very clear to me – Shubham Khatri Jun 05 '17 at 08:12
Hi @ShubhamKhatri , the problem is i am not able to close navigation drawer on button click which lies in SecondScreen.js class , here is the onpress method :- onPress={() => navigation.navigate('DrawerOpen')} – user2028 Jun 05 '17 at 08:25

Can't find variable: navigate - ReactNative navigation

2 Answers2