react-native-maps markers not displayed on map

Question

My markers won't render on the map. I initially had a stateless functional component but changed to a class to use this.forceUpdate() and it still didn't work. What am I doing wrong? I have tested on both Android and iOS real devices. The map is showing but not the markers. Could it be that the map is appearing on top of the markers, like a zIndex issue? I hardcoded a marker there to be sure the problem isn't with my props.markers

import { StyleSheet } from 'react-native'
import React, { Component } from 'react'
import MapView from 'react-native-maps'
import { connect } from 'react-redux'
import {
  Button,
  Container
} from 'native-base'

import selectMarkers from './markers.selector'

import { updateRegion } from './map.action'
import Icon from 'react-native-vector-icons/FontAwesome'
import { toggleMenu } from '../search-page/searchPage.action'
import mapStyle from './style'

const mapStateToProps = (state) => ({
  region: state.get('map').get('region'),
  markers: selectMarkers(state)
})

const mapDispatchToProps = (dispatch) => ({
  onRegionChange: (region) => {
    dispatch(updateRegion(region))
  },
  onToggleMenuClick: () => {
    dispatch(toggleMenu())
  }
})

class Map extends Component {

  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
    this.forceUpdate()
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render() {
  console.log('map')
  console.log('markers', this.props.markers)
    return (
      <Container>
        <MapView
          style={styles.map}
          region={{
            latitude: this.props.region.latitude,
            longitude: this.props.region.longitude,
            latitudeDelta: this.props.region.latitudeDelta,
            longitudeDelta: this.props.region.longitudeDelta,
          }}
        >
          {
            this.props.markers.map(marker => {
              return (
                <MapView.Marker
                  onLoad={() => this.forceUpdate()}
                  coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                  title={marker.name}
                />
              )
            })}

          <MapView.Marker
            coordinate={{ latitude: 174.7666099, longitude: -36.8457991 }}
            title={"title"}
            description={"description"}
            onLoad={() => this.forceUpdate()}
            key={1}
          />
        </MapView>
        <Button
          small
          icon
          style={mapStyle.toggleMenuButton}
          onPress={() => this.props.onToggleMenuClick()}>
          <Icon name="sliders" size={20} color="#FFFFFF" />
        </Button>
      </Container>
    )
  }
}

Map.contextTypes = {
  store: React.PropTypes.object
}

Map.propTypes = {
  region: React.PropTypes.shape({
    latitude: React.PropTypes.number,
    longitude: React.PropTypes.number,
    latitudeDelta: React.PropTypes.number,
    longitudeDelta: React.PropTypes.number
  }).isRequired,
  onRegionChange: React.PropTypes.func.isRequired,
  onToggleMenuClick: React.PropTypes.func.isRequired,
  markers: React.PropTypes.array
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Map)

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
    zIndex: -1
  }
})

Answer 1

You changed up your latitude and longitude.

latitude: 174.7666099, longitude: -36.8457991 is not a point on the map.

latitude: -36.8457991, longitude: 174.7666099 is a point on the map.