Login.js

import React, { useState, useEffect, useRef } from "react";
import {
  View,
  Image,
  StyleSheet,
  TextInput,
  Text,
  StatusBar,
  TouchableOpacity,
  AsyncStorage,
  Alert,
  TouchableWithoutFeedback,
  Keyboard
} from "react-native";

import api from "../services/api";

import logo from "../assets/img-login.png";

export default function Login({ navigation }) {
  const pwdRef = useRef(null);

  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");
  const [userLogged, setUserLogged] = useState(false);
  const [user, setUser] = useState({});

  // ENABLE ON PRODUCTION

  async function checkUser() {
    const isUser = await AsyncStorage.getItem('_id');

    return isUser !== null;
  }

  useEffect(() => {
    checkUser()
      .then(() => {
        setUserLogged(true)
      })
      .then(() => {
        if(userLogged) {
          navigation.navigate('TaskList', { name: user.name, _id: user._id })
        }
      })
  }, []);

  // ENABLE ON PRODCTION END

  async function handleSubmit() {
    try {
      const response = await api.get("/sessions", { email });
      let { _id, name } = response.data;
      const firstName = name.replace(/ .*/, "");
      if(_id) {
        await AsyncStorage.setItem('user', JSON.stringify({
          firstName, _id
        }));
        navigation.navigate('TaskList', { name: user.firstName, _id: user._id })
      }
    } catch (error) {
      console.log(error)
      Alert.alert("Wrong email or password");
    }
  }

  function handleFocusPwd() {
    return pwdRef.current.focus()
  }

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" translucent />
        <Image source={logo} />

        <View style={styles.form}>
          <TextInput
            style={styles.input}
            placeholder="email"
            placeholderTextColor="#BCBCBC"
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            onSubmitEditing={handleFocusPwd}
            underlineColorAndroid="transparent"
            value={email}
            onChangeText={setEmail}
            returnKeyType="next"
          />

          <TextInput
            style={styles.input}
            placeholder="password"
            placeholderTextColor="#BCBCBC"
            secureTextEntry
            autoCorrect={false}
            value={pwd}
            onChangeText={setPwd}
            clearTextOnFocus={false}
            underlineColorAndroid="transparent"
            returnKeyType="done"
            ref={pwdRef}
          />
        </View>

        <View style={styles.signupContainer}>
          <Text>No account? </Text>
          <Text
            onPress={() => navigation.navigate("SignUp")}
            style={styles.signup}
          >
            Signup
          </Text>
        </View>

        <TouchableOpacity
          onPress={handleSubmit}
          style={styles.button}
          activeOpacity={0.9}
        >
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    alignItems: "center",
    marginTop: 30
  },

  form: {
    alignSelf: "stretch",
    paddingHorizontal: 30,
    marginTop: 30
  },

  input: {
    backgroundColor: "#EEEEEE",
    borderWidth: 1,
    borderColor: "#fff",
    borderRadius: 5,
    paddingHorizontal: 20,
    fontSize: 18,
    color: "#444",
    marginBottom: 20,
    height: 50
  },

  signupContainer: {
    flexDirection: "row",
    marginLeft: "auto",
    paddingHorizontal: 30
  },

  signup: {
    color: "#1EB36B"
  },

  button: {
    height: 67,
    backgroundColor: "#1EB36B",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    marginTop: "auto",
    alignSelf: "stretch",
    margin: 30
  },

  buttonText: {
    color: "#fff",
    fontSize: 24,
    fontWeight: "bold"
  }
});