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

Question

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?

Paulson

Answer 1

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

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

Aludel

Does it really work, have you tried it? – Accession

yes,i tried it and its working fine – Aludel

It doesn't make sense but it actually worked! – Ewer

Answer 2

This was a better solution for me, instead of using an Image inside a Text, use the package react-native-svg as explained in this discussion: https://github.com/react-native-maps/react-native-maps/issues/2633#issuecomment-734327144

      Import {Svg, Image as ImageSvg} from 'react-native-svg';

         <Svg width={240} height={120}>
                 <ImageSvg
                     width={'100%'} 
                     height={'100%'}
                     preserveAspectRatio="xMidYMid slice"
                     href={{ uri: 'http://lorempixel.com/400/200/'}}
                 />
             </Svg>

Knighthood

It worked well thank you. – Testator

Answer 3

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

Didache

Answer 4

Doc

import { WebView } from 'react-native-webview';

If const isAndroid = Platform.OS === 'android'; is true render a WebView... if not render a Image.

Roberson

Could you please add the code in a code brackets for a better reading experience. Welcome to SO :) – Upshot