Estoy usando firebase en una aplicación nativa de reacción junto con el control giratorio de 'react-native-loading-spinner-overlay' . Estoy tratando de mostrar la rueda giratoria mientras el usuario se está autenticando en Firebase, pero la rueda giratoria no aparece. Esta es la función que maneja a un usuario que intenta autenticarse:
const [spinnerState, setSpinnerState] = useState(false) ... const handleAuthenticationAttempt = () => { if (emailStatus == false || passwordStatus == false) { Alert.alert( "ERROR", "Something went wrong... Please make sure you have inserted all data correctly.", [{ text: "OK", style: "ok", }]) } else { const auth = getAuth(app); setSpinnerState(true) signInWithEmailAndPassword(auth, email, password) .then(() => { setSpinnerState(false) console.log("success") }) .catch((error) => { Alert.alert( "ERROR", "Something went wrong... Please check the email and password you entered is correct: " + error.code, [{ text: "OK", style: "ok", }]) }) } }Este es mi renderizado:
<View style={styles.container}> <Spinner visible={spinnerState} textContent={'Loading...'} textStyle={{ color: 'rgb(200, 200, 200)' }} /> <View style={styles.containerSvg}> <LinearBackground /> </View> <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <View style={styles.containerAlign}> // OTHER INPUTS <ButtonAction onPress={handleAuthenticationAttempt} text={'LOGIN'} backgroundColor='rgba(20, 120, 160, 0.6)' /> </View> </TouchableWithoutFeedback> </View>En teoría esto debería funcionar pero no es así. Cambié la ubicación de la rueda giratoria varias veces, pero parece que nunca aparece. ¿Alguna idea sobre lo que está pasando?
EDITAR: incluso cuando se usa setTimeout, la rueda giratoria nunca aparece.
Lo arreglé, tuve que usar el renderizado condicional, lo cual es bastante extraño considerando otros ejemplos de refrigerios que usan lo que había trabajado anteriormente.
{loadingStatus && <Spinner visible={true} textContent={'Loading...'} textStyle={{ color: '#FFF' }} /> }