map.js

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

const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 };

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userLocation: null
    }
  }

  componentDidMount() {
    //this.getUserCurrentLocation();
  }

  componentWillReceiveProps(nextProps) {
    console.tron.log(nextProps);
  }

  getUserCurrentLocation = () => {
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        userLocation: position
      })
    }, null, GEOLOCATION_OPTIONS);
  }

  render() {
    /*if (!this.state.userLocation) {
  return null;
}

const { latitude, longitude } = this.state.userLocation.coords; */

    const latitude = -3.7193092;
    const longitude = -38.5892627;

    const locations = [
      {
        latitude: -3.7193092,
        longitude: -38.5892627
      },
      {
        latitude: -3.719383,
        longitude: -38.5894922
      },
      {
        latitude: -3.7188822,
        longitude: -38.5898311
      },
      {
        latitude: -3.719255,
        longitude: -38.589502
      },
      {
        latitude: -3.719301,
        longitude: -38.589305
      },
      {
        latitude: -3.719371,
        longitude: -38.589116
      },
      {
        latitude: -3.719451,
        longitude: -38.588826
      },
      {
        latitude: -3.719479,
        longitude: -38.588722
      },
      {
        latitude: -3.719395,
        longitude: -38.588954
      }
    ]

    return (
      <View style={styles.container}>
        <MapView
          ref={map => this.mapView = map}
          initialRegion={{
            latitude,
            longitude,
            latitudeDelta: 0.0050,
            longitudeDelta: 0.0100
          }}
          style={styles.map}
          rotateEnabled={false}
          scrollEnabled={false}
          zoomEnabled={false}>
          {
            locations.map((marker, index) => {
              <MapView.Marker
                ref={mark => marker = mark}
                key={index}
                coordinate={{
                  latitude: marker.latitude,
                  longitude: marker.longitude
                }} />
            })
          }
        </MapView>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },

  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

export default Map;