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

[edfungus]

trafficstars

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:

https://github.com/user-attachments/assets/126d70f7-b9b0-4d52-8016-167af0675f66

Remove distanceRing component:

https://github.com/user-attachments/assets/6ec60e84-a9a2-4383-a94d-44f7329e070a

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 https://github.com/maplibre/maplibre-react-native/issues/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.

[KiwiKilian]

Resolved with the latest v10 pre-releases as reported in #409.