React-native-mapbox-gl: FollowWithCourse does not work when map loads with this userTrackingMode

[gianpieroc]

Hello! Thanks for the contribution to this project.. It's amazing!

I have an issue... When I load initial map with userTrackingMode={3} the map does not follow user. The map loads in a sea...

I found a hack... If I change the userTrackingMode as a react state in componentDidMount from 1 to 3 this don't happen

You can see the hack in the code below (If I set userTrackingMode to 3 directly. the map does not work)
RN version 0.49.0

import React from 'react';
import { View } from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import BasePropTypes from '../utils/BasePropTypes';
import haversine from 'haversine';
import pick from 'lodash/pick';
import { lineString as makeLine } from '@turf/helpers';

import MapboxClient from '../MapboxClient';

import { onSortOptions } from '../utils';

const lineStyle = {
  lineColor: 'white',
  lineWidth: 3,
  lineOpacity: 0.84
}

class SetUserTrackingModes extends React.Component {
  static propTypes = {
    ...BasePropTypes
  };

  state = {
    coordsToDraw: null,
    coordinates: [],
    prevLatLng: {},
    trackingMode: 1,
    distanceTraveled: 0
  }


  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {},
      error => alert(error.message),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        distanceFilter: 5
        }
        );
        this._watchID = navigator.geolocation.watchPosition(position => {
          const { coordinates, distanceTraveled } = this.state;
          const newLatLngs = {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          };
          let positionLatLngs = pick(position.coords, ['latitude', 'longitude']);
          const routeCoordinates = coordinates.concat([positionLatLngs.latitude, positionLatLngs.longitude])
          const coordsToDraw = {
            geometry:{
              coordinates: routeCoordinates,
              type:'LineString',
            },
            type:'Feature'
          }
          this.setState({
            coordinates: routeCoordinates,
            coordsToDraw: coordsToDraw,
            distanceTraveled: distanceTraveled + this._calcDistance(newLatLngs),
            prevLatLng: newLatLngs
          });
        });
    setTimeout( ()=> this.setState({trackingMode:3}),1000)
  }

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this._watchID);
  }

  _calcDistance(newLatLng) {
    const { prevLatLng } = this.state;
    return haversine(prevLatLng, newLatLng) || 0;
  }

  renderRoute () {
    if (this.state.coordinates.length < 0) {
      return null;
    }

    return (
      <MapboxGL.ShapeSource id='routeSource' shape={this.state.coordsToDraw}>
        <MapboxGL.LineLayer id='routeFill' style={lineStyle} belowLayerID='originInnerCircle' />
      </MapboxGL.ShapeSource>
    );
  }

  render () {
    return (
      <View style={{flex:1}}>
        <MapboxGL.MapView
          ref={(ref) => { this.map = ref; }}
          showUserLocation
          zoomLevel={15}
          attributionEnabled
          animated
          userTrackingMode={this.state.trackingMode}
          logoEnabled={false}
          style={{flex:1}} />
        {this.renderRoute()}
      </View>
    );
  }
}

export default SetUserTrackingModes;

[nitaliano]

@gianpieroc Hi, thanks for for reporting.

This issue is actually one of the last todos on this cross platform location update PR https://github.com/mapbox/react-native-mapbox-gl/pull/897 you can follow along there and I'll update this ticket once we get it merged into master

[gianpieroc]

Thanks a lot! 👍

[nitaliano]

@gianpieroc just added the commit to that PR that will solve this issue

[kenobi91]

Hello, i m using 6.1.2-beta2 version and i stil have this problem. When userTrackingMode is set to MapboxGL.UserTrackingModes.FollowWithCourse or MapboxGL.UserTrackingModes.FollowWithHeading map renders sea.

[Zkog]

@kenobi91 Did you solve it? I still have that problem.

Edit: I solved it by having it set to None first, then to FollowWithHeading in onDidFinishLoadingMap().

[kenobi91]

Zkog i implemented similar scenario, starting with none then switching to FollowWithHeading or Course