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

Question

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 Android - Issue

Answer 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>

Answer 2

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