Can't explore map when followUserLocation is set on Android

[Maxhu787]

Describe and reproduce the Bug

On ios simulator, when dragging off the map and zooming out, it stops following the user location, but on android studio, when zooming out, after a few seconds, it snaps back the the user location, making so that you can't explore the map.

is there some way to fix this?

<Camera
  ref={cameraRef}
  followUserLocation={true}
  followZoomLevel={16}
/>

here's a screen recording

@maplibre/maplibre-react-native Version

10.0.1

Which platforms does this occur on?

Android Emulator

Which frameworks does this occur on?

Expo

Which architectures does this occur on?

New Architecture

Environment

expo-env-info 1.2.2 environment info:
    System:
      OS: macOS 15.3
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 23.7.0 - /opt/homebrew/bin/node
      Yarn: 1.22.22 - /usr/local/bin/yarn
      npm: 10.9.2 - /opt/homebrew/bin/npm
      Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
      Android SDK:
        API Levels: 33, 34, 35
        Build Tools: 30.0.3, 34.0.0, 35.0.0, 35.0.0
        System Images: android-34 | Google APIs ARM 64 v8a
    IDEs:
      Android Studio: 2023.3 AI-233.14808.21.2331.11709847
      Xcode: 16.0/16A242d - /usr/bin/xcodebuild
    npmPackages:
      expo: ~52.0.35 => 52.0.35 
      expo-router: ~4.0.17 => 4.0.17 
      react: 18.3.1 => 18.3.1 
      react-native: 0.76.7 => 0.76.7 
    npmGlobalPackages:
      eas-cli: 14.2.0
    Expo Workflow: bare

[brentforder]

I assumed that this behavior was intended, so I treat Camera.followUserLocation as a hard toggle on the camera tracking behavior... But the fact that it behaves differently on iOS is definitely strange!

[Maxhu787]

Yeah, it's kinda weird. But I managed to make a workaround by setting the Camera.followUserLocation to a state and setting it to false when something like onTouchStart() triggers.

[KiwiKilian]

Can you reproduce this on the old architecture? In my testing it seems to behave the same – I can freely move around and the camera is not realigned, when a new user location is detected.

I've used this example:

import { Camera, MapView, UserLocation } from "@maplibre/maplibre-react-native";

export function BugReport() {
  return (
    <MapView style={{ flex: 1 }}>
      <Camera followUserLocation followZoomLevel={16} />
      <UserLocation />
    </MapView>
  );
}

Anyway, to keep you prop in sync with the Camera you should use the onUserTrackingModeChange event, something like this:

import { Camera, MapView, UserLocation } from "@maplibre/maplibre-react-native";
import { useState } from "react";

export function BugReport() {
  const [followUserLocation, setFollowUserLocation] = useState(true);

  return (
    <MapView style={{ flex: 1 }}>
      <Camera
        followUserLocation={followUserLocation}
        followZoomLevel={16}
        onUserTrackingModeChange={(event) => {
          if (!event.nativeEvent.payload.followUserLocation) {
            setFollowUserLocation(false);
          }
        }}
      />
      <UserLocation />
    </MapView>
  );
}

[Maxhu787]

Thanks, it worked. I think it has something to do with my code, because I commented everything out and now it works.

I was unable to get it to work without adding this to my <UserLocation/>

<UserLocation
  renderMode={UserLocationRenderMode.Native}
/>

and for some reason, the location updates only if I add a useEffect that uses expo location like this, did I setup my permissions wrong? also opening google maps then switching back to the app works to? 🤨

"android": {
  "permissions": [
    "android.permission.ACCESS_COARSE_LOCATION",
    "android.permission.ACCESS_FINE_LOCATION",
    "android.permission.FOREGROUND_SERVICE",
    "android.permission.ACCESS_BACKGROUND_LOCATION"
  ]
}

useEffect(() => {
    const getCurrentLocation = async () => {
      let location_data = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Highest,
      });
      setLocation(location_data);
    };
    const interval = setInterval(() => {
      getCurrentLocation();
    }, 1000);

    return () => clearInterval(interval);
  }, []);

[KiwiKilian]

Try the google locationEngine, this might fix your problem: https://maplibre.org/maplibre-react-native/docs/setup/library-customizations#location-engine

[Maxhu787]

I see, thanks for the help 😀

[Maxhu787]

Also, now that the user can explore the map when panning the map, how can I get back to following the user location?

[KiwiKilian]

Referring to my example, set the state again to true, when it should follow again. I guess in your case when precessing the location button.

[Maxhu787]

ok, thanks 🙏

[Maxhu787]

Also I have a question, is it possible to implement a scrollbar to zoom in and out of the map?