React Native function being called before onPress-CodePudding

I'm trying to implement google login using firebase and before I even press google button, google sign in function is being called, I can't understand what I did wrong

As soon as I press the button that redirects to registration page, a pop up for google login appears

1 - user choose a user type (tourist, touristic guide)

const TipoUsuario = () => {

  const navigation = useNavigation();

  function redirecionarRegistro(tipoUsuario) {
    navigation.navigate('Registro', { tipoUsuario })
  }

  function redirecionarLogin() {
    navigation.navigate('Login')
  }
  

  return (
    <View style={styles.container}>
      <View style={styles.titulo}>
        <Text>O que você quer fazer?</Text>
      </View>
      <TouchableOpacity onPress={() => redirecionarRegistro(1)}>
        <View style={styles.subcontainer}>
          <Text style={styles.texto}>Sou turista e quero ir a eventos</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => redirecionarRegistro(2)}>
        <View style={styles.subcontainer}>
          <Text style={styles.texto}>
            Sou guia turístico e quero cadastrar meus eventos
          </Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={redirecionarLogin}>
        <View style={styles.subcontainer}>
          <Text style={styles.texto}>Já tenho uma conta, me deixe entrar</Text>
        </View>
      </TouchableOpacity>
    </View>
  )
}

2 - Goes to registration page, where user can choose how to register

Google login appears when this component renders

const Registro = ({ route }) => {

    const { tipoUsuario } = route.params;

    //console.log(tipoUsuario)

    return (
        <>
        <AcessoFormulario tipoUsuario={tipoUsuario} />
        <LoginSocial />
        </>
    )
}

export default Registro;

const LoginSocial = () => {

   const { logado, usuario, loginGoogle } = useAuth();


   // function onGoogleButtonPress() {
   //   loginGoogle()
   //   //console.log('qando sou chamado')
   // }

   return (
     <View style={styles.container}>
       {/* // Facebook */}
       <TouchableOpacity
         style={[styles.buttonContainer, { backgroundColor: "#dae2f1" }]}
       >
         <View style={styles.iconeContainer}>
           <Ionicons name={"logo-facebook"} size={30} color={"#385898"} />
         </View>
         <Text style={[styles.botaoTexto, { color: "#385898" }]}>
           Entrar com Facebook
         </Text>
       </TouchableOpacity>
       {/* // Google */}
       <TouchableOpacity
         onPress={loginGoogle()}
         style={[styles.buttonContainer, { backgroundColor: "#f7d7d4" }]}
       >
         <View style={styles.iconeContainer}>
           <Ionicons name={"logo-google"} size={30} color={"#DB4437"} />
         </View>
         <Text style={[styles.botaoTexto, { color: "#DB4437" }]}>
           Entrar com Google
         </Text>
       </TouchableOpacity>
     </View>
   );
 };



 export default LoginSocial;

CodePudding user response：

You're calling the function here, instead, pass the name:

<TouchableOpacity
  onPress={loginGoogle}
  style={[styles.buttonContainer, { backgroundColor: "#f7d7d4" }]}
>

<TouchableOpacity
  onPress={() => loginGoogle()}
  style={[styles.buttonContainer, { backgroundColor: "#f7d7d4" }]}
>