React Native Maps and callout with images
10,725
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>
Author by
Bruno Ripa
Software architect with several years experience in multiple languages (Python, Go, Elixir, Javascript), living in London, and working as an Elixir consultant at the moment.
Updated on July 01, 2022Comments
-
Bruno Ripa almost 2 years
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).