I am not able to display images (both from the assets and web) in custom marker callout : the image in callout is always shown as a blank rectangle.
class CustomCalloutView extends React.Component {
render() {
return (
<View>
<View>
<Text style={{
fontWeight: "bold",
}}>
Test
</Text>
</View>
<View>
<Image
source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
style={{ width: 100, height: 100 }}
/>
</View>
</View>
)
}
}
And the main Map component is:
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{this.state.markers.map(marker => (
<Marker
key={marker.id}
coordinate={marker.latlng}>
<Callout>
<CustomCalloutView />
</Callout>
</Marker>
))}
</MapView>);
The marker is correctly shown, and the callout renders, but the image is not shown. The same image works if i use it in a normal view.
I am using expo (expo.io) but also tried emulator and installed APK on the device (android; no info about ios).
Use Image inside Text component. Something like this:
<Text>
<Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" />
</Text>
Another workaround by using WebView. I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With