Blocking navigation (onBeforeNavigate?)

[alexstanbury]

I'd like to be able to block a user leaving a scene if there are unsaved changes. There is no mention of how to do this sort of thing in the docs that I can see, and from digging through the code I can see the onBeforeNavigate prop available when setting up states. But this seems like it's supposed to be set up when the app is initialised, whereas I'd like to be able to define the function that gets called from within the scene itself because that is where I will know what to do depending on the state of the scene.

Is there a preferred way of doing this?

I tried doing

const {stateNavigator} =
    useContext<NavigationEvent<AppNavigation>>(NavigationContext);

  function canLeave() {
    return false;
  }

  useEffect(() => {
    stateNavigator.onBeforeNavigate(() => canLeave());
  }, [stateNavigator]);

But it causes strange glitchy behaviour where the scene is left but then it jumps back to it.

[grahammendick]

Yea, onBeforeNavigate blocks navigation but only if it happens in React first. It can't block navigations that happen on the native side first. So I'm guessing the 'glitchy behaviour' you're seeing is on iOS when you swipe/press back?

[grahammendick]

On Android, you can implement your own BackHandler or use onBeforeNavigate

[FluffyDiscord]

Is there universal option for Android and ios for back handler?

[grahammendick]

@FluffyDiscord Hey there, thanks for getting in touch, what is it you're trying to do?

[FluffyDiscord]

@FluffyDiscord Hey there, thanks for getting in touch, what is it you're trying to do?

I would like to "catch" going back/pressing back on android or ios (swiping?) and conditionally either do something else (for example close modal in react native and deny going back) or do something before going back (but i guess i can use some different hook?)

[grahammendick]

On Android, you can add your own BackHandler.
On iOS, there's no equivalent to the back handler. The swipe happens on the native side and there's no way to call back to the React side (synchronously). You can provide your own back button on iOS to prevent the swipe/back

<NavigationBar>
  <LeftBar>
    {!canLeave() && <BarButton title="Back">}
  </LetfBar>
</NavigationBar>