react native - Image not showing on custom callout in mapview?

Viewed 872

I have a map screen with markers, I try to add image to the callout and I use same method of <image source = .. /> as I did in other place that works, but on the map it wont show me the picture.


 {
        this.state.markers.map(marker => (
          
          <MapView.Marker
            key={marker.id}
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}>
              <MapView.Callout>
                <View>
                      <View>
                        {marker.imageUri && <Image source = {{uri: marker.imageUri}}
                        style = {{ width: '90%', height: 100, justifyContent: 'center', flex: 1, alignContent: 'center', resizeMode: 'stretch'}}
                      />  }        
                      </View>
                    <Text>Lat: {marker.latitude}, Lon: {marker.longitude}</Text>
                    <Text>{marker.email}</Text>
                </View>
              </MapView.Callout>         
          </MapView.Marker>
        ))
      }

it gives me a blank view instead of the image. Have I done any mistake?

3 Answers

Use Image inside Text component,It is strange but it works :)

<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>

I fixed it by using a webView for android: const Img = isAndroid ? WebView: Image; return <Img source={{uri: someUri}} />

Related