React-native-screens: Collapsible header / modal swipe gesture on inverted ScrollView

[Hirbod]

If you have a ScrollView with inverted property, the LargeTitleHeader behaves accordingly.

If the ScrollView is set to inverted (often the case with chats where messages appear at the bottom) and the whole thing takes place in a modal, you have to swipe backwards to close the modal. This is not an error in itself, but there should be the possibility or a prop for these cases to explicitly reverse the behavior.

[WoLewicki]

Can you create a repo with the minimal configuration that shows the issue?

[Hirbod]

Just open a modal in native-stack with a <FlatList inverted={true} /> and try to close the modal by swiping down. It wont work, since the direction is reversed. So I need to slide up to move the modal down.

(The FlatList ofc needs to have a height bigger then the viewport)
If also breaks the behaviour of largeHeaderTitle, it will only collapse if scrolled up, not down.

Ideally, rns should take an options key argument for Screen, like "isReversed: true" for that particular screen. Then it should just reverse the gesture directions. down = up and up = down

[Hirbod]

@WoLewicki this is how facebook fixed it for the status bar tab:
https://github.com/facebook/react-native/commit/7a4753d76aab1c52a09f26ec6f7fd43a68da8a97

it would be nice if you guys could also implement it in the same manner so a modal, which contains a inverted Scrollview or FlastList, works as expected (and not reversed)

[berkaey]

Yes, this is a real issue for chat views inside modals on iOS 13. Any suggested workarounds for this type of use case. Do we even stop propagation between nested scroll views?

[berkaey]

@Hirbod did you find any solution?

[Hirbod]

There is no solution currently @berkaey. react-native-screens needs to fix this. I would love to help but my obj-c/ios native development skills are super limited. I think the listener values for the swipe down gesture have to be reversed (or listen for negative)

You can disable the gesture though, but not so nice.

[berkaey]

Can we implement something similar to this https://stackoverflow.com/a/59462475? @WoLewicki Otherwise, we and probably many more can't use native modal patterns in a chat app or something similar. We need a programmatic control of the gesture recognizers somehow.

[WoLewicki]

It might not be possible to change the direction of dragging to dismiss a modal from the native side. If you find an example where it is done on the native side, please share an example.
About disabling the gesture on the modal and the thread from SO you sent @berkaey, you can use RNGH to catch the gesture events. You can look at the gist: https://gist.github.com/WoLewicki/7a6f5ceebc228ad5ac8aaeb7bd5a6a36 where the box takes over the gestures and stops the screen from dismissing.