Why is this a problem now?

iOS 13 has a new default modal presentation of screens called “Sheets” that use a “pull-to-dismiss” behavior. This even works with a contained (nested) ScrollView/FlatList when the user pulls down past the top of the ScrollView content. The gesture can be initiated from anywhere on the screen.

React-native apps can’t mimic this behavior when using ScrollView or FlatList. Users of RN apps will be confused when “pull-to-dismiss” doesn’t work the way they expect.

Why does this problem exist in React Native?

Because the contained ScrollView handles the scroll gesture in all cases. But we want the ScrollView to ignore a swipe down gesture (and only a swipe down gesture) *if and only if* the content position is at y=0.

Hey, the problem is with your implementation, not React Native!

Maybe. But it turns out that lots of smart people have tried to build a good solution to this, and it doesn’t seem to exist. See list of implementations at the end of this post.

Possible solutions

Note: I am not an expert at animations in RN. Perhaps a new DismissableScrollView component with a PanGestureHandler that knows when to apply the gesture to scroll the contained ScrollView/FlatList and when to ignore events. Not sure this is possible, and I don’t know how to build it at this time.

Temporary workaround

Don’t use the new iOS styles. Keep using the old style stack navigator transitions. Our apps will feel old, but they won’t feel broken.

Non-exhaustive list of “pull to dismiss” implementations

These fantastic packages below represent a significant amount of work put in by very smart people. I do not mean to disparage or diminish their work in any way. To the contrary, I am grateful for their work.

https://github.com/react-navigation/stack (the new 2.0 alpha version. note that only the top header is swipable)

https://github.com/osdnk/react-native-reanimated-bottom-sheet (check out the map implementation)

https://github.com/jeremybarbet/react-native-modalize (note that only the top header is swipable)

https://github.com/react-native-community/react-native-modal

there are many, many more.

I’m writing this article because I don’t know how else to report this.