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

[jun-nguyen-goldenowl]

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

[ferdicus]

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}
/>

[jun-nguyen-goldenowl]

hi @ferdicus, I've just tested your solution. My app went to crashing all the time until I remove the props renderMode='native' (this prop is for iOS only). Then I tried my solution:

<MapboxGL.UserLocation
  androidRenderMode="compass"
  showsUserHeadingIndicator
  onUpdate={handleUserLocationChange}
/>

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

[ferdicus]

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

[jun-nguyen-goldenowl]

I received this error when trying your solution

[systemlevel]

We were getting this behavior on Android as well. Android Heading not working for us.

[ferdicus]

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

[jun-nguyen-goldenowl]

Much appreciate for that, @ferdicus !

[systemlevel]

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.

[ferdicus]

guys, sorry - I planned to have a look at this, however got bogged down by other tickets....
Will have a look throughout the week

[systemlevel]

@ferdicus Thank you again for looking at this. I'm stumped at the moment. Been testing it on various Android devices with the same result.

[jun-nguyen-goldenowl]

Hope you guys can figure out how to fix this issue

[systemlevel]

No luck on my side yet.

[ferdicus]

hey @jun-nguyen-goldenowl @systemlevel, I've just tested this on the ShowMap example of the /example app in the repo.

  return (
    <TabBarPage
      {...props}
      scrollable
      options={_mapOptions}
      onOptionPress={onMapChange}>
      <MapboxGL.MapView styleURL={styleURL.styleURL} style={sheet.matchParent}>
        <MapboxGL.Camera followZoomLevel={12} followUserLocation />

        <MapboxGL.UserLocation
          renderMode="native"
          androidRenderMode="compass"
          onPress={onUserMarkerPress}
        />
      </MapboxGL.MapView>
    </TabBarPage>
  );

and it works as expected (although I can't judge if the heading is perfectly accurate - in the building)

https://streamable.com/1pv2h2

Can you please provide a simple testcase to force the crash, preferably in the example app without any external dependencies - thanks 🙇

[systemlevel]

@ferdicus Thanks for your testing of this. I'm a bit perplexed about why ours is not using the correct heading.

[ferdicus]

@systemlevel, are you using the native icon or our RN rendering?

[dorthwein]

@systemlevel - We run into the locationComponent red screen with this when using the native icon.

[ferdicus]

I mean, it kinda morphed into two issues by now:
1) heading is not correctly shown on location indicator in "normal" mode
2) native indicator is causing crash

Does anyone have a reliable repro case for the second?

[dorthwein]

@ferdicus - it happens to us in our app consitantly with just a basic map component using native location.

We also use react-native-background-geolocation, so I wonder if there is some conflict between the 2 and the android Location Manager kicking on.

          <MapboxGL.MapView style={{ flex: 1 }}>
            <MapboxGL.UserLocation
              animated={true}
              renderMode="native"
              androidRenderMode="normal"
              showsUserHeadingIndicator={true}
            />
          </MapboxGL.MapView>

[systemlevel]

@ferdicus when I run in native we just get fatal error. Not sure why now:

 E/Mbgl-MapChangeReceiver: Exception in onDidFinishLoadingStyle
    java.lang.NullPointerException: Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.location.LocationComponent.setLocationComponentEnabled(boolean)' on a null object reference

[ferdicus]

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

[jaltin]

Hi all,

I believe that the heading indicator behaving incorrectly in Android is due to the fact that the heading value is incorrectly reporting the course value.

You can see a deeper explanation for this in an issue we created a few weeks back: https://github.com/react-native-mapbox-gl/maps/issues/1213

In short, to fix the incorrect heading a change is needed in the native mapbox Android project. We have created an issue about this in the native android project (https://github.com/mapbox/mapbox-gl-native-android/issues/652).

It would be great if any of you peeps wanting this to be fixed also comment and/or add positive reactions in that issue to increase the chance of it being noticed by the mapbox native maintainers.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.