react-native-maps: Markers with custom images are rendered with the wrong size in production

When I render markers with custom images, I noticed that when __DEV__ is false, the image rendered has the same height and width as the file itself. When it’s true, it’s displayed with the proper height and width that I provide.

This happens on both iOS and Android.

Here’s a sample of my code :

            return (
                <MapView.Marker
                  key={`marker-${index}`}
                  coordinate={{ latitude: Number(latitude), longitude: Number(longitude) }}
                  onPress={options.onPress ? () => options.onPress(marker) : false}
                  image={icons[marker.type] || icons.default}
                  style={styles.marker}
                  identifier={marker._id}
                />
            );

export default StyleSheet.create({
    marker: {
        width: 60,
        height: 75
    }
});

And screenshots :

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17

Most upvoted comments

Now, for Android only works with Marker.Animated:

      <Marker.Animated
                identifier={`VagaMarker:${vaga.id}`}
                key={vaga.id}
                coordinate={new AnimatedRegion({
                    latitude: coord[0],
                    longitude: coord[1],
                })}
            >
                <Image
                    source={imageSource}
                    style={{ height: 50, width: 50 }}
                    resizeMode="contain"
                />
            </Marker.Animated>

But now work with normal Marker:

      <Marker
                identifier={`VagaMarker:${vaga.id}`}
                key={vaga.id}
                coordinate={{
                    latitude: coord[0],
                    longitude: coord[1],
                }}
            >
                <Image
                    source={imageSource}
                    style={{ height: 50, width: 50 }}
                    resizeMode="contain"
                />
            </Marker>

No errors, just marker does not appear.

douglasjunior on Feb 19, 2018

I still think this is an issue as the behaviour in dev is different to the behaviour in release…

morrislaptop on Jan 31, 2017

@robmoorman It looks like adding 2x, 3x, 4x images fixed it for us. Still weird that it didn’t happen in dev mode, though. Thanks anyway.

Exilz on Oct 31, 2016

Correctly @mgtitimoli please read React Native’s docs for more information

robmoorman on Nov 1, 2016

@coreyphillips Putting an image inside MapView.Marker works fine but it’s not showing anything on an android emulator with a 26 version apk.

LorandP on Dec 4, 2017

@danielbh I would suggest something similar to the following if adding 2x, 3x etc., doesn’t work for you:

<MapView.Marker
	coordinate={{ latitude, longitude }}
>
	<Image
		source={mySource}
		style={{ height: 22, width: 22 }}
	/>
</MapView.Marker>

coreyphillips on Jul 21, 2017

And also Apple’s docs https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html

@mgtitimoli Yes, you will have to create different versions of your images.

seanislegend on Nov 1, 2016

I also noticed this, but thanks to @robmoorman I realised I didn’t specify @2x in my filename. D’oh. Thanks!

seanislegend on Oct 25, 2016

I can confirm this issue exists, in dev it uses the correct image sizes but in prod it gets the scaling wrong, it also ignores any height and width styles you add to the markers.

invig on Oct 24, 2016