React-native-mapbox-gl: Cannot have two <MapView>'s (latest master branch)

[butchmarshall]

Having a single rendered MapView works fine.

Putting more than one in separate screens seems to cause rendering issues with the second <MapView>.

Here is a video with the first view removed - second view works fine.

Now here is a video of what happens when the first screen has a <MapView>.

This does not occur when installing v5.1.0

[Jose4gg]

Any updates on this, I have the same problem on Android

[butchmarshall]

I worked around it. Before transitioning remove your previous <MapView> instance in componentWillUnmount.

It kind unfortunate as the map disappears during the slide animation.

[Jose4gg]

I will wait for a solution for that or maybe just a good idea about what is happening, this is most need for my app.

[dorthwein]

yeah running into this problem as well ;( Basically makes using this with react-navigation not an option.

[Jose4gg]

@jackfengji I've been seeing you working on this project, Do you know something about this?

[jackfengji]

@Jose4gg @dorthwein Please check this issue #540

The simple solution in JS is what @butchmarshall said. In our app, I use textureMode for some simple maps but normal (surfaceview) mode for complicated maps. I also added a zOrderTop to our forked library. Check the following two commits.
https://github.com/waijule/react-native-mapbox-gl/commit/826bce1e8dbd7a03f979828cadfadd1645b7982f
https://github.com/waijule/react-native-mapbox-gl/commit/3bc79e972f7f31a2e08203627e60865216572fbd

But basically this is a bug in Android's SurfaceView(which mapbox-gl SDK uses). In Android, it's recommended to use different Activity to show screens. That's why it's a problem with react-navigation but not a common issue in original mapbox SDK.

[atarsha]

@jackfengji's code got me just about there, but the value he has for the SurfaceView ID 0x7f0f009f gave me trouble. I replaced that with R.id.surfaceView with success.

[tejasrr19]

@butchmarshall How did you remove the previous instance of MapView in componentWillUnmount()?

[jackfengji]

@tejasrr19 You can just use a bool state to hide the map.

[butchmarshall]

I actually use the router, but yes same idea

render() {
[...]
{(() => {
    if (this.props.navigator.getCurrentRoute().routeName === "map") {
        return (
            <MapView />
        );
    }
})()}
[...]
}

[tejasrr19]

Got it. Thanks @jackfengji @butchmarshall

[nitaliano]

Closing this out as we just merged in our v6 rewrite. If this issue is happening there feel free to reopen.