[ANDROID] tile is stuck but annotations moves

[GuillotJessica]

I've got this trouble here stackoverflow
my map is displayed in a screen with annotations and callout, every thing is working fine except the map who is stuck, the compass moves, everything works but the tile
Callout respond to a stackNavigation which seems to be the problem

[nitaliano]

@GuillotJessica can you post a video? I'm not sure I follow

[GuillotJessica]

Thanks for the help[
gif
Actually I've been looking deeply into the problem and as you can see, it'a mix of mapbox and stacknavigation problem, it seams that everything reload but the map tile but I may be wrong.
Also I can't find much documentation regarding MapBox RaactNative. I push the annotations into an array maybe not the best idea but the one used in the github example. Should I put them into a layer to reduce RAM, I've got no idea about best practices at all
Thanks again

[kristfal]

@GuillotJessica Do you happen to have multiple navigatorScreens with mapbox maps nested within the same stack?

If so, I think its an issue I encountered that I can't fully reproduce. There seems to be an issue where if you run two maps at the same time nested in a StackNavigator, the bottom most map will render at the top of the one in the current stack (while the top map receives touch input), giving it the appearance of being stuck.

This only happens on Android. Could this be your issue?

[GuillotJessica]

Here's my entire navigation
The map displays only in one place
The map is on CommercesScreen

import {TabNavigator, StackNavigator} from "react-navigation";
import ProfilScreen from '../Containers/ProfilScreen'
import ActualiteScreen from '../Containers/ActualiteScreen'
import FideliteScreen from '../Containers/FideliteScreen'
import BonsPlansScreen from '../Containers/BonsPlansScreen'
import CommercesScreen from '../Containers/CommercesScreen'
import CommercePageScreen from '../Containers/CommercePageScreen'

import styles from "./Styles/NavigationStyles";
import IconM2S from 'react-native-vector-icons/Mobile2Store';

const commerceNavigator = StackNavigator({
    CommercesScreen: {
        screen: CommercesScreen,
    },
    CommercePageScreen: {
        screen: CommercePageScreen,
    }
}, {
    headerMode: 'none'
});

const NavigationTab = TabNavigator({
        commerceNavigator: {
            screen: commerceNavigator,
            navigationOptions: {
                tabBarLabel: 'Commerces',
                tabBarIcon: ({tintColor}) => (
                    <IconM2S name="categorieMagasin" size={24} color={tintColor}/>
                ),
            }
        },
        BonsPlansScreen: {
            screen: BonsPlansScreen,
            navigationOptions: {
                tabBarLabel: 'Bons Plans',
                tabBarIcon: ({tintColor}) => (
                    <IconM2S name="categorieBonsPlans" size={24} color={tintColor}/>
                ),
            }
        },
        FideliteScreen: {
            screen: FideliteScreen,
            navigationOptions: {
                tabBarLabel: 'Fidélité',
                tabBarIcon: ({tintColor}) => (
                    <IconM2S name="categorieFidelite" size={24} color={tintColor}/>
                ),
            }
        },
        ActualiteScreen: {
            screen: ActualiteScreen,
            navigationOptions: {
                tabBarLabel: 'Actualités',
                tabBarIcon: ({tintColor}) => (
                    <IconM2S name="list_Marker" size={24} color={tintColor}/>
                ),
            }
        },
        ProfilScreen: {
            screen: ProfilScreen,
            navigationOptions: {
                tabBarLabel: 'Profil',
                tabBarIcon: ({tintColor}) => (
                    <IconM2S name="categorieProfil" size={24} color={tintColor}/>
                ),
            }
        }
    },
    {
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        tabBarOptions: {
            initialRouteName: "CommercesScreen",
            showIcon: true,
            upperCaseLabel: false,
            ...styles,
        },

    }
);


export default NavigationTab;

[GuillotJessica]

Hello, @nitaliano
So what do i do, is there any way I can refresh the map?
Did I miss something?
Is there any more verbose documentation regarding Mapbox the the github one?
Tx, Jessica

[nitaliano]

I believe I know what's happening it could be due to the GLSurfaceView. React Native runs in one Activity on Android, and multiple GLSurfaceViews cannot be placed on top of each other on Android in the same Activity. Something like react-native-navigation or native-navigation would avoid these issues.

One thing I am curious about is what happens if you add a key to your map component that never changes?

[GuillotJessica]

give me a snippet, I'd love to give it a go
KR
Jessica

[GuillotJessica]

Except that the annotations inside theMapboxGL.MapView are still moving

[nitaliano]

@GuillotJessica <MapboxGL.MapView key='test' ... this might reuse the same mapview avoiding having multiple

[kristfal]

Just to chime in, my workaround was to set the underlying map (at the bottom of the stack) to position absolute when an additional map at the top of the navigation stack is shown.

[GuillotJessica]

I only have one map @kristfal and compass, annotation are still working fine

[GuillotJessica]

here's my new versions
"react": "16.0.0",
"react-native": "0.50.4",
same issue
in my case everything zoom, compass, annotations work except the map tile is freeze

[nitaliano]

@GuillotJessica have you tried adding a key to the MapView?

[hernanmateo]

@GuillotJessica @nitaliano I have tried and nothing changes. I'm experiencing a similar issue, in my case I have two distinct maps in a different tabs and the maps are overlapped when I switch between them. This issue is only happening on android and I'm using pure javascript navigator.

[GuillotJessica]

@nitaliano there is no key props possible MapViewDoc send me a snippet and i'll reproduce

[nitaliano]

@GuillotJessica key is a React property https://reactjs.org/docs/lists-and-keys.html

@hernanmateo I would try with what @kristfal suggested, the JS navigator is making the GLSurfaceView's overlap which is not possible on Android

[GuillotJessica]

thx @nitaliano
Here's my code

<MapboxGL.MapView
                    key={"mapId"}
                    ref={(ref) => this.map = ref}
                    style={{height: 600}}

the problem remain

[devstepbcn]

Hello @nitaliano, I just tested this issue using wix/react-native-navigation and the overlapping problem persists.

[GuillotJessica]

@nitaliano any improvements on the way?

[lucasgray]

Just to add some troubleshooting help, I've experienced this issue with react-native-router-flux and was able to remedy by issuing a {type: 'reset'} when transitioning to the map the second time. Not ideal but I was able to make it work with my use case. It's got to be something with the interaction between stack navigation and the MapViews...

[GuillotJessica]

thx @lucasgray just have to find a way to make this work

[hernanmateo]

Hello @nitaliano, any news on this issue? I think it's one of the main problems of this library since it is usual to use multiple maps in an application. Thx

[nitaliano]

@hernanmateo The problem is it needs to be a new activity since two GLSurfaceViews cannot be overlapped on Android. React Native runs in a single activity so when using JS based navigators you're trying to overlay two GLSurfaceViews on top of each other and they battle for z-index and all of the views on top of them just get thrown to the top.

What I would recommend doing especially with the JS based routers, is have one MapView that renders different things based on route

[hernanmateo]

Thank you @nitaliano, in my case I'm not using a JS based navigator but I'm using a native navigator solution and I'm having this issue by switching between two screens with the bottom tab bar. So, we have to assume, in the medium term, that this behavior is going to stay that way?

[nitaliano]

@hernanmateo When you switch between screens is there a way for your screen on the bottom of the stack to null out the map view? Also I just looked at react native navigations code and it is not pushing on an Activity or Fragment in the tab case at least. The bottom GLSurfaceView needs to be removed from the view tree or position absolute off the screen @kristfal mentioned this above #798 (comment)

There is nothing this repo can do until the navigators in react native start handling things the way a real native application would handle them. The best that we can do is write a component on top of MapboxGL.MapView that is able to know if it's not displayed and hide itself

I will try to put together sometime so I add a working demo application with react-navigation and react-native-navigation that has multiple maps in it

[Tennen]

+1. now I render the map in a way like {Platform.OS !== 'android' || isCurrentScreen && (<MapboxGL.MapView />)}.

[hernanmateo]

Hi @nitaliano I have test a couple of workarounds with success but the results don't convince me. How about to enable the TextureMode option and the zOrder setting as @tobrun suggest in this issue?

[hernanmateo]

Hello again,
I have just tested with TextureMode with successful results, I assume that this can penalize performance but let's try...
I have pushed a PR #858, the MapOptions is configured in the RNMGLMapViewManager.java file because we have to set this options before the RNMGLMapView constructor.

Example usage:

<Mapbox.MapView
        ref={(c) => this._map = c}
        [...]
        textureMode={true}
        >

[nitaliano]

@hernanmateo PR will address this issue and we will work on getting it merged in to fix this problem. Multiple TextureViews can be stacked on top of each other, at the cost of performance but I don't expect this to be an issue for majority of the use cases we'll run into on RN. I just checked to make sure we'll keep support for this in future versions of the RN SDK there are plans on it being supported for sure through 5.x.x and 6.x.x SDK versions, so this can be a long term solution.

[nitaliano]

TextureView support has been merged in I'll publish another RC today so I recommend everyone having this issue to try it out it should be fixed

[nitaliano]

6.0.2 is out add textureMode={true} to your MapView and your issues will be fixed