react-native-maps: Custom marker with Image won't render first time on Android

Here’s a workaround that doesn’t require hiding random elements:

class PinMarker extends Component {
  state = {
    initialRender: true
  }
  render() {
    return (
      <MapView.Marker coordinate={coordinate}>
        <Image
          source={...}
          onLayout={() => this.setState({ initialRender: false })}
          key={`${this.state.initialRender}`}
        />
      </MapView.Marker>
    )
  }
}

The idea is to force the <Image /> to re-render after it is loaded the first time.

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

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>

I solved this issue by using the same image again outside the mapViw. but with 0 width and 0 height.

<Image style={{width:0,height:0}} source={ Constants.Images.MarkerImage } /> So that Constants.Images.MarkerImage will load before mapView loads markers.

Hello @AhmedAly86 and @ewein .

I use j-nolan’s solution by changing it a little. Thanks to solutions of gilbox, sators and j-nolan we have workarounds for now.

class PinMarker extends Component {
  state = {
    extraData: false
  }

  componentDidMount () {
    let self = this
    setTimeout(()=>self.setState({ extraData: true }), 100)
  }

  render() {
    return (
      <MapView.Marker coordinate={coordinate}>
        <Image
          source={...}
          key={`${this.state.extraData}`}
        />
      </MapView.Marker>
    )
  }
}

any news on this issue? workarounds didn’t work for me. I even set a this.forceUpdate on a button call and change state and props and images didn’t get rendered.

I need to display image from the internet but had the same problem with Image component I ended up using WebView instead.

<MapView.Marker coordinate={coordinate}>
  <MapView.Callout>
    <View>
      <WebView source={{uri: 'https://...'}} style={{height: 200, width: 200}} />
      <Text>A Building</Text>
    </View>
  </MapView.Callout>
</MapView.Marker>

I have my Custom Marker function and i want to be able to give it a style to my image because it’s original size it’s 200 x 200. I’ve been struggling with this because when i try the image props from MapView.Marker, i can’t resize my image. Can someone share me their temporal fix or their solution to this issue? I’m kind of new in RN , so i’m not able to find a way to make it work on Android. iOS it’s working properly. `

return (
  <MapView.Marker
    key={location._id}
    coordinate={{ latitude: location.geometry.coordinates[0], longitude: location.geometry.coordinates[1] }}
    title={location.name}
    description={location.description}
    style={styles.marker}
    anchor={{ x: 0.20, y: 0.5 }}
  >
    <Image
      source={img_marker}
      style={{ width: 20, height: 20 }} 
    />
  </MapView.Marker>
)

`

@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

Update in your package.json to “react-native-maps”: “^0.22.0”

Any new updates, i’m stacked

@seppemarotta this is my code for custom image marker

<MapView.Marker coordinate={marker.coordinate} image={{uri: marker.icon}}>
  ...
</MapView.Marker>

but as mentioned here, you cannot resize it via style. If you want to control the marker via style you probably should take a look here and here.

<MapView.Marker coordinate={marker.coordinate}>
  <Image
    style={styles.customMarker}
    source={{uri: marker.icon}}
    onLoad={() => this.forceUpdate()}>
      <Text style={{width:0, height:0}}>{Math.random()}</Text>
  </Image>
</MapView.Marker>

https://github.com/airbnb/react-native-maps/issues/882 https://github.com/airbnb/react-native-maps/issues/907

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