Search code examples
androidreact-nativereact-native-maps

FollowsUserLocation not working on Android (react-native-maps)


The map follows the user's location on iOS, but not on Android. The user's location is shown on the map, and the "my location" button also works just fine.

What could be the issue for the Android to not follow location?

<MapView
  style={styles.map, { flex: 1, marginBottom: this.state.marginBottom }}
  onMapReady={this._onMapReady}
  initialRegion={initialRegion}
  showsUserLocation={true}
  followsUserLocation={true}
  showsMyLocationButton={true}
>

react-native-maps: 0.21.0

react: 16.4.1

package.json:

{
  ...
  },
  "dependencies": {
    "@mapbox/polyline": "^1.0.0",
    "@turf/turf": "^5.1.6",
    "axios": "^0.18.0",
    "moment": "^2.22.2",
    "react": "16.4.1",
    "react-moment": "^0.8.3",
    "react-native": "0.56.1",
    "react-native-background-geolocation-android": "git+ssh://[email protected]/transistorsoft/react-native-background-geolocation-android.git",
    "react-native-easy-toast": "^1.1.0",
    "react-native-firebase": "^4.3.8",
    "react-native-iphone-x-helper": "^1.1.0",
    "react-native-maps": "^0.21.0",
    "react-native-navigation": "^2.0.2641",
    "react-native-sound": "^0.10.9",
    "react-native-sound-player": "^0.5.3",
    "react-native-speech": "^0.1.2",
    "react-native-splash-screen": "^3.1.1",
    "react-native-svg": "^7.0.2",
    "react-native-svg-uri": "^1.2.3",
    "react-native-tts": "^2.0.0",
    "react-native-view-overflow": "0.0.3",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^3.4.6"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "23.6.0",
    "react-test-renderer": "16.4.1",
    "redux-devtools-extension": "^2.13.5",
    "remote-redux-devtools": "^0.5.13"
  },
  "jest": {
    "preset": "react-native"
  }
}

Solution

  • I managed to solve this problem following this https://github.com/react-community/react-native-maps/issues/1038#issuecomment-404223242. This is exactly what I wanted to implement. The map follows the user location by default, but will disable following when the map is dragged.

    Then I created a button for the current location following this https://github.com/react-community/react-native-maps/issues/209#issuecomment-350907665. Made the button set followsUserLocation back to true.