How can I get the login button to navigate to Dashboard?

Question

I have the following code. When I click sign in I want to have some kind of validation, so the username and password field are not empty. If the condition is met, I want to navigate to Dashboard. Below is my code. I tried adding this.props.navigation.navigate('Dashboard) at the end of the login function but is not working. I can't figure out why, I keep getting the error - Device: (62:31) undefined is not an object (evaluating '_this.props.navigation.navigate')

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  StatusBar,
} from "react-native";

import Dashboard from "./Dashboard";

export default class LoginForm extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
    };
  }
  handleUsername = (text) => {
    this.setState({ username: text });
  };

  handlePassword = (text) => {
    this.setState({ password: text });
  };

  login = () => {
    if (this.state.username === "" && this.state.password === "") {
      alert("Please enter username and password to sign in!");
    } else if (this.state.username === "") {
      alert("Please enter username to sign in!");
    } else if (this.state.password === "") {
      alert("Please enter password to sign in!");
    } else {
      this.props.navigation.navigate("Dashboard");
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <TextInput
          placeholder="username"
          placeholderTextColor="rgba(255,255,255,0.5)"
          returnKeyType="next"
          style={styles.input}
          onSubmitEditing={() => this.passwordInput.focus()}
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={this.handleUsername}
        />

        <TextInput
          placeholder="password"
          placeholderTextColor="rgba(255,255,255,0.5)"
          secureTextEntry
          returnKeyType="go"
          style={styles.input}
          maxLength={15}
          ref={(input) => (this.passwordInput = input)}
          onChangeText={this.handlePassword}
        />

        <TouchableOpacity style={styles.buttonContainer} onPress={this.login}>
          <Text style={styles.buttonText}>SIGN IN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingVertical: 70,
  },

  input: {
    height: 50,
    backgroundColor: "rgba(255,255,255,0.2)",
    marginBottom: 15,
    color: "#FFF",
    paddingHorizontal: 10,
  },

  buttonContainer: {
    backgroundColor: "#27ae60",
    paddingVertical: 20,
  },

  buttonText: {
    textAlign: "center",
    color: "#FFFFFF",
    fontWeight: "700",
  },
});

Below is my navigation code

 import React, { Component } from 'react';
 import { createStackNavigator } from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';


 import SignIn from './components/SignIn';
 import ForgotPassword from './components/ForgotPassword';
 import Dashboard from './components/Dashboard'

   const screens = {
   SignIn: {
     screen: SignIn  
    },

   ForgotPassword: {
  screen: ForgotPassword
   },

  Dashboard: {
   screen: Dashboard
   } 
  };

  const config = {
  headerShown: false,
  initialRouteName: 'SignIn'
   }

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

  const HomeStack = createStackNavigator(screens,config);
 const AppContainer = createAppContainer(HomeStack)

Answer 1

Your constructor should look like this:

constructor(props) {
    super(props);
    this.state = {
        username: "",
        password: "",
    };
}

The props argument was missing from the constructor.

Answer 2

It seems like you've either set up react-navigation incorrectly or not at all. The code you posted is the correct way to do it, provided you have followed the set up instructions successfully.