bamlab / bamlab/flow-navigator
`canGoToNextStep` is not updated after conditional steps change
- Dominant language
- TypeScript
- Stars
- 47
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
@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 (
{step2Enabled && (
)}
);
};
```
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 (
Step 2 enabled:{step2Enabled ? "YES" : "NO"}
);
};
```
Full code example can be found [here](https://github.com/bryanvanwijk/flow-navigator-example)
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?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the useFlow implementation and the canGoToNextStep value, then reproduce the conditional-step example from the issue and its linked flow-navigator-example project. Trace what happens after setStep2Enabled(true); done means canGoToNextStep reflects the newly included step before the navigation check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100