this.props.navigation.navigate is not working

Question

I'm trying to navigate from 'Home' to 'Welcome' page in react native. I using createStackNavigator and createAppContainer.I had an issue binding this to the navigator function. When I resolved it,the error is gone.However it's not navigating from home to welcome.Please help find the issue.Do I need to import Rootstack into all other files? Thanks

App.js

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './screens/Home';
import Welcome from './screens/Welcome';

const RootStack = createStackNavigator(
  {
    home: Home,
    dashBoard:Welcome

  },
  {
    initialRouteParams: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Home:
import * as React from "react";
import { Image, StyleSheet, View,Text } from "react-native";
import imageLogo from "../assets/images/logo.jpg";
import Button from "../components/Button";
import FormTextInput from "../components/FormTextInput";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Welcome from '../screens/Welcome';

class App extends React.Component{
    constructor(){
        super();
        this.handleLoginPress= this.handleLoginPress.bind(this);
    }

handleLoginPress = ()=>{
    this.props.navigation.navigate('dashboard');
}


    render(){
        return (
        <>
            <View style={styles.cont}>
                <Image source={imageLogo} style={styles.logo}/>
            </View>
            <View style={styles.cont1}>

                <FormTextInput
                value={this.state.email}
                onChangeText={this.handleEmailChange}
                placeholder='email'
                />

                <FormTextInput
                value={this.state.password}
                onChangeText={this.handlePasswordChange}
                placeholder='password'
                />

                <Button label='login' onPress={this.handleLoginPress}/>

            </View>

</>
        );
    }
}
const styles = StyleSheet.create({
    logoContainer:{
        alignItems:'center'
    },

  logo: {
    width:120,
      height:120,

  },
  form: {
    flex: 1,
    justifyContent: "center",
    alignItems:'center'
  },
  backgroundContainer:{
      flex:2,
      width:null,
      height:null,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#F5FCFF'
  },
  cont:{
  flex:1,
  backgroundColor:'white',
   justifyContent: "center",
      alignItems:'center'
  },
  cont1:{
    flex:2,
    backgroundColor:'white',
    justifyContent: "center",
          alignItems:'center'
    }
});

export default App;

Answer 1

Prefer This Demo Code:

  class First Screen extends React.Component {
      render() {
        const { navigate } = this.props.navigation;

        return (
          <View>
            <Text>This is the First screen of the app</Text>
            <Button
              on Press={() => navigate('Second ', { name: 'Demo' })}
              title="Go to next page"
            />
          </View>
        );
      }
    }

Answer 2

The problem lied in name of the screen. It was different from the one declared in App.js

Answer 3

No, you cannot rebind arrow functions. You cannot use bind to change the value of this inside an arrow function.

use

constructor(){
        super();
    }

handleLoginPress = ()=>{
    this.props.navigation.navigate('dashboard');
}

or

However, you can use regular function that does the same thing as the arrow function and then use bind

constructor(){
            super();
            this.handleLoginPress= this.handleLoginPress.bind(this);
        }

    handleLoginPress(){
        this.props.navigation.navigate('dashboard');
    }