Custom marker icons are too big on release

[damianmarek]

I have a problem with custom markers.
When I use them in dev mode everything is ok, but when I build my app for release, then out of nowhere markers are about 2/3 times bigger and look very bad. I think it's not it is supposed to work. I also attach code responsible for markers

  <MapView.Marker
  key={key}
  image={stopMarker}
  anchor={{ x: 0.5, y: 0.5 }}
  coordinate={{ latitude: stop.lat, longitude: stop.lon }}
  title={stop.name}
  />

[amitv87]

+1 have the same issue

[crilleengvall]

Got the same problem. Found this issue that seems to contain a workaround
#882

Haven't had the time to test it yet.

[shukerullah]

I have same issue too.

[keithics]

it's August.. im still waiting for the fix.

[crilleengvall]

Finally had the time to play around more with React native and this plugin.
I only tested using one custom marker image which resulted in different size when building for a release. When adding the rest of the images (@2x and @3x) the markers hade the same size in dev and release-mode.

http://facebook.github.io/react-native/releases/0.45/docs/images.html#images
https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

Edit:I linked to the apple docs. But this works with React native on Android as well.

[esamattis]

This workaround works for this issue too: #924 (comment)

Here's what I'm currently using

class PinImage extends React.Component {
    render() {
        return (
            <View>
                <Image
                    onLoad={() => this.forceUpdate()}
                    resizeMode="contain"
                    source={this.props.source}
                    style={{
                        width: 50,
                        height: 50,
                    }}
                />
                <Text
                    style={{
                        width: 0,
                        height: 0,
                    }}
                >
                    {Math.random()}
                </Text>
            </View>
        );
    }
}

[alvelig]

You must use @2x, @3x https://facebook.github.io/react-native/docs/images.html.

Otherwise try putting image in a View within the Marker. (I know there's a bug on Android #1518, we are working on that)

[joelbowen]

@alvelig I do not think this is correct.

RN convention is to use @2x and @3x not @x2 or @X3. (https://facebook.github.io/react-native/docs/images.html)

On trying your solution it simply breaks the packager even using my 2x/3x images so what I get is the original icon at its original size. This means while it is not "oversized" it also does not have the correct density and therefore has aliasing.

I think this issue should be re-opened.

[alvelig]

@joelbowen excuse me please, you are right about @2x and @3x. Edited my comment. But this definitely solves this particular issue.

As far as this issue is concerned, if you use <Marker><Image src...></Marker> you can have one image for all densities, and that will solve it for iOS. For Android there's an open issue #100.

If you see a different problem in your case, I kindly welcome you to open a new issue according to the template and we will surely find a solution for that.

Maybe you should delete your ios/build folder and rebuild from scratch? @2x, @3x work perfectly for different densities.

[minhphung210]

image @2x @3x not working for me
<Marker>
<Image source={Image} />
</Marker

not work on android

[chriisduran]

Getting same problem

[parthasarathi95]

still same issue