Maps: [QUESTION] Is there a way to display the direction arrow on UserLocation ?

[tinmar33]

I need to display the user direction on his location (without moving the camera).
Is there a way to do that ? I can't find anything on the Readme

Here's an example:

Thanks

[RichardLindhout]

We need this pull request: https://github.com/react-native-mapbox-gl/maps/pull/215
In this thread you will find a way to enable this on Android https://github.com/react-native-mapbox-gl/maps/issues/319

[ethaqnix]

While waiting for the feature, you can display a custom icon, get phone orientation of your phone with magnetometer and rotate the icon :

<MapboxGL.UserLocation
        renderMode={'custom'}
      >
        <MapboxGL.SymbolLayer
          id={`ownPosition-symbol`}
          style={{
            iconImage: userDirectionMarker,
            iconSize: 0.1,
            iconRotate: this.state.phoneOrientation,
            iconRotationAlignment: 'map',
            iconAllowOverlap: true,
          }}
        />
      </MapboxGL.UserLocation>

[tinmar33]

Thanks @ethaqnix, i'll try this waiting for the PR to be merged

[tinmar33]

@ethaqnix it works, but i don't have the transparent blue circle indicating the accuracy of the gps.
Do you know how to have it on a custom icon ?

[lpfunding]

What is the best way to use magnetometer in React Native?

[SethArchambault]

Looking forward to this feature too - we'll need this before we make the move from the old react mapbox library!

[rdgomt]

Would be a nice feature!

[SethArchambault]

Any update here? We're moving from the old repo:
https://github.com/nitaliano/react-native-mapbox-gl#master

.. to the new one, and it'd be a shame if users had to lose an important feature during the upgrade..

Anything I can help with? Here's some of the old code:
https://github.com/nitaliano/react-native-mapbox-gl/blob/master/ios/RCTMGL/MGLUserLocationHeadingArrowLayer.m

[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.

[SethArchambault]

Oh no you don't stale bot!

[SethArchambault]

Hey, who wants to work on this with me? This would be my first big feature add, would be helpful if someone wants to jam on it a little..

[mfazekas]

@SethArchambault i think we need to finish https://github.com/react-native-mapbox-gl/maps/pull/215

[SethArchambault]

@mfazekas I see progress on that has stalled.. Is #215 a requirement for this task you think? Or just a nice to have?

[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.

[tinmar33]

Oh no you don't stale bot!

[sauhardar]

Is renderMode={'custom'} not a prop of UserLocation yet? I'm on "@react-native-mapbox-gl/maps": "^8.1.0-beta.1", and it doesn't seem to be a valid prop.

[mfazekas]

@sauhardar we've removed renderMode is now either native or normal
custom was same as normal, so we've removed it.

To custom location icon just supply a children to UserLocation in normal render mode

[sauhardar]

@mfazekas , but renderMode is not a valid prop for UserLocation?

[mfazekas]

@sauhardar it should be there on 8.1 beta.

[RichardLindhout]

Maybe Typescript issue?

[tinmar33]

@mfazekas thanks :) Is the arrow direction a native feature or i need to use @ethaqnix solution to display it ?

Edit:
On Android 9, with renderMode="native", i have this error:
Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.location.LocationComponent.setLocationComponentEnabled(boolean)' on a null object reference

[sauhardar]

@mfazekas I'm using 8.1 beta, and I'm having issues. Giving UserLocation the prop renderMode="normal" with a child component of SymbolLayer does not work for me on Android. Actually, the app just crashes almost instantly.