Android - Center to user's position button

[Drealler]

Hello guys, I'm trying to implement a center to user's position button using the flyTo method from MapboxGL.Camera, but nothing happens. Is this know as a bug or maybe is it just a wrong implementation ? Thanks!

Simple example code:

const MapScreen: React.FC<MapScreenProps> = () => {
  const userPosition = [-46.7003, -23.5366];
  
  const cameraRef = useRef<MapboxGL.Camera | null>(null);
  const centerMapOnUser = (position: GeoJSON.Position) => {
    if (cameraRef.current) {
      cameraRef.current.flyTo(position, 1000);
    }
  };
  
  return (
    <View style={styles.viewContainer}>
      <MapboxGL.MapView
        style={styles.map}
      >
        <MapboxGL.UserLocation
          visible
          androidRenderMode="compass"
          showsUserHeadingIndicator
          animated
        />
        <MapboxGL.Camera
          ref={cameraRef}
          zoomLevel={16}
          centerCoordinate={userPosition}
          followUserLocation
          animationMode="flyTo"
          animationDuration={0}
        />
      </MapboxGL.MapView>
      <IconButton
        style={styles.centerButton}
        icon={CenterMapIcon}
        onPress={() => centerMapOnUser(userPosition)}
      />
    </View>
  );
};

[ferdicus]

Camera commands are disabled when you enable followUserLocation

[Drealler]

@ferdicus thanks for your answer. Is there a attribute that tell when the user is moving the map with his fingers and when the user is actually moving ?

[ferdicus]

you could use MapViews onRegionDidChange to check

[Drealler]

Oh I see, thanks.
In this example the centerLocation attribute is hard coded, is there a recommended attribute to use or generally people use the js geolocation api ?

[ferdicus]

you can utilize UserLocations onUpdate callback.
It'll fire when a new position is acquired.

[nurassyl]

this.state = { 
  followUserLocation: true,
  followZoomLevel: 17, 
  followUserMode: MapboxGL.UserTrackingModes.FollowWithCourse,
  location: null,
};

<MapboxGL.Camera
  animationMode={'flyTo'}
  zoomLevel={16}
  followUserLocation={this.state.followUserLocation}
  followZoomLevel={this.state.followZoomLevel}
  followUserMode={this.state.followUserMode}
/>
<MapboxGL.UserLocation
  animated={true}
  visible={true}
  showsUserHeadingIndicator={true}
  onUpdate={this.onUserLocationUpdate.bind(this)}
  onPress={this.followUserLocation.bind(this)}
/>

async onUserLocationUpdate(location) {
  await this.setState({
    location,
  });
}

async followUserLocation() {
  await this.setState({followUserLocation: false});
  await this.setState({followUserLocation: true});
}