Adjust modal size and native-stack onDismissed

[kockok]

I use this package with react-navigation V5.

I suggest to add an option to customize the height of the modal screen.

Besides, I currently use this code to popToTop:

    const unsubscribe = navigation.addListener('dismiss', () => {
      navigation.popToTop();
    });

    return unsubscribe;
  }, [navigation]);

When I swipe down to dismiss the modal, it won't directly popToTop.

I know that this package has a onDismissed prop and I want it to execute navigation.popToTop();.

However, I can't find a way to implement this with createNativeStackNavigator() and errors occur.

[WoLewicki]

As for the height of modal, you can look at #530, and for the events, in 2.10.1, the navigation events were added to native-stack, in #499. Does it solve your issue?

[kockok]

As for the height of modal, you can look at #530, and for the events, in 2.10.1, the navigation events were added to native-stack, in #499. Does it solve your issue?

No, I only want onDismissed to work.

[WoLewicki]

https://github.com/software-mansion/react-native-screens/tree/master/native-stack#dismiss probably this is the name of the event you are looking for.

[kockok]

Yeah I know that...
However, what I want to know is that why native-stack won't accept the onDismissed prop?
What I want is: A(screen)->B(screen)->C(Modal) then swipe down to navigate C(Modal)->A(screen)
But using listeners would like:A(screen)->B(screen)->C(Modal) then C(Modal)->B(screen)->A(Screen).

[WoLewicki]

Because the native-stack does not have such prop. It is a property of a Screen component and is used by native-stack to trigger navigation actions of dismissing a screen and emitting navigation event 'dismiss'. https://github.com/software-mansion/react-native-screens/blob/master/src/native-stack/views/NativeStackView.tsx#L96 you can see that it calls 'pop' action. If you want your own action there, you could overwrite this behavior for e.g. stackPresentation: 'modal'.

[kockok]

@WoLewicki
How to override this function?

            onDismissed={() => {
              navigation.emit({
                type: 'dismiss',
                target: route.key,
              });

              navigation.dispatch({
                ...StackActions.pop(),
                source: route.key,
                target: key,
              });
            }}>

I hope that the maintainers can add an option to customise the ...StackActions.pop() to ...StackActions.popToTop()

[WoLewicki]

Just apply a patch to this file in your node_modules. You can use patch-package.

[kockok]

OK, let me know if ...StackActions could be customized officially.

[WoLewicki]

This behavior won't be changed to what you would want because it would result in every dismiss to pop the whole stack, which does not make sense in most cases.