maps: MarkerView, PointAnnotation & Callout doesn't render points on Android, works fine on iOS.

Describe the bug I am using Mapbox to display Point on the map and using Callout to show additional information. It’s working fine in iOS but I’m not able to see the same in android. I can see the points and Callout is working fine but didn’t render anything on the Android device.

To Reproduce Example:

import React from 'react';
import {
  View,
  Image,
} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

const currentLatLng = [
    [-74.00597, 40.71427]
  ];

class BugReportExample extends React.Component {
  render() {
    return (
    View style={{flex: 1}}>
        <MapboxGL.MapView
          ref={c => (this._map = c)}
          logoEnabled={false}
          style={{flex: 1}}>
          <MapboxGL.Camera
            ref={c => (this.camera = c)}
            zoomLevel={14}
            centerCoordinate={currentLatLng}
          />
          {/* User location */}
          <MapboxGL.PointAnnotation
            key={'9090'}
            ref={ref => (this.userAnnotationRef = ref)}
            id={'9090'}
            coordinate={currentLatLng}
            title="">
            <View style={{ width: 45,height: 45,alignItems: 'center',justifyContent: 'center',overflow: 'hidden',}}>
              <Image
                source={{uri:'https://reactnative.dev/img/tiny_logo.png'}}
                resizeMode={'contain'}
                style={{height: wp('10%'), width: wp('10%')}}
               onLoad={() => this.userAnnotationRef.refresh()}
              />
            </View>
            <MapboxGL.Callout title={'You'} />
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>
      </View>
    );
  }
}

Expected behavior It should work the same on Android devices as well.

Screenshots iOS working example - IMG_B07D11B83B52-1

Versions:

Platform: Android
Device: Redmi 7s
Emulator/ Simulator: no
OS: Android 9 Pie
react-native-mapbox-gl Version ^8.1.0-rc.2
React Native Version 0.62.2

Edit: Updated code with onLoad/Refresh

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 34 (10 by maintainers)

Most upvoted comments

Hi guys, this issue still happening on 8.5.0, is there any outlook when this will be fixed or even will it be fixed at all ? I’ve used react-native-svg but that also seems to have problems sometimes and doesn’t render correctly all the time.

adoniscoder on Jan 20, 2022

Look into this. Maybe it’ll give you an alternative way to do it. Let me know if it helps @raazatul7 https://medium.com/javascript-in-plain-english/mark-a-coordinate-on-mapbox-map-in-react-native-5d21c71ed46e

I am using the same code from examples
 <MapboxGL.PointAnnotation
        id={id}
        coordinate={coordinate}
        title={title}
        ref={(ref) => (this.annotationRef = ref)}>
        <View style={styles.annotationContainer}>
          <Image
            source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
            style={{width: 45, height: 45}}
            onLoad={() => this.annotationRef.refresh()}
          />
        </View>
        <MapboxGL.Callout title="This is a sample" />
      </MapboxGL.PointAnnotation>
But the image is not loading in my project but when I run the example app it works. Don’t know what’s wrong in this, it’s not working on android.
Hi @raazatul7 , this code working on android 7 below versions.
Thanks for the information mate!
@raazatul7 any update this issue? Thanks in advance.

No, Still same issue, not able to change pin icon, using the default one. Also, no image is rendering on custom callouts in android only.

raazatul7 on Oct 8, 2020

How can I change the Callout image, since the custom Image is not loading? @ferdicus Also, custom View in Callout is not showing images and are not touchable! All these issues are in Android, iOS is working fine.

Hi @raazatul7, I am also facing the same issue. If the resolve the issue can you please help me.
Thanks in advance.

udaysagartammina on Sep 24, 2020

How can I change the Callout image, since the custom Image is not loading? @ferdicus Also, custom View in Callout is not showing images and are not touchable! All these issues are in Android, iOS is working fine.

raazatul7 on Sep 24, 2020

@raazatul7, you probably saw the issue template - please edit the description and fill out all mandatory points. You expect voluntary devs to look at your issue, please take the time to fill out the required info.

Thanks 🙇

ferdicus on Sep 4, 2020