Custom Markers does not update after props change on Android

[levelasquez]

Hi everyone,

I'm having an issue on Android where the custom marker does not update after its props have change.

When i press the marker, its marked like selected and vice versa. Then its backgroundColor changes to identify that it has beed selected or not. This is working fine on iOS - Mapkit but on Android - Google Map does not update the change.

On Android - Google Map. Does not update the change.

On iOS - Mapkit works perfectly. This is the expected behavior.

Here is my code.

State and method

state = {
    selected: [],
  }

toggleSelect(id) {
    this.state.selected.indexOf(id) > -1
      ? this.setState({ selected: this.state.selected.filter(x => x !== id) })
      : this.setState({ selected: this.state.selected.concat(id) })
  }

MapView Component

<MapView
                style={styles.contentTabView}
                initialRegion={{
                  latitude: -33.447984,
                  longitude: -70.659059,
                  latitudeDelta: 0.0922,
                  longitudeDelta: 0.0421,
                }}
              >
                {data.map(x =>
                  <MapView.Marker
                    key={x._id}
                    coordinate={{
                      longitude: x.location.coordinates[0],
                      latitude: x.location.coordinates[1],
                    }}
                    title={x.name}
                    centerOffset={{ x: 0, y: -20 }}
                    onPress={() => !(x.origin || x.destination) && this.toggleSelect(x._id)}
                  >

                    <Pin
                      pinStyle='pinIcon'
                      sourceIcon={x.clasification.icon}
                      id={x._id}
                      selected={selected}
                      origin={x.origin}
                      destination={x.destination}
                      color={x.timePeriod.color}
                    />
                  </MapView.Marker>
                )}
              </MapView>

Custom Marker Component

<View style={styles[pinStyle].container}>
        <View style={[
          styles[pinStyle].wrapper,
          wrapperColor,
          isSelected(id, selected) && styles[pinStyle].pointSelected,
          (origin || destination) && styles[pinStyle].pointSelected,
        ]}>
          <View style={styles[pinStyle].inner}>
            {type === 'icon'
              ? <IconAwesome
                style={styles[pinStyle].icon}
                name={sourceIcon ? sourceIcon : 'plane'}
              />
              : <Image
                style={styles[pinStyle].image}
                source={{ uri: sourceImg }}
              />}
          </View>
        </View>
      </View>

Helper function

export const isSelected = (_id, selected) => selected.indexOf(_id) > -1 ? true : false

Tell me if you need more details.
Thanks.

[dogcity]

There's a solution?

[nschurmann]

+1, same here!!

[chrismcleod]

Android seems to be relying only on the key to change in order to update the custom marker. When you re-render try changing your key. This works for me:

<MapView.Marker
  key={ `${marker.id}${Date.now()}` }
  coordinate={ marker }
>
  <CustomMarker marker={marker}>
</MapView.Marker>

[levelasquez]

@chrismcleod This works, not exactly how i expected but works, thanks 👍

This is the code.

key={Platform.select({
    android: selected.includes(x._id || x.provisory_id)
        ? `${x._id || x.provisory_id}${Date.now()}`
        : x._id || x.provisory_id,
    ios: x._id || x.provisory_id,
})}

When i click on the market it re-render how i expected but then it hides the infowindow.

[Stophface]

@chrismcleod livesaver!

[Cosmitar]

Nice bug :( let's hack everything a little more to find a workaround.

When i click on the market it re-render how i expected but then it hides the infowindow.

I ran into the same issue. Solved this way:

<MapView.Marker
    coordinate={ position }
    key={`${x._id}${isSelected(x._id) ? '-selected' : ''}`} // <-- updates only selected (and deselected) marker
    identifier={x._id} // <-- we need this to invoke showCallout
    ref={(ref) => this._markers[x._id] = ref} // <-- store ref
    onPress={this._onPressMarker}
>

onPressMarker(e) {
  setTimeout(() => // sadly, we need timeout to make this command run in next cycle, after map updates.
    this._markers[e.nativeEvent.id].showCallout()
    , 0);
}

[khuongdv]

Hi there. Any stable solution for this?
So far I did try these:

• Set dynamic key to Markers like @chrismcleod did
• Create custom pin (according to some guy in other issue)

But I still got issue that markers don't show on first load.

[zigakerec]

@khuongdv I have a similar problem with pins not rendering on the first load, did you found any solutions regarding this?

[nikodemrafalski]

To me, not setting key prop of MapView.Marker solved disappearing markers.
Just pass an id prop (docs list it). No `Math.random() or Date() magic, just some meaningful identifier.

[stianjensen]

Just pass an id prop (docs list it).

Do you mean the property called identifier, listed in the table here?

[nikodemrafalski]

Ok, probably my suggestion isn't worth anything, I was referring to https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md where Marker type is defined.
So probably the fact I'm providing id isn't changing anything. But still I decided not to use key and for now, it solved issued in my app

[DerekPark]

I used the Date.now() as suggested by @chrismcleod in key={ ${marker.id}${Date.now()} }, but I found it caused a huge performance loss, instead I used the value the marker update depends on to change the key, and that worked well. In my case I wanted to update marker colors so I used: key={ ${key}${marker[key].color} }

[dmitryshelomanov]

@DerekPark i used similar solution. Uniq id + isActive state

[Balasnest]

Date.now() cause a huge performance loss. It re-creates the marker instead of re-render every time.

[zaidraddad94]

      tracksViewChanges={true}

use this in the marker

[dmitryshelomanov]

      tracksViewChanges={true}

use this in the marker

For android it does not work
It seems

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[shehrozsheikh]

Android seems to be relying only on the key to change in order to update the custom marker. When you re-render try changing your key. This works for me:

<MapView.Marker
  key={ `${marker.id}${Date.now()}` }
  coordinate={ marker }
>
  <CustomMarker marker={marker}>
</MapView.Marker>

@chrismcleod you're a hero, man!!

[moneszarrugh]

Strangely this issue is happening to me on ios (google maps) but not on android. Changing the key did fix it for me though.