React Native Maps and callout with images

Question

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).

Try adding resizeMode: "cover" to your image style and see if it works. — M Reza
"expo": "^32.0.0" "react": "16.5.0" "react-native": "github.com/expo/react-native/archive/sdk-32.0.0.tar.gz" "react-native-maps": "^0.23.0" — Bruno Ripa

Martin Dimitrov Martin Dimitrov · Accepted Answer · 2019-08-23T13:50:57

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>

React Native Maps and callout with images

1 Answers