Login.js

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Button,
  TextInput,
  TouchableOpacity,
  Alert
} from "react-native";
import { Auth } from "aws-amplify";

class Login extends React.Component {
  state = {
    email: "",
    password: ""
  };

  handleSubmit = async () => {
    try {
      await Auth.signIn(this.state.email, this.state.password);
      this.props.auth.setAuthenticated(true);
    } catch (error) {
      Alert.alert("Error logging in", error, { text: "OK" });
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder="Email"
          autoCapitalize="none"
          autoCorrect={false}
          keyboardType="email-address"
          textContentType="username"
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="password"
          secureTextEntry
          onChangeText={password => this.setState({ password })}
          value={this.state.password}
        />
        <View style={styles.buttonContainer}>
          <Button title="Login" color="#fff" onPress={this.handleSubmit} />
        </View>

        <View style={styles.loginContainer}>
          <Text style={{ fontSize: 16 }}>No account? </Text>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate("Signup");
            }}
          >
            <Text
              style={{ color: "orangered", fontWeight: "bold", fontSize: 16 }}
            >
              Sign up
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  input: {
    height: 60,
    width: 300,
    borderColor: "#cacaca",
    borderWidth: 1,
    padding: 16,
    fontSize: 18,
    marginBottom: 16
  },
  buttonContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: 48,
    width: 300,
    backgroundColor: "dodgerblue"
  },
  loginContainer: {
    display: "flex",
    flexDirection: "row",
    width: 300,
    marginTop: 16,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default Login;