Title: react-native-maps: How to update user location recieved from remote server periodically
Tags: android;react-native;react-native-maps;mobile-development
Question: I'm very new to react native and somehow I was able to display a map and some markers on it. But I need to read set of locations (coordinates) from a remote server and display on map. In other words, makers need to be change their locations.
I tried a few difference ways, but any of those didn't help. If anyone has previous experience please help.
Following is my existing code.
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Container, Header, Content, Footer, FooterTab, Title, Button, Icon} from 'native-base';
export default class App extends Component<Props&gt; {
constructor(props) {
super(props);
this.state = {
latitude: 6.9212768,
longitude: 79.9610316,
error: null,
friends: [],
};
componentDidMount() {
navigator.geolocation.watchPosition(
(position) =&gt; {
console.log("wokeeey");
console.log(position);
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
//TODO: send user location to server
},
(error) =&gt; this.setState({error: error.message}),
{enableHighAccuracy: false, timeout: 200000, maximumAge: 1000},
);
//API call to get friends
this.setState({
friends: [
{
latitude: 6.9243768,
longitude: 79.9612316,
key: "friend 1"
},
{
latitude: 6.9213768,
longitude: 79.9641316,
key: "friend 2"
}
],
});
render() {
contents = this.state.friends.map((item) =&gt; {
return (
<MapView.Marker
key={item.key}
coordinate={{"latitude": item.latitude, "longitude": item.longitude}}
title={item.key}/&gt;
);
});
return (
<Container&gt;
<MapView
provider={PROVIDER_GOOGLE}
style={styles.container}
showsUserLocation={true}
showsMyLocationButton={true}
zoomEnabled={true}
followsUserLocation={true}
initialRegion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.0158,
longitudeDelta: 0.0070
}}
&gt;
{!!this.state.latitude &amp;&amp; !!this.state.longitude &amp;&amp; <MapView.Marker
coordinate={{"latitude": this.state.latitude, "longitude": this.state.longitude}}
title={"You're here"} pinColor={'#3498db'}
/&gt;}
<View&gt;{contents}</View&gt;
</MapView&gt;
</Container&gt;
);

Here is the accepted answer: You can use the following code to update the user location received from a remote server periodically:
componentDidMount() {
setTimeout(function () {
// add your code for get and update makers every second
}, 1000);

Here is another answer: import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Container, Header, Content, Footer, FooterTab, Title, Button, Icon} from 'native-base';
export default class App extends Component<Props&gt; {
constructor(props) {
super(props);
this.state = {
latitude: 6.9212768,
longitude: 79.9610316,
error: null,
friends: [],
contents: null
};
componentDidMount() {
navigator.geolocation.watchPosition(
(position) =&gt; {
console.log("wokeeey");
console.log(position);
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
//TODO: send user location to server
},
(error) =&gt; this.setState({error: error.message}),
{enableHighAccuracy: false, timeout: 200000, maximumAge: 1000},
);
//API call to get friends
this.setState({
friends: [
{
latitude: 6.9243768,
longitude: 79.9612316,
key: "friend 1"
},
{
latitude: 6.9213768,
longitude: 79.9641316,
key: "friend 2"
}
],
}, () =&gt; this._renderFriends());
_renderFriends() {
const contents = this.state.friends.map((item) =&gt; {
return (
<MapView.Marker
key={item.key}
coordinate={{"latitude": item.latitude, "longitude": item.longitude}}
title={item.key}/&gt;
);
});
this.setState({contents})
render() {
return (
<Container&gt;
<MapView
provider={PROVIDER_GOOGLE}
style={styles.container}
showsUserLocation={true}
showsMyLocationButton={true}
zoomEnabled={true}
followsUserLocation={true}
initialRegion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.0158,
longitudeDelta: 0.0070
}}
&gt;
{!!this.state.latitude &amp;&amp; !!this.state.longitude &amp;&amp; <MapView.Marker
coordinate={{"latitude": this.state.latitude, "longitude": this.state.longitude}}
title={"You're here"} pinColor={'#3498db'}
/&gt;}
<View&gt;{this.state.contents}</View&gt;
</MapView&gt;
</Container&gt;
);
Comment for this answer: Will this code update makers? I need to call to server every second and get locations.
Comment for this answer: I used setTimeout method to update makers with hardcoded values and when `SetState({friends : friends})` method is called, an error is thrown saying **undifened method SetState**
Comment for this answer: I created the function as a class function. Then it worked. Thanks for the help
Comment for this answer: for this you can use `setTimeout`
Comment for this answer: Do this - `componentDidMount() {let that = this ;  setTimeout(function () {  that.setState({}) )  }, 1000); }` @IsuruHerath

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:09/06/18', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<android><react-native><react-native-maps><mobile-development>', 'Title': 'react-native-maps: How to update user location recieved from remote server periodically', 'ViewCount': 3507, 'id': 52209104, 'user_AboutMe': '<p>Undergraduate of Department of Computer Science and Engineering University of Moratuwa.</p>\n', 'user_AccountId': 4020338.0, 'user_DisplayName': 'Isuru Herath', 'user_Reputation': 300.0, 'user_Views': 88.0, 'user_id': 3310923.0}}