I'm attempting to show a simple loading screen component when the data is connecting to firebase (creating a user, or login in). I have set all the indicators with a useState, although when the loading occurs, the screen doesn't pop up.
My register screen:

export function Register({ navigation }: any) {
  const [showModal, setShowModal] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (isLoading) return <Loading />;
  }, [isLoading]);

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <>
        <Modal
          visible={showModal}
          text={i18n.t('registerModal.title')}
          state="success"
          description={i18n.t('registerModal.description')}
          buttonText={i18n.t('registerModal.goToLogin')}
          navigation={undefined}
          setShowModal={setShowModal}
          onPress={() => {
            navigation.navigate('SignIn');
            setShowModal(false);
          }}
        />
        <Container>
          <ArrowContainer>
            <ArrowTouchable onPress={() => navigation.goBack(null)}>
              <ArrowBack width={24} height={24} />
            </ArrowTouchable>
          </ArrowContainer>

          <TitleContainer>
            <Title>{i18n.t('signup.title')}</Title>
          </TitleContainer>

          <Form setShowModal={setShowModal} setIsLoading={setIsLoading} />

          <TextContainer>
            <Text>{i18n.t('signup.alreadyHaveAccount')}</Text>
            <TouchableText onPress={() => navigation.navigate('SignIn')}>
              <SignUpText>{i18n.t('signup.singIn')}</SignUpText>
            </TouchableText>
          </TextContainer>
        </Container>
      </>
    </TouchableWithoutFeedback>
  );
}

My Form with sets the loading state:

export function Form({ setShowModal, setIsLoading }: any) {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  async function handleUserRegister(data: FormData) {
    setIsLoading(true);

    const incomingData = await registerWithEmailAndPassword(data);

    if (incomingData) {
      setIsLoading(false);
      setShowModal(true);
    }

    setIsLoading(false);
  }

  useEffect(() => {
    ToastShowManagement(i18n.t('signup.error'), errors);
  }, [errors]);

  return (
    <Container>
      <ControlledInput
        name="username"
        control={control}
        icon="at-sign"
        placeholder={i18n.t('signup.username')}
        error={errors.username}
      />
      <ControlledInput
        name="name"
        control={control}
        icon="user"
        placeholder={i18n.t('signup.name')}
        error={errors.name}
      />
      <ControlledInput
        control={control}
        name="email"
        icon="mail"
        placeholder={i18n.t('signup.email')}
        keyboardType="email-address"
        autoCapitalize="none"
        error={errors.email}
      />
      <ControlledInput
        control={control}
        name="password"
        icon="lock"
        placeholder={i18n.t('signup.password')}
        secureTextEntry
        error={errors.password}
      />
      <ControlledInput
        control={control}
        name="passwordConfirmation"
        icon="lock"
        placeholder={i18n.t('signup.confirmPassword')}
        secureTextEntry
        error={errors.passwordConfirmation}
      />
      <PrimaryButton
        text={i18n.t('signup.button')}
        onPress={handleSubmit(handleUserRegister as any)}
        style={{ marginTop: 24 }}
      />
    </Container>
  );
}

CodePudding user response：

The way to apply useEffect is incorrect

  useEffect(() => {
    if (isLoading) return <Loading />;
  }, [isLoading]);

Does not return the element to main thread, the app.js.

You should take away the useEffect hook

export function Register({ navigation }: any) {
  const [showModal, setShowModal] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  if (isLoading) return <Loading />

  return <>...</>;
}