MapView.Circle don't update when coordinate changes

[yonahforst]

related to #187

I'm rendering my map like so:

                <MapView
                ref='mapView'
                style={{flex: 1}}
                onPress={this._onPress.bind(this)}
                followsUserLocation={true}
                showsCompass={true}
                showsUserLocation={true} >
                    {this.props.onlineUsers.map(u => Marker(u, this.props))}
                    {this.props.selectedUser ? Circle(this.props.selectedUser) : null}
                </MapView>

and corresponding circle class:

const Circle = user => {
    console.log(user.location.coords.longitude)
    return (
    <MapView.Circle
        center={user.location.coords}
        radius={user.location.coords.accuracy}
        strokeColor='transparent'
        fillColor={wRedLighter}/>
    )
}

the logs show that the coordinates are changing. but the circle remains in the same place until i remove it and re-add it.

[MarcusSjolin]

I get the same problem when I try to have a radius in state, and if I have + / - buttons to increase / decrease the radius value I can see it change, however the circle won't change on the map. Seems to not rerender itself when there's a change in props.

[shanedevane]

I have this issue on IOS but not android.

[ecjs]

I actually saw this issue myself a little while ago as well. Only tested this on iOS though.

[XavierColombel]

Same problem here on iOS simulator.

[yonahforst]

The underlying problem is that iOS doesn't re-render an MKOverlay just because its properties change. A simple solution is to cause react to remove and re-add the element when size or position change (you won't able to animate the change, and there will be a slight flicker)

How does react decide if an element should be removed? I tried setting a key that was based on the circles position, hoping that react will think that this is a new element. but that didn't work.

[yonahforst]

Ok, think i've got it. Pretty simple actually, just set the key to be a combination of the Circle's coordinate and radius.

I'm doing something like this:

const Circle = user => {
    return (
    <MapView.Circle
        key={(user.location.coords.longitude + user.location.coords.latitude + user.location.coords.accuracy).toString()}
        center={user.location.coords}
        radius={user.location.coords.accuracy}
        strokeColor='transparent'
        fillColor={wRedLighter}/>
    )
}

but you could also use some md5 or other hashing library to quickly calculate a hash for the entire object.

This causes the key to change every time the coordinates/radius changes, causing react to think it's a new element so the old one gets removed and the new one gets added

[XavierColombel]

Well done!

[ecjs]

Nailed it!

[felipegarcia92]

Thanks, it worked!

However, isn't it a work-around? Shouldn't this issue be opened still? It's expected that a Polygon like this one moves if the position passed as prop is changed.

[alvarolorentedev]

i agree... this seems a workaround. and the change of center should be enough to update.

[yonahforst]

@kanekotic - i'll reopen the issue, incase they want to put in a more permanent fix

[alvarolorentedev]

@yonahforst ok i am forking the repo to see if i can provide any fix for it :)

[NormalAndrew]

Clever workaround! Any permanent fix to this yet?

[neilakoh]

the key thing works like a charm :)

[doniyor2109]

really helped

[unmec]

After twenty minutes debugging, I am glad I found this. :)
Thanks!

[lfkwtz]

This looks like it was fixed in #2101

[rborn]

Closing as per #283 (comment)