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

Butterbur

Try adding resizeMode: "cover" to your image style and see if it works. – Eadwina

Does not work :/ – Butterbur

are you using the latest maps version? – Eadwina

"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" – Butterbur

Does it work with a local static image? – Eadwina

No, no images are shown in custom callouts. – Butterbur

This is a known bug with react-native-maps. There is a long-standing issue thread on the repo discussing it – Usia

Have a look, there are a few workarounds: github.com/react-native-community/react-native-maps/issues/1870 – Usia

Ok, there's nothing to do, other than switching to WebView in the Callout. This also causes differences in visual rendering between iOS and Android, but still ... – Butterbur

Answer 1

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>

Bernardabernardi

Answer 2

Positioning the <Image/> was a bit challenge in the custom Callout for Android. It's a bit mystery for Android, IMHO. Especially, with the trick to display it by wrapping around Text. Looks like, it affects the styling, too. I've had to figure out monotonously the https://reactnative.dev/docs/image#resizemode with this "fix" along with some custom styling what works, pff.

I've ended up with 2 different styles, one for Android, one for iOS.

{Platform.OS === "android" ? <Text style={styles.imageWrapperAndroid}>
  <Image
    resizeMode="cover"
    source={
      event.imageUrl
        ? { uri: event.imageUrl }
        : require("../assets/images/no-image.jpeg")
      }
    style={styles.imageAndroid}
  />
</Text> : <Image
  source={
    event.imageUrl
      ? { uri: event.imageUrl }
      : require("../assets/images/no-image.jpeg")
    }
  style={styles.imageIOS}
/>}
...
const styles = StyleSheet.create({
imageAndroid: {
  height: 200,
  width: 330,
},
imageIOS: {
  height: "50%",
  width: "100%",
},
imageWrapperAndroid: {
  height: 200,
  flex: 1,
  marginTop: -85,
  width: 330,
},
...
});

Patrilocal