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, Jan 30 '19 at 09:05
"expo": "^32.0.0" "react": "16.5.0" "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz" "react-native-maps": "^0.23.0" — Bruno Ripa, Jan 30 '19 at 09:16
This is a known bug with react-native-maps. There is a long-standing issue thread on the repo discussing it — Kai, Jan 30 '19 at 22:03
Have a look, there are a few workarounds: https://github.com/react-native-community/react-native-maps/issues/1870 — Kai, Jan 30 '19 at 22:06
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 ... — Bruno Ripa, Feb 02 '19 at 10:10

Martin Dimitrov · Answer 1 · 2020-08-19T12:30:56.957

8

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>

edited Aug 19 '20 at 12:30

answered Aug 23 '19 at 13:50

Martin Dimitrov

375
4
9

score 2 · Answer 2 · answered Aug 03 '22 at 07:41

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,
},
...
});

React Native Maps and callout with images

2 Answers2

Linked