Hey there! Let's troubleshoot why your app is displaying the wrong location even though you're dynamically fetching the user's position. I've looked over your App.js code and here are the most common causes and solutions:

1. Check Location Permissions Configuration #

First off, React Native requires explicit permission setup on both iOS and Android to access device location. If permissions aren't properly declared, the geolocation API might fall back to a default mock location (like Google's HQ in SF).

iOS Setup #

Add these entries to your Info.plist file:

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location to show your current position on the map</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need access to your location to show your current position on the map</string>

Use the first entry if your app only needs location while in the foreground; add both if you need background location access.

Android Setup #

Add these permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

For Android 10+, if you need background location, add this too:

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

2. Debug Geolocation Errors #

Your code has an error alert for getCurrentPosition, but it might not be triggering or you might miss it. Let's enhance the error handling to log details to the console:

(error) => {
  console.log('Geolocation Error:', error);
  alert(`Failed to get location: ${error.message}`);
}

Also, add error handling to your watchPosition call—right now it's missing one:

this.watchID = navigator.geolocation.watchPosition(
  (position) => {
    // Existing position handling code
  },
  (error) => {
    console.log('Watch Position Error:', error);
  },
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 1000 }
);

Common errors here include permission denial or timeout, which would leave your state stuck with initial values (though 0,0 is near Africa, not SF—so this is probably not the main issue).

3. Check Simulator/Device Location Settings #

This is the most common culprit! Most mobile simulators default to Google's headquarters in San Francisco.

• iOS Simulator: Go to Debug > Location in the menu bar. Select "Custom Location" and enter New York's coordinates (40.7128, -74.0060).
• Android Emulator: Open the Extended Controls (the three dots on the side), go to the Location tab, input New York's coordinates, and click "Send".
• Physical Device: Make sure location services are turned on, and your app has been granted location access in the device settings.

4. Optimize Your Location Code #

A few tweaks to make your code more reliable:

• Combine duplicate setState calls to avoid unnecessary re-renders:

// Replace two separate setState calls with one
this.setState({
  initialPosition: initialRegion,
  markerPosition: initialRegion
});

• Fix the watchID declaration (Flow syntax isn't needed unless you're using Flow in your project):

// Instead of watchID: ?number = null;
watchID = null;

• Log the fetched coordinates to confirm they're correct:

console.log('Fetched Coordinates:', lat, long);

If the logged coordinates are New York's but the map still shows SF, double-check that MapView's region and Marker's coordinate are correctly using the state values.

内容的提问来源于stack exchange，提问作者nomchomp