Custom marker with Image won't render first time on Android

[henrikra]

When making custom MapView.Marker with children as prop to Marker like this:

<MapView.Marker coordinate={coordinate}>
  <View source={styles.container}>
    <Image source={require('./my-image.png')} style={style.icon}>
    // other stuff here
  </View>
</MapView.Marker>

It does not render image on first render time on Android.

But if i use Marker's image prop like this:

<MapView.Marker coordinate={coordinate} image={require('./my-image.png')}>
  <View source={styles.container}>
  // other stuff here
</MapView.Marker>

It does render on first time on Android too.

But I cant use second option because I have to set custom size to the image via styles. So either would be nice to be:

1. able to style image which is passed by image prop OR
2. fix bug where image won't render on first try.

Also note that in order to notice the first render bug you have to actually TURN OFF the app and then back on. :) Tell me if you experience this too

[norbajunior]

I'm having the same issue. I have also tried to pass the image as a prop to MapView.Marker however compromised the styles.

[gilbox]

I believe it's happening for the same reason as the bug exhibited here:

#814

... the image is loaded async and when it's "ready" nothing forces an update. The reason this happens is because on Android custom markers are rendered by generating a bitmap. But when the image gets loaded nothing triggers the re-generation of the bitmap. The only thing that ever triggers the bitmap to regenerate currently is when there is a change in the view hierarchy.

[henrikra]

Okay so is there is hacky fix to this at the moment? :D

[gilbox]

@henrikra you could try forcing a view hierarchy change in the Image component's onLoad prop. The way I forced a view hierarchy change is by having some hidden text that changes value: https://github.com/airbnb/react-native-maps/pull/814/files#diff-36881e0ead965fdaf7cdcadb269a42cfR103

[bfarrgaynor]

#882
#907

[bfarrgaynor]

This issue has been reported a bunch of times recently. Definitely a bug being experienced by everyone.

[Jazz747]

Yeap, could this be a priority to fix since it has a big impact on the user experience?

[gilbox]

You're welcome to fix it @Jazz747 ... like most commits to this particular repo, things improve when someone steps up to the plate. We currently use the workaround I mentioned since it's difficult to fix this bug.

[Jazz747]

I'd like to but I have nowhere near experience and knowledge to try it since I've just started coding :/ @gilbox could you elaborate on how to "force a view hierarchy" in this particular case to get all custom markers displayed for the first time the app's started?

[gilbox]

@Jazz747 I mean something other than your marker has to change in order to trigger your marker to render again. Here is a concrete example of that ... when something else changes, it means that a component will re-render. The marker in question should be part of that view hierarchy, iow the marker should be in that component, or a descendent of that component.

[Jazz747]

Yes, figured it out in the meantime :) calling state to switch a simple boolean variable linked to the markers to trigger the re-render. I've put it in componentDidMount() and it works. I'll try to pull the code and dig into it to try to better understand the complete mechanics of the render,

[vinceyuan]

I can reproduce this issue on both emulator and real devices.

[sators]

Using @gilbox's idea of having a hidden element that changes using the image's onLoad, here's a hack that works - onLoad force a reload of the component which regenerates a random number in the hidden text element...BARF! ...but works! Need a fix!

<Image source={pin} onLoad={() => this.forceUpdate()}>
     <Text style={{width:0, height:0}}>{Math.random()}</Text>
</Image>