maplibre-react-native
maplibre-react-native copied to clipboard
`followUserLocation` Breaks Camera in New Architecture.
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:
- Camera movement is randomly interrupted during transitions
- 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) - 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:
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