react native double tap for submit

Question

I want to code a handler for email uniqueness. For that reason i coded function that is below. But when i show the user that "You have to submit unique mail" message. And then the user typed unique email. It has to tap twice to submit button to navigate other page. What is wrong on that code?

Here is the validation function:

  const validateEmailServer = async (mail) => {
    let flag = 0;
    await firebase
      .firestore()
      .collection("Users")
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((documentSnapshot) => {
          if (documentSnapshot.data().email == mail) {
            setvEmailServer(false);
            flag = 1;
          }

          if (flag == 0) {
            setvEmailServer(true);
          }
        });
      })
      .catch((err) => console.log(err));
  };

OnSubmit handler:

const Submit = () => {
    validateEmail(email) ? setvEmail(false) : setvEmail(true);
    validateNickname(nickname) ? setvNickname(false) : setvNickname(true);
    validatePassword(password) ? setvPassword(false) : setvPassword(true);
    validateNicknameServer(nickname);
    validateEmailServer(email);
    if (
      validateEmail(email) &&
      validateNickname(nickname) &&
      validatePassword(password) &&
      vNicknameServer &&
      vEmailServer
    ) {
      navigation.navigate("UserCredential", {
        email: email,
        password: password,
        nickname: nickname,
      });
    }
  };

Answer 1

The state of flag will not persist between function calls. You will need to maintain a state for how many clicks there are.

Assuming you are using functional components, it will look something like this:

const [buttonClicked, setButtonClicked] = React.useState(0);

// when button is clicked
setButtonClicked(buttonClicked++);

// to check how many times it is clicked
if (buttonClicked === 2) { ... }