[Bug]: MarkerView not displayed on Android

[KiwiKilian]

Mapbox Implementation

Mapbox

Mapbox Version

10.9.0

Platform

Android

@rnmapbox/maps version

10.0.0-beta.54

Standalone component to reproduce

This is simply the examples/Annotations/MarkerView.js:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import MapboxGL from '@rnmapbox/maps';
import PropTypes from 'prop-types';

import sheet from '../../styles/sheet';
import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
import Page from '../common/Page';
import Bubble from '../common/Bubble';

const styles = {
  touchableContainer: { borderColor: 'black', borderWidth: 1.0, width: 60 },
  touchable: {
    backgroundColor: 'blue',
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchableText: {
    color: 'white',
    fontWeight: 'bold',
  },
};

const AnnotationContent = ({ title }) => (
  <View style={styles.touchableContainer}>
    <Text>{title}</Text>
    <TouchableOpacity style={styles.touchable}>
      <Text style={styles.touchableText}>Btn</Text>
    </TouchableOpacity>
  </View>
);
AnnotationContent.propTypes = {
  title: PropTypes.string,
};

class ShowMarkerView extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  constructor(props) {
    super(props);

    this.state = {
      backgroundColor: 'blue',
      coordinates: [
        [-73.99155, 40.73581],
        [-73.99155, 40.73681],
      ],
    };
  }

  render() {
    return (
      <Page {...this.props}>
        <MapboxGL.MapView
          ref={(c) => (this._map = c)}
          onPress={this.onPress}
          onDidFinishLoadingMap={this.onDidFinishLoadingMap}
          style={sheet.matchParent}
        >
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={this.state.coordinates[0]}
          />

          <MapboxGL.PointAnnotation
            coordinate={this.state.coordinates[1]}
            id="pt-ann"
          >
            <AnnotationContent title={'this is a point annotation'} />
          </MapboxGL.PointAnnotation>

          <MapboxGL.MarkerView coordinate={this.state.coordinates[0]}>
            <AnnotationContent title={'this is a marker view'} />
          </MapboxGL.MarkerView>
        </MapboxGL.MapView>

        <Bubble>
          <Text>Click to add a point annotation</Text>
        </Bubble>
      </Page>
    );
  }
}

export default ShowMarkerView;

Observed behavior and steps to reproduce

MarkerView is not displayed anymore on Android. I think it has begun between Beta 48 and 49, maybe after 49.

Furthermore allowOverlap, isSelected and anchor are now required props.

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[vadim312]

same here, please Mapbox team

[mfazekas]

Likely caused by mapbox 10.9.0 it seems that it needs androidx.asynclayoutinflater:asynclayoutinflater:1.0.0, but event after adding that marker views seems to be missing.

[vadim312]

any temp solution @mfazekas ?

I need get it running asap

[naftalibeder]

@KiwiKilian Is this the case with this example too?

[KiwiKilian]

Yes, same for this example. Now using Beta 55.

[naftalibeder]

That’s not good! Let me look into this today.

[naftalibeder]

It fails at the transition from d67afdc1222cac3546aa2c0d2e49cdfde1701960 to aba4f337b70fd1f14a8910d6b275ff8eee632941, which is where the Mapbox version gets updated, as @mfazekas said.

I've been looking into it for a while, and I can't see how it's something that we're doing. The best I have is that it's something that's changed with how view annotation layering and visibility are handled (PR and line of code).

Simply downgrading the SDK in build.gradle resolves the issue:

- implementation 'com.mapbox.maps:android:10.9.0'
+ implementation 'com.mapbox.maps:android:10.8.0'

I haven't tested a fresh Android project for lack of time. But I just don't know what else to try.

What do you all think?

[KiwiKilian]

Maybe you could try v10.10.0-beta.1?

If the version change fixes it, it pretty much looks like a upstream bug.

[naftalibeder]

try v10.10.0-beta.1?

I did. :) Doesn't work. Same as 10.9.0.

[vadim312]

It fails at the transition from d67afdc to aba4f33, which is where the Mapbox version gets updated, as @mfazekas said.

I've been looking into it for a while, and I can't see how it's something that we're doing. The best I have is that it's something that's changed with how view annotation layering and visibility are handled (PR and line of code).

Simply downgrading the SDK in build.gradle resolves the issue:

- implementation 'com.mapbox.maps:android:10.9.0'
+ implementation 'com.mapbox.maps:android:10.8.0'

I haven't tested a fresh Android project for lack of time. But I just don't know what else to try.

What do you all think?

Let me try that version android

[vadim312]

@KiwiKilian it's still not working

[naftalibeder]

@vadim312 you changed the line to implementation 'com.mapbox.maps:android:10.8.0' and rebuilt the project?

[vadim312]

Yes, I did, ./gradlew clean && yarn android

[naftalibeder]

@vadim312 make sure you kill the bundler, delete and reinstall node modules, etc. If it still doesn't work, can you try cloning from this commit?

d67afdc1222cac3546aa2c0d2e49cdfde1701960

If that doesn't work, I'm not really sure where to go from there, because that's prior to this upgrade.

[TianFengRL]

It fails at the transition from d67afdc to aba4f33, which is where the Mapbox version gets updated, as @mfazekas said.

I've been looking into it for a while, and I can't see how it's something that we're doing. The best I have is that it's something that's changed with how view annotation layering and visibility are handled (PR and line of code).

Simply downgrading the SDK in build.gradle resolves the issue:

- implementation 'com.mapbox.maps:android:10.9.0'
+ implementation 'com.mapbox.maps:android:10.8.0'

I haven't tested a fresh Android project for lack of time. But I just don't know what else to try.

What do you all think?

Good, it's working!

[vadim312]

@TianFengRL I've tried to change android gradle mapbox version but it didn't work. how did you make it work? appreciate to guide me details. thanks

[TianFengRL]

@vadim312 Using non default mapbox version Add this in your android/build.gradle > buildscript > ext RNMapboxMapsLibs = { // optional - only required if you want to customize it implementation 'com.mapbox.maps:android:10.8.0' implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:6.8.0' }

[vadim312]

Ok, it works but got another issue as map component keeps rerendering

[mfazekas]

I was able to make the MarkerViews show up on 10.9. See #2385

My understating of the cause of the issue is that in mapbox the annotation views parent (container) is a view that should have the same size as the map view itself. (this container is child of the map view). It seems that whatever mechanism used by mapbox to layout the container, doesn't work in ReactNative environment, and it's size is w=0,h=0. So now I'm manually changing the size.

So that issue seems to be fixed, but there is a crash when closing a map view with annotations

 com.mapbox.maps.MapboxViewAnnotationException: Cannot get annotation options for id: '42', it does not exist.
        at com.mapbox.maps.ViewAnnotationManagerImpl.prepareViewAnnotation$lambda-6(ViewAnnotationManagerImpl.kt:563)
        at com.mapbox.maps.ViewAnnotationManagerImpl.$r8$lambda$h-8qPi_VGvrrOLG6FgtIoOywDiM(Unknown Source:0)
        at com.mapbox.maps.ViewAnnotationManagerImpl$$ExternalSyntheticLambda1.onDraw(Unknown Source:6)
        at android.view.ViewTreeObserver.dispatchOnDraw(ViewTreeObserver.java:1132)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:4352)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:4149)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:3309)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2126)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:8653)