Maps: [Android] followUserLocation doesn't work

Created on 11 Jul 2019  路  3Comments  路  Source: react-native-mapbox-gl/maps

Describe the bug
Using does not cause android camera to follow

To Reproduce
Create a map view, set camera

Expected behavior
The map's camera should follow my current location.

Screenshots

Versions (please complete the following information):

  • Platfrom: Android
  • Device: Samsung Galaxy Tab A8
  • OS: Android 8.1.0
  • SDK Version 7.0-rc-4
  • React Native Version 0.59.9

Additional context

Most helpful comment

I was able to get rid of the issue by setting the followUserLocation property to a state variable that is false by default. When the map is fully rendered with my current zoom and coordinates, I set the followUserLocation state variable to true. Seems to work well so far.

state = {
    followUserLocation: false,
}
<MapboxGL.MapView
    style={styles.map}
    onDidFinishRenderingMapFully={(r) => {
        this.setState({followUserLocation: true})
    }}
>
<MapboxGL.Camera                        
    zoomLevel={16}
    followZoomLevel={16}
    followUserLocation={this.state.followUserLocation}
    followUserMode={MapboxGL.UserTrackingModes.FollowWithCourse}
/>
</MapboxGL.MapView>

All 3 comments

Adding a general comment here and words of advice then closing issue.

Android is particularly sensitive to when the map moves which can break follow settings. If you having issues around map position, headings, pitches, follow modes, etc... I suggest you start with assessing renders, interactions, and when props could be updating.

Also suggest stripping down an empty map and simplifying your state to make sure what you are running into is actually a bug. As of this writing the library has been going through a lot of changes and what was previous working code had stopped working with an update.

Lastly, using the following callback seems to be essential if you are managing a complex camera state with a follow on/off toggle. Basically, if the map moves, your component props & the underlying camera native props will get out of sync. This allows you to stay in sync.

 onUserTrackingModeChange = event => {
    const followUserLocation = event.nativeEvent.payload.followUserLocation
    const followUserMode = event.nativeEvent.payload.followUserMode
  }

I was able to get rid of the issue by setting the followUserLocation property to a state variable that is false by default. When the map is fully rendered with my current zoom and coordinates, I set the followUserLocation state variable to true. Seems to work well so far.

state = {
    followUserLocation: false,
}
<MapboxGL.MapView
    style={styles.map}
    onDidFinishRenderingMapFully={(r) => {
        this.setState({followUserLocation: true})
    }}
>
<MapboxGL.Camera                        
    zoomLevel={16}
    followZoomLevel={16}
    followUserLocation={this.state.followUserLocation}
    followUserMode={MapboxGL.UserTrackingModes.FollowWithCourse}
/>
</MapboxGL.MapView>

@grant1842 perfect it works thanks!!!

Was this page helpful?
0 / 5 - 0 ratings