maps: [Android] - MapboxGL.UserLocation has wrong heading indicator

Describe the bug MapboxGL.UserLocation with showsUserHeadingIndicator enabled on Android device shows up wrong heading direction and randomly change the heading to unexpected direction

I have got into the same trouble with this guy on Stackoverflow. https://stackoverflow.com/questions/63575092/showsuserheadingindicator-not-changing-direction-on-android

To Reproduce

Example:

        <MapboxGL.MapView
          ref={(ref) => { _map = ref || _map }}
          logoEnabled={false}
          onLongPress={({ geometry }) => addAnnotation(geometry.coordinates[0], geometry.coordinates[1])}
          onPress={handleSelectTrack}
          onRegionWillChange={handleMapRegionChange}
          onDidFinishLoadingMap={handleFinishLoadMap}
        >
          <MapboxGL.Camera
            ref={(ref) => {
              if (ref) {
                _camera = ref
              }
            }}
            centerCoordinate={initialCoords}
            zoomLevel={7}
            minZoomLevel={0}
            maxZoomLevel={18}
            followUserLocation={isLogging}
            followZoomLevel={18}
          />
           <MapboxGL.UserLocation
              showsUserHeadingIndicator
              onUpdate={handleUserLocationChange}
           />
        </MapboxGL.MapView>

Expected behavior User location heading indicator behavior looks like Google maps: Show correct heading indicator.

Screen recording Here is my screen recording for my app which is compared to Google Maps: https://drive.google.com/file/d/1ATnxoBICc_iOnRGrDacIp3ieP46xuDyx/view?usp=sharing

Versions:

Platform: Android
Device: Xiaomi Redmi K30 4G (Poco X2)
Emulator/ Simulator: No
OS: Android 10
react-native-mapbox-gl Version: 8.1.0-rc5
React Native Version 0.63.3

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 24 (17 by maintainers)

Most upvoted comments

I guess that seems to be related to this issue :S https://github.com/react-native-mapbox-gl/maps/issues/344

I’ll have a look on Friday to figure out what’s going on

ferdicus on Oct 13, 2020

For everyone having a crash when using renderMode="native", make sure, your Camera component has followUserLocation set, like so:

<MapView style={styles.mapView}>
  <Camera followUserLocation />
  <UserLocation renderMode='native' androidRenderMode='compass' />
</MapView>

Seems to be the magic sauce.

See discussion in #1167

ferdicus on Jan 22, 2021

To clarify our behavior, we get the same behavior as the video you created/shared (https://drive.google.com/file/d/1ATnxoBICc_iOnRGrDacIp3ieP46xuDyx/view?usp=sharing). The heading coming from the location manager is incorrect for some reason. It will flip from North to South and doesn’t seem to represent the Android device’s heading accurately.

iOS works fine.

systemlevel on Oct 14, 2020

renderMode='native' (this prop is for iOS only)

What makes you think that?

androidRenderMode will have no impact without renderMode set to native.

Feel free to check the source for implementation details

ferdicus on Oct 23, 2020

hey @jun-nguyen-goldenowl, thanks for opening the ticket (also thanks for following the template). Can you try and report back what happens when you change it to this:

<MapboxGL.UserLocation
  renderMode='native'
  androidRenderMode='compass'
  onUpdate={handleUserLocationChange}
/>

ferdicus on Oct 13, 2020