title: latlng cannot be null -a position is required
body: <pre><code>import {Container,Header, Item, Input, Icon, Button, Left, Right, Content, Footer, FooterTab, Body, Title, Text } from 'native-base';
  import MapView from 'react-native-maps';
  import React, { Component } from 'react';
  import {AppRegistry,StyleSheet,View,Dimensions} from 'react-native';
  
  const { width, height } = Dimensions.get('window')
  const ASPECT_RATIO = width / height;
  const LATITUDE = 51.023033;
  const LONGITUDE = 10.3621663;
  const LATITUDE_DELTA = 0.0922;
  const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
  
  export default class Shop extends Component {
  
  constructor(props) {
      super(props);
  
      this.state = {
          initialPosition: {
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.042,
  
          },
          makerPosition: {
              latitude: 37.78825,
              longtitude: -122.4324,
          }
      }
  }
  watchID: ?number = null
  
  componentDidMount() {
  
      navigator.geolocation.getCurrentPosition(
          (position) =&gt; {
              var lat = parseFloat(position.coords.latitude)
              var longi = parseFloat(position.coords.longitude)
              var initialRegion = {
                  latitude: lat,
                  longitude: longi,
                  longitudeDelta: LONGITUDE_DELTA,
                  latitudeDelta: LATITUDE_DELTA
              }
              this.setState({ initialPosition: initialRegion })
              this.setState({ makerPosition: initialRegion })
          },
          (error) =&gt; alert(JSON.stringify(error)),
          { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 })
  
      this.watchID = navigator.geolocation.watchPosition((position) =&gt; {
  
          var lat = parseFloat(position.coords.latitude)
          var long = parseFloat(position.coords.longitude)
          var lastRegion = {
              latitude: lat,
              longitude: long,
              longitudeDelta: LONGITUDE_DELTA,
              latitudeDelta: LATITUDE_DELTA
  
          }
          this.setState({ initialPosition: lastRegion })
          this.setState({ makerPosition: lastRegion })
      })
  }
  componentWillUnmount() {
      navigator.geolocation.clearWatch(this.watchID)
  }
  
  render() {
      return (
          &lt;Container&gt;
              &lt;Header searchBar rounded&gt;
                  &lt;Item&gt;
                      &lt;Icon name="ios-search" /&gt;
                      &lt;Input placeholder="Search" /&gt;
                      &lt;Icon name="ios-people" /&gt;
                  &lt;/Item&gt;
                  &lt;Button transparent&gt;
                      &lt;Text&gt;Search&lt;/Text&gt;
                  &lt;/Button&gt;
              &lt;/Header&gt;
              &lt;View style={styles.container}&gt;
                  &lt;MapView
                      showsUserLocation={true}
                      style={styles.map}
                      region={this.state.initialPosition}&gt;
                      &lt;MapView.Marker coordinate={this.state.markerPosition}&gt;
                          &lt;View style={styles.radius}&gt;
                              &lt;View style={styles.marker}&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/MapView.Marker&gt;
                  &lt;/MapView&gt;
              &lt;/View&gt;
              &lt;View&gt;
  
              &lt;/View&gt;
          &lt;/Container&gt;
  
      );
  }
  }
  
  const styles = StyleSheet.create({
      radius: {
          height: 50,
          width: 50,
          borderRadius: 50 / 2,
          overflow: 'hidden',
          backgroundColor: 'rgba(10,122,255,0.1)',
          borderWidth: 1,
          borderColor: 'rgba(0,122,255,0.3)',
          alignItems: 'center',
          justifyContent: 'center'
      },
      marker: {
          height: 20,
          width: 20,
          borderWidth: 3,
          overflow: 'hidden',
          backgroundColor: 'red',
          borderColor: 'white',
          borderRadius: 20 / 2
      },
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#2c3e50',
      },
  
      map:
      {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          position: 'absolute'
      },
  
  });
  AppRegistry.registerComponent('Shop', () =&gt; Shop);
  </code></pre>
  
  <p>This is the code and it seems to be getting error in latlang is null. Help me to fix this. I run this with using a android phone, I already add location permission in the AndroidManifest.</p>
  
  <pre><code>&lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2z4C4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2z4C4.png" alt="Error"></a></p>