maplibre-react-native icon indicating copy to clipboard operation
maplibre-react-native copied to clipboard

`followUserLocation` Breaks Camera in New Architecture.

Open njbrown opened this issue 7 months ago • 13 comments

Describe and reproduce the Bug

I'm developing a navigation app using maplibre-react-native as the mapping library and ferrostar to handle route generation and eta calculation and arrival detection. The ferrostar dependency has forced me to use the New Architecture.

The Problem:

I'm facing a few problems that only appear while using the New Architecture:

  1. Camera movement is randomly interrupted during transitions
  2. Once the camera padding as been set to a value once (passing anything besides undefined), the camera doesn't respond to further padding changes (both on old and new architecture)
  3. There's no way to pass a location provider to the <UserLocation /> component. This makes route snapping impossible to do with this component. I plan on creating my own puck for this, but I think it was still worth mentioning.

My Investigation:

The primary issue is that when the followUserLocation prop is enabled it completely breaks expected camera behavior. Following up on that, using any imperative camera function (setCamera, fitBounds, etc) will cause the camera to jump back to that state on location updates (as described here).

This issue can be seen in the examples out of the box.

e.g. the "Fit(Bounds, Center/Zoom, Padding)" example shows this odd camera behavior after you tap the "Follow user location" button:

https://github.com/user-attachments/assets/53050885-f724-4610-b048-4668f231aa79

Another quick look at the User Location examples will show issues when the camera follows the user location. On Old Architecture:

https://github.com/user-attachments/assets/f61c7ea7-db49-454e-928f-3c76890b0cba

https://github.com/user-attachments/assets/f5e80251-409b-44c2-b5fc-f7e6ac4cc0df

On New Architecture

https://github.com/user-attachments/assets/0842c3da-951c-4410-8fcb-4041511e7dbe

https://github.com/user-attachments/assets/ef371ca0-a9fb-4c82-82cd-a43c51ad48fd

I saw this issue raised in an old closed issue from December but it's still happening. I havent actually looking into the source code of maplibre-react-native as yet. These are just behaviors I've observed from using the library.

My Personal Issue: Here's a snippet of the app I'm working on.

https://github.com/user-attachments/assets/2a1e885d-67c0-4ef1-aa11-1b0a27b8107d

There's a random rotational flickering of the camera during navigation caused by state changes sent from the ferrostar package which causes re-renders. The padding is during navigation is also incorrect. It should look more like this:

Image

I've been able to work my way around some of the issues by removing all imperative camera commands and just changing camera variables using state. Problem 1 and 2 still persists, however.

I've made a BugReport app for testing purposes. The link is here https://github.com/njbrown/maplibre-react-native/tree/nav-bug

Conclusion:

I really like this library, but the current issues have me at a stand-still. If there's a quick work-around to these issues until full New Architecture support is available, I'd really appreciate it.

@maplibre/maplibre-react-native Version

v10.1.4

Which platforms does this occur on?

Android Device

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: Linux 5.15 Linux Mint 21.3 (Virginia)
      Shell: 5.1.16 - /bin/bash
    Binaries:
      Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
      Yarn: 4.5.3 - ~/.nvm/versions/node/v18.19.1/bin/yarn
      npm: 10.9.1 - ~/Documents/android/maplibre-rn-njbrown/node_modules/.bin/npm
      Watchman: 4.9.0 - /usr/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 30, 33, 34, 35
        Build Tools: 30.0.2, 30.0.3, 34.0.0, 35.0.0, 36.0.0
        System Images: android-34 | Intel x86_64 Atom, android-34 | Google APIs Intel x86_64 Atom, android-35 | Google Play Intel x86_64 Atom
        Android NDK: 28.0.12674087-beta2
    npmPackages:
      expo: ~52.0.36 => 52.0.37 
      react: 18.3.1 => 18.3.1 
      react-native: 0.76.7 => 0.76.7 
    npmGlobalPackages:
      eas-cli: 13.1.1
      expo-cli: 6.3.10
    Expo Workflow: bare

njbrown avatar Apr 19 '25 21:04 njbrown