Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

canGoToNextStep is not updated after conditional steps change #24

Open
bryanvanwijk opened this issue Oct 8, 2024 · 0 comments
Open

Comments

@bryanvanwijk
Copy link

@charlotteisambert thank you for this library, we are trying it out but found some unexpected behaviour.
This example flow consists of 2 steps but the last step is conditionally included and can be toggled from the Step1Page

export const FlowNavigatorExample = () => {
  const { step2Enabled } = useAppContext();
  return (
    <FlowNavigator.Navigator>
      <FlowNavigator.Screen name="Step1" component={Step1Page} />
      {step2Enabled && (
        <FlowNavigator.Screen name="Step2" component={Step2Page} />
      )}
    </FlowNavigator.Navigator>
  );
};

On Step1Page we first enable Step2 and then directly after check with canGoToNextStep whether there is a next step to navigate to or we should quite the flow.

import { useFlow } from "@bam.tech/flow-navigator";
import { Button, Text, View } from "react-native";
import { useAppContext } from "./flow";

export const Step1Page = () => {
  const { goToNextStep, canGoToNextStep, quitFlow } = useFlow();
  const { setStep2Enabled, step2Enabled } = useAppContext();

  const goNext = async () => {
    setStep2Enabled(true);

    // canGoToNextStep is not enabled here?
    if (canGoToNextStep) {
      goToNextStep();
    } else {
      console.warn(
        "Should not happen because we enable step 2 first so we can always go to a next step"
      );
      quitflow();
    }
  };

  return (
    <View>
      <Text>Step 2 enabled:{step2Enabled ? "YES" : "NO"}</Text>
      <Button title="Enable step 2 and go to next page" onPress={goNext} />
    </View>
  );
};

Full code example can be found here

We would expect canGoToNextStep in this example to be true because just calling goToNextStep() here actually works. In this case it is a very obvious case where we know within this screen that there should be a next screen so we could also just call goToNextStep() but this might not always be the case. I believe we should always check whether we can go to the next step to not make screens aware of their position. Is there anything we should do differently here to make it work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant