Рендеринг и конструктор в реагирующем упорядочении console.log

Обычно асинхронные вызовы в React помещаются в метод жизненного цикла componentDidMount(), который вызывается сразу после первоначального вызова render(). constructor предназначен для инициализации, т. е. инициализации компонента state, вызова super для любого переданного props, bind методов компонента. Я бы переместил все ваши асинхронные вызовы, включая вызовы navigator и fetchAPI, в componentDidMount и удостоверился, что какой бы state вы ни инициализировали, он не вызовет ошибок в render. Как пишет Тайлер Макгиннис в этом сообщении:

Запросы AJAX должны идти в событии жизненного цикла componentDidMount.

На это есть несколько причин,

Fiber, следующая реализация алгоритма согласования React, будет иметь возможность запускать и останавливать рендеринг по мере необходимости для повышения производительности. Одним из компромиссов этого является то, что componentWillMount, другое событие жизненного цикла, когда может иметь смысл сделать запрос AJAX, будет «недетерминированным». Это означает, что React может начать вызывать componentWillMount в разное время, когда посчитает нужным. Это, очевидно, будет плохой формулой для запросов AJAX.

Вы не можете гарантировать, что запрос AJAX не будет разрешен до монтирования компонента. Если бы это было так, это означало бы, что вы пытаетесь установить состояние на несмонтированном компоненте, что не только не сработает, но и React будет кричать на вас. Выполнение AJAX в componentDidMount гарантирует наличие компонента для обновления.

Вот полностью переработанный пример с использованием componentDidMount и правильной установкой state после разрешения всех асинхронных запросов.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      latitude: 0,
      longitude: 0,
      error: null,
      markers: []
    };
  }

  componentDidMount() {
  
     navigator.geolocation.getCurrentPosition(
      (position) => {
        
        fetch(API_URL)
           .then((response) => response.json())
           .then((responseJson) => {
              var relevantLocations = []
              for (var i = 0; i < responseJson.length; i++) {
                var location = responseJson[i];
                relevantLocations.push({
                  title: location.name,
                  coordinate: {latitude: location.latitude, longitude: 
                    location.longitude},
                  description: "test" + i
                });
              }
             console.log("Setting state");
             this.setState({
                ...this.state
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                markers: relevantLocations
             });
           })
           .catch((error) => {
             console.error(error);
           });

       },
      (error) => this.setState({ ...this.state, error: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
      );

    
  }

  onRegionChange = (region) => {
    this.setState({ region });
  }

  onPress = () => {
  }

  render() {
    console.log(this.state.markers);
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          onRegionChange={this.onRegionChange}
          onPress={this.onPress}
        >
        {this.state.markers.map(marker => {
            return <MapView.Marker
              key={marker}
              coordinate={marker.coordinate}
              title={marker.title}
              description={marker.description}
            />
          })}
        </MapView>
      </View>
    );
  }
}

export default App;