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

Answer 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';