I am loading a map with a marker from my API for a single post through the following screen. This code below works perfect, it displays the marker on the map and the mapview circle also appears in the same location as the marker.

The Problem: I want to set the initialRegion as the marker coordinates so that the map is in the proper location where the marker is. I have tried setting the initialRegion latitude and longitude with posts.lat & posts.lng like I did with the mapview circle but this does not work with the initial region.

There is only ONE marker loaded from the API as this is a single post screen

ponentDidMount() {
    this.getPosts();
  }

  getPosts() {
    axios
      .get('myAPI')
      .then(response => {
        this.setState({
          post: response.data,
          loading: false
        });
      });
}

render() {
const posts = (this.state ?? this.state.posts) ? this.state.posts : 
    return (
      <MapView style={styles.map}
              initialRegion={{
                  latitude: 43.660192,
                  longitude: -79.425250,
                  latitudeDelta: 0.04,
                  longitudeDelta: 0.05,
              }}
            >

<MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} />

<MapView.Circle
            center={{
              latitude: posts.lat,
              longitude: posts.lng,
            }}
            radius={150}
            strokeWidth={2}
            strokeColor="#3399ff"
            fillColor="rgba(102,204,153,0.2)"
 />

          </MapView>
);
  }

I am loading a map with a marker from my API for a single post through the following screen. This code below works perfect, it displays the marker on the map and the mapview circle also appears in the same location as the marker.

The Problem: I want to set the initialRegion as the marker coordinates so that the map is in the proper location where the marker is. I have tried setting the initialRegion latitude and longitude with posts.lat & posts.lng like I did with the mapview circle but this does not work with the initial region.

There is only ONE marker loaded from the API as this is a single post screen

ponentDidMount() {
    this.getPosts();
  }

  getPosts() {
    axios
      .get('myAPI')
      .then(response => {
        this.setState({
          post: response.data,
          loading: false
        });
      });
}

render() {
const posts = (this.state ?? this.state.posts) ? this.state.posts : 
    return (
      <MapView style={styles.map}
              initialRegion={{
                  latitude: 43.660192,
                  longitude: -79.425250,
                  latitudeDelta: 0.04,
                  longitudeDelta: 0.05,
              }}
            >

<MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} />

<MapView.Circle
            center={{
              latitude: posts.lat,
              longitude: posts.lng,
            }}
            radius={150}
            strokeWidth={2}
            strokeColor="#3399ff"
            fillColor="rgba(102,204,153,0.2)"
 />

          </MapView>
);
  }

• javascript
• reactjs
• react-native

2 Answers 2

The problem is that currently, your map will render before you've made your API request for the pin coordinates. If this is using react-native-maps, their docs call out that changing initialRegion after initial render will not result in a change to the map:

Changing [the initialRegion] prop after the ponent has mounted will not result in a region change. https://github./react-native-munity/react-native-maps/blob/master/docs/mapview.md

You need to either:

1. wait until you have your API response to render the map, or
2. Render the map with a guesstimate for the initialRegion, and update the map position after your API call has finished and state has updated.

Option 1:

if (this.state.loading) {
  // Better loading logic here
  return <Text>Loading...</Text>
}

return (
  <MapView 
    style={styles.map}
    initialRegion={{
      latitude: posts.lat,
      longitude: posts.lng,
      latitudeDelta: 0.04,
      longitudeDelta: 0.05,
    }}
  >
  </MapView>
);

Second option:

// You need to add region to state.
getPosts() {
    axios
      .get('myAPI')
      .then(response => {
        this.setState({
          post: response.data,
          region: {
            latitude: response.data.lat,
            longitude: response.data.long,
            latitudeDelta: 0.04,
            longitudeDelta: 0.05,
          }
          loading: false
        });
      });
}

render() {
  return (
    <MapView 
      style={styles.map}
      initialRegion={{
        latitude: posts.lat,
        longitude: posts.lng,
        latitudeDelta: 0.04,
        longitudeDelta: 0.05,
      }}
      region={this.state.region}
    >
      ...
    </MapView>
  );
}

Bonus points: you can animate these region changes as well if you use animateToRegion. https://github./react-native-munity/react-native-maps/blob/master/docs/mapview.md#methods

Hope this helps!

I have faced this problem before and I fixed them like this.

First, you should get the remote data before the navigate to the map view.
and you should send the latlng data to the MapView using props or navigation param.

Second, you should set the initialRegion by the passed data.