Maps: Black flicker when opening map on Android

[Dkokkonas]

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]

[ferdicus]

Hey, thanks for the report.
Did you notice the same on a physical device?
Emulator is known to be janky with mapbox.

[Dkokkonas]

Yes I have seen on all physical devices that I have tested it .

[ferdicus]

hmm, there isn't much we can do on our end here though. Rendering is handled upstream in mapbox-gl-native. Might want to investigate there.

Workaround could be to display an overlay that disappears once the map has fully loaded.
Check out the callbacks on MapView.

[Dkokkonas]

OK I'll give a try your workaround and let you know . Thanks for the quick response.

[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-

[ferdicus]

Ok, but that would simply give one the option to change the flicker color from black to something else, if I understood it correctly, right?

Definitively a good ticket though :)

Closing this and opening a ticket instead.

[Return-1]

The above suggestion works fine.

Workaround could be to display an overlay that disappears once the map has fully loaded.
Check out the callbacks on MapView.

However i wonder if something else is going on on my and @Dkokkonas side as this feels like an issue that would be reported a lot more since it's such a big hit to the user experience of an otherwise smooth map solution. The lack of reporting on this makes me wonder..

[ferdicus]

It's the initial map view without the tiles being loaded in. I guess, that's just the way it is 🤷‍♂.
You can simulate it by setting styleUrl on MapView to an empty string.
The map will stay black without any tiles.

[dancherb]

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-

Just popping up to say I'd apprceciate this! (but don't know my way around linking to native code) @mattijsf

[dancherb]

hmm, there isn't much we can do on our end here though. Rendering is handled upstream in mapbox-gl-native. Might want to investigate there.

Workaround could be to display an overlay that disappears once the map has fully loaded.
Check out the callbacks on MapView.

The above suggestion works fine.

This works great on my side - remember to check your absolute ordering 😁

I also had issues with this - all of onDidFinishLoadingMap, onDidFinishRenderingFrameFully and onDidFinishRenderingMapFully fired prematurely and some black screen still appeared after my overlay was told to disappear. I could add some arbitrary time on the overlay to hang around after the signal, but this doesn't feel ideal.

[psusmars]

hmm, there isn't much we can do on our end here though. Rendering is handled upstream in mapbox-gl-native. Might want to investigate there.
Workaround could be to display an overlay that disappears once the map has fully loaded.
Check out the callbacks on MapView.

The above suggestion works fine.

This works great on my side - remember to check your absolute ordering

~I also had issues with this - all of onDidFinishLoadingMap, onDidFinishRenderingFrameFully and onDidFinishRenderingMapFully fired prematurely and some black screen still appeared after my overlay was told to disappear. I could add some arbitrary time on the overlay to hang around after the signal, but this doesn't feel ideal.~

@dancherb Would you be able to clarify the "absolute ordering" you did to resolve the issue? I'm having a similar problem with my application

[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).

[Return-1]

Ok, but that would simply give one the option to change the flicker color from black to something else, if I understood it correctly, right?

Definitively a good ticket though :)

Closing this and opening a ticket instead.

Is there a ticket we can follow somewhere after all : ) ?

Thanks a bunch, current workaround with overlay works as well but a bit messy