CODEWITHSUNDEEP
react-nativedictionarymapboxreact-native-mapbox-gl
Atul Raj
Atul Raj

Reputation: 234

React Native mapbox | react-native-mapbox-gl |How to change PointAnnotation Image and Callout is not touchable in Android?

I am trying to change the default Mapbox pin icon on Android as in iOS I'm getting the expected result. Issue

Not able to change PointAnnotation Icon(Using PNG format) Callout image is also not loading(Using PNG format) Not able to click on callout. All the above issues I'm facing in Android only, iOS is working fine.

 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>
    );
  }
}

This is working fine on iOS. iOS Result iOS Expect result - map Android - Issue

Android issue-map

Upvotes: 4

Views: 4174

Answers (2)

Mithsen De Silva
Mithsen De Silva

Reputation: 31

Load image before assigning it to the PointAnnotation.

const [imagesLoaded, setImagesLoaded] = useState(false);

setTimeout(() => {
    setImagesLoaded(true);
}, 500);

const Example = () => {
  render() {
    return (
    {imagesLoaded ? 
        // Your mabox code with PointAnnotation
    :
     <Image
       source={{uri:'https://reactnative.dev/img/tiny_logo.png'}}
       resizeMode={'contain'}
       style={{height: wp('10%'), width: wp('10%'), opacity:0}}
     />
    );
  }
}

Upvotes: 0

Thushal Madhushankha
Thushal Madhushankha

Reputation: 1

const ImageMarker = ({ children }) =>
  Platform.select({
    ios: children,
    android: (
      <Text
      style= {{
    lineHeight: 60, // there is some weird gap, add 40+ pixels
    // backgroundColor: '#dcdcde',
  }}>
    { children }
    < /Text>
  ),
});

<ImageMarker>
  <Image
    source={IMAGE_LINK} 
    style={{width: 45, height: 55}}
  />
</ImageMarker>

Upvotes: 0

Related Questions