Using a hook to determine the contents of annotations causes other annotations to detach from map

[edfungus]

Steps to Trigger Behavior

1. Create map with annotation component that relies on zustand/immer (add a boolean to the state) (distanceRings in example repo)
2. Add a regular annotation on the map (PointAnnotation in example repo)
3. Toggle the boolean
4. Move map and the regular annotation detaches

Link to Minimal Reproducible Example

https://github.com/edfungus/maplibre-example/tree/main

Map usage
Main home screen

Expected Behavior

Map would move with all annotations staying in place.

Actual Behavior

Some annotations will detatch from screen and eventually whole map will be unresponsive

Screenshots (if applicable)

Issue demo:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-14.at.22.08.14.mp4

Remove distanceRing component:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-14.at.22.08.36.mp4

Version(s) affected

• Platform: iOS
• OS version: iOS 17.5
• Device type: iPhone 11 Pro / 15 Pro
• Emulator/ Simulator: both
• Development OS: MacOS 14.5
• maplibre-react-native Version: 10.0.0-alpha.8
• MapLibre GL version: ?
• React Native Version: 0.74.3

Additional context

Even without the Zustand/immer component, the PointAnnontation rubber bands a bit (even on device) so I feel like something with the rendering has changed. I have tried useMemo as well to reduce calculations but it didn't seem to affect anything.

The reason I'm inclined to think it has to do with Maplibre is because:

• Zustand/immer version stay the same
• Updated from 10 alpha 6 to alpha 8
• This similar issue [10.0.0-alpha.5] _cameraRef?.current?.setCamera causing markerpoint get detached from maps-base #409

Happy to help test and debug as well. Took me a while to get the demo cut down from the app. I can't think of anything else to try atm

[caspg]

@edfungus thanks a lot for detailed issue and example app. Could you also try with Maplibre:

• 10.0.0-alpha.3 (before new metal renderer was used on IOS)
• 9.1.0 (before repo was migrated to Typescript).

[edfungus]

• 10.0.0-alpha.3 crashed in simulator. No issue on device though! (jiggle seems to be gone too)
• I can't get v9 working :/ I had issues upgrading for a while since v9.0.1 and jumped straight to v10.alpha6. I can try debugging more but I'm not super hopeful

[knecht]

The first video looks very similar to a problem I am currently investigating. For me, updating maplibre-native from 6.4.0 to 6.5.3 helped. Could be worth a try in your case, too.
Note that I had to change the version manually in project.pbxproj . Specifying the desired version in Podfile according to https://github.com/maplibre/maplibre-react-native/blob/main/ios/install.md did not have any effect.