Modal bugs out and reveals view behind when dragging down with gesture

Description

I’m sorry for the title, but I couldn’t find better words to describe this.

When using the native stack navigator to present a screen modally, the screen slides up like a pageSheet or formSheet on iOS. A users reaction might be sliding it back down, which is native behaviour for action sheets in iOS. The problem is, that the screen moves up and shows what’s beneath it.

The weird this is, I cannot reproduce this issue on my iPhone 11 simulator, but it happens every time on my real iPhone 11 Pro device.

Demo

Here’s a demo:

Additional Info

For my NativeStackNavigationOptions in the Parent Stack navigator I am using:

stackPresentation: 'modal',
gestureEnabled: false,

, and the child stack navigator (the screens inside the modal) have the following NativeStackNavigationOptions:

headerShown: true,
headerStyle: {
	backgroundColor: Colors.current.identity,
},
headerTintColor: Colors.current.white,
headerTitleStyle: {
	color: Colors.current.white,
	fontSize: 20,
},

Versions

package.json

...
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-screens": "^2.9.0",
...

[mrousavy]

Also, here’s another demo, seems related:

I don’t know why it flickers here and doesn’t on the other demo, maybe because I’m using SafeAreaView here?

[WoLewicki]

Is the bug from the GIF appearing after applying #712? If so, could you provide a reproduction of this? You can use TestsExample app for it: https://github.com/software-mansion/react-native-screens/tree/master/TestsExample. About the disabling of dragging, I am afraid it is not provided by the platform.