WebRTC video stream rendering issue with Mapbox

[Grimsly]

I am trying to use a combination of react-native-webrtc, react-native-bottom-sheet and rnmapbox. There is a ScrollView in the bottom sheet and I noticed that the video stream viewer from the react-native-webrtc library is visible in the background above the bottom sheet if scrolled too far. Not sure if this could happen to any video component. This issue only happens to Android and not iOS strangely enough.

Here is a screenshot in the iOS 12 simulator:

Here is the screenshot in an Android phone (Samsung S10e):

I used a sheet of white paper on my camera to contrast with the background. You can see in the Android screenshot that there is white sticking out of the bottom sheet when RTCView (the react-native-webrtc component) is scrolled past the top. I suspect the cause of the problem is Mapbox, because once I removed MapView, the stream viewer is not visible above the bottom sheet anymore. I tried setting the MapView surfaceView prop to false and the issue is still there.

I saw the rule, no extra libraries in relation to opening new issues, so I just decided to ask here instead if anyone has experienced this or has used react-native-webrtc with react-native-webrtc before? My @rnmapbox/maps version is 10.0.0-beta.44 by the way.

As far as I know, react-native-webrtc is using a SurfaceViewRenderer from a snapshot of Chromium's WebRTC library.

[mfazekas]

@Grimsly you can try with surfaceView={false} on MapView.

[Grimsly]

I tried that. Still clips through for some reason.