Black flicker when opening map on Android

Describe the bug On android when loading the map there is a black flicker when rendering a MapView. You can see this visually on the gif below

To Reproduce Reproduction code:

export class MapComponent extends Component {
    constructor() {
        super()
        this.state = {
            mapIsVisible: false
        }
    }
    showMap = () => {
        this.setState({ mapIsVisible: !this.state.mapIsVisible })
    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: "red" }}>
                <TouchableOpacity style={{ backgroundColor: "green", alignItems: "center", justifyContent: "center", height: 50, width: '100%' }} onPress={this.showMap}>
                    <Text>{this.state.mapIsVisible ? "Hide Map" : "Show Map"}</Text>
                </TouchableOpacity>
                {this.state.mapIsVisible ?
                    <MapboxGL.MapView
                        style={{ flex: 1, }}
                        zoomLevel={11}
                        showsMyLocationButton={true}
                        animated={false}
                    >
                        <MapboxGL.Camera
                            animationDuration={10}
                            animated={false}
                            zoomLevel={11}
                            centerCoordinate={[23.73153880, 37.99280960]}
                        >
                            <MapboxGL.UserLocation visible={true} />
                        </MapboxGL.Camera>

                    </MapboxGL.MapView>
                    : null}</View>
        )
    }
}

Expected behavior No black flickering as it degrades the user experience (edited)

Screenshots

Versions (please complete the following information):

• Platfrom: Android
• Device: [Nexus 5X simulator, Pocophone F1]
• OS: [Android 9 , Android 10]
• SDK Version [28,29]
• React Native Version [0.60.4, 0.61.3]

[dancherb]

@psusmars I just had to ensure that the coloured overlay was in fact rendering above the map before it disappeared, instead of under it (which would have no effect). Maybe make it bright pink while you’re figuring the absolute ordering out to get it on top (i.e. zIndex and order of absolutely positioned components).

[mattijsf]

It’s a known issue: https://github.com/mapbox/mapbox-gl-native/issues/10990

We could expose foregroundLoadColor to react-native to reduce this artifact:

https://docs.mapbox.com/android/api/map-sdk/8.6.1/com/mapbox/mapboxsdk/maps/MapboxMapOptions.html#foregroundLoadColor-int-