Unable to find variable: navigate - ReactNative navigation

Question

I tried to solve this problem in a few days. I want the stacked navigation stack and go to other views. I called this white paper here. https://reactnavigation.org . but I did not succeed. please can someone show me where i am doing wrong.

even this title is also not displayed.

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

Answer 1

He worked after so much research and testing with other reactive codes.

The following code should be a decal in the index.ios.js file. not in Login.js file (im file is used as root)

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

as well as import paths and file navigation

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

Answer 2

You need to get the navigate option from the props, for example 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)); }