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

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