question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: MarkerView not displayed on Android

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:19 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
naftalibedercommented, Nov 3, 2022

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

1reaction
naftalibedercommented, Nov 3, 2022

try v10.10.0-beta.1?

I did. 😃 Doesn’t work. Same as 10.9.0.

Read more comments on GitHub >

github_iconTop Results From Across the Web

MarkerView & PointAnnotation doesn't work on Android #993
Describe the bug Within my map, I need to mark a single coordinate. I have tried using PointAnnotations but it only worked in...
Read more >
MarkerView is not showing up using MPAndroidChart
Your MarkerView is not showing because you have not highlighted any entry in your chart. The MarkerView is only displayed for entries that ......
Read more >
Advanced Markers (beta) | Maps JavaScript API
Sets the AdvancedMarkerView 's position. An AdvancedMarkerView may be constructed without a position, but will not be displayed until its position is provided...
Read more >
Mark a Coordinate on Mapbox Map in React Native
In Android, the child React Native View is captured into a static image and then displayed. So, for instance, you cannot place a...
Read more >
rnmapbox/Lobby - Gitter
MarkerView > is not showing following methods ... MarkerView> in android ... Is this a bug or is there something that i'll have...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found