React native dynamically pop and show map markers from server

Question

I need to get marker positions on map position change from the server and reflect this new marker positions on the map. If I put some markers in the state it shows the markers however it doesn't show any marker dynamically. I don't get any error or warnings on the console.

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch, Alert, AppRegistry } from 'react-native';
import MapView from 'react-native-maps';
import Fetchdata from './Fetchdata.js';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default class MyScreen extends Component {
  render() {
    return (
      <View style ={styles.container}>
        <Fetchdata />
      </View>
    );
  }
}

FetchData.js

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert, AppRegistry} from 'react-native'
import MapView, {Marker} from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
export default class Fetchdata extends Component {
  constructor (props) {
    super(props);
  };

  state = {
    latitude: 40.3565,
    longitude: 27.9774,
    markers:[]
  };
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
      });
    },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
   }
   onRegionChange (region) {
       return fetch('https://isg.info.tr/query_maps.php' + '?latitude=' + this.state.latitude + '&longitude=' + this.state.longitude , {method: 'GET'})
        .then((response) => response.json())
        .then((responseJson) => {
          const newState = Object.assign({}, this.state);
          newState.markers.latlng = responseJson;
          newState.latitude = region.latitude;
          newState.longitude = region.longitude;
          this.setState(newState);
          console.log(responseJson);
          })
   };
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                region={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            onRegionChangeComplete={this.onRegionChange.bind(this)}
            >
              {this.state.markers.map(marker => (
                <Marker
                  coordinate={marker.latlng}
                  title={"marker.title"}
                  description={"marker.description"}
                />
              ))}
          </MapView>
      </View>
      );
   }
}

JSON File that is returned by the server

[{"latitude":"40.3565","longitude":"27.9774"},{"latitude":"40.3471","longitude":"27.9598"},{"latitude":"40","longitude":"27.9708"}]

Answer 1

There are a few things going on there that are a problem and should be giving you an error. The problem is that none of those are being triggered because you're using onRegionChangeComplete, but the correct property is just onRegionChange. The errors at that point may get you the rest of the way.

If you get to a point where you've gone through the errors and are still not sure where to go, feel free to ask for more clarification.