react-native-maps: MapView.Circle don't update when coordinate changes

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 18 (3 by maintainers)

Most upvoted comments

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

+55

yonahforst on Jun 22, 2016

This looks like it was fixed in #2101

lfkwtz on Sep 6, 2018

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

alvarolorentedev on Feb 10, 2017

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.

felipegarcia92 on Aug 30, 2016

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.

MarcusSjolin on Jun 12, 2016