CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
AbhinayMe
AbhinayMe

Reputation: 2547

How to navigate when the hook state is changed in react native

What I'm trying to achieve is to navigate to another screen based on the API response from a state. I suspect, I'm doing something wrong. I'm learning react native & appreciate the help.

function Signin({navigation}) {

  const [form, setForm] = useState({});
  const [errors, setErrors] = useState({});

  const {
    authDispatch,
    authState: {error, loading, data},
  } = useContext(GlobalContext);

  const onPressLogin = () => {
    signin(form)(authDispatch);
  };

  function gotoVerifyTAC() {
    navigation.navigate(VERIFY_OTP_SCREEN);
  }

  return (
    <View>
      {loading && <LoadingModal loading={loading} size={'large'} />}
      <View>
        {!loading && data?.accessToken && gotoVerifyTAC()}
        <SigninComponent
          onChange={onChange}
          onPressLogin={onPressLogin}
          onPressResetPassword={onPressResetPassword}
          form={form}
          errors={errors}
          error={error}
          loading={loading}
          data={data}
          navigation={navigation}
        />
      </View>
    </View>
  );
}

export default Signin;

Upvotes: 0

Views: 605

Answers (1)

user2037443
user2037443

Reputation: 84

The logic navigation and the checking for successful login should be put in a useEffect, and removed from the function and the render output. Something like this should work

function Signin({navigation}) {

  const [form, setForm] = useState({});
  const [errors, setErrors] = useState({});

  const {
    authDispatch,
    authState: {error, loading, data},
  } = useContext(GlobalContext);

  const onPressLogin = () => {
    signin(form)(authDispatch);
  };

  useEffect(() => {
    if (!loading && data?.accessToken) {
      navigation.navigate(VERIFY_OTP_SCREEN);
    }
  }, [loading, data])

  return (
    <View>
      {loading && <LoadingModal loading={loading} size={'large'} />}
      <View>
        <SigninComponent
          onChange={onChange}
          onPressLogin={onPressLogin}
          onPressResetPassword={onPressResetPassword}
          form={form}
          errors={errors}
          error={error}
          loading={loading}
          data={data}
          navigation={navigation}
        />
      </View>
    </View>
  );
}

export default Signin;

useEffect's are used to handle side effects, i.e. when changes happen to state, like the example with your login and navigation logic.

Upvotes: 1

Related Questions