Several points on the screen when using the router proper

[dnlsilva]

In my application I need to show the location of the current user, that's all.

However when using the prop router, if the user within a fixed position, it works normally Exemple:

But if the user moves, it will create several points on the screen, instead of deleting the last and following the user's location. Exemple:

I'm using fake GPS to simulate the user's location.

I tried using the UserLocation prop, but it did not work.

Code: `class MapaPontoUnico extends Component {

state = {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0922 * (width / height),
    zoom: 1,
}

componentDidMount() {
    setTimeout(() => {
        watchId = navigator.geolocation.watchPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    latitudeDelta: 0.0922,
                    longitudeDelta: position.coords.longitude,
                })
            },
            (error) => this.setState(),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 }
        )
    }, 1000)
    navigator.geolocation.getCurrentPosition(
        (position) => {
            this.setState({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                latitudeDelta: 0.0922,
                longitudeDelta: position.coords.longitude,
            })
        },
        (error) => this.setState(),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 }
    )
}

componentWillUnmount() {
    navigator.geolocation.clearWatch(watchId);
    navigator.geolocation.stopObserving();
}

render() {
    let region = {
        latitude: this.state.latitude,
        longitude: this.state.longitude,
        latitudeDelta: this.state.latitudeDelta,
        longitudeDelta: this.state.longitudeDelta * (width / height)
    };
    return (
        <View style={{ flex: 1, backgroundColor: "#eeefe3" }}>
            <MapView
                ref="map"
                zoom={this.state.zoom}
                multiTouchControls
                style={{
                    flex: 1
                }}
                region={region}
                router={{
                    titleA: "Minha localização",
                    coordinates: [{
                        latitude: parseFloat(this.state.latitude),
                        longitude: parseFloat(this.state.longitude),
                    }]
                }}

            />
            <View style={{ position: "absolute", bottom: "10%", alignItems: "center", width: "100%" }}>
                <TouchableOpacity onPress={() => { this.setState({ zoom: this.state.zoom + 1 }) }} style={{ backgroundColor: "#7f9928", borderRadius: 2 }}>
                    <Text numberOfLines={1} style={{ color: "#eeefe3", marginLeft: 15, marginRight: 15, marginTop: 15, marginBottom: 15, }}>REGISTRAR PONTO</Text>
                </TouchableOpacity>
            </View>
        </View>

    );
}

} `

[enieber]

In this case, the current location of the user is not using the props router you need add showUserLocation props in the project, but this props is not implemented in the project. PRs is welcome