maplibre / maplibre/maplibre-react-native
Android: Marker onPress still reaches Map onPress on the New Architecture (JS event bubbling), despite #1317
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 661
- Forks
- 124
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 30
Description
**Environment**
- `@maplibre/maplibre-react-native` 11.3.4 (declarations unchanged on current `main`)
- React Native 0.85.3, New Architecture, Expo SDK 56 dev client
- Android 16 emulator (Pixel)
**What happens**
A single tap on a `Marker` fires the marker's `onPress` and then the `Map`'s `onPress`, in that order. The classic selection pattern
```tsx
setSelectedId(null)}>
setSelectedId(id)}>
```
silently breaks: both state updates land in the same React batch, the final state is `null`, and the marker's callout/selection UI never appears. This is the same symptom #1304 reported, which #1317 fixed natively.
Proof from a single physical tap on a marker (two log lines, one tap):
```
LOG [cb] stop marker press cms3v841w0005v22g1obz9dtd cur= null
LOG [cb] map press
```
**Why (the #1317 guard is not enough on the New Architecture)**
The native side is correct: `MLRNMapView.onMapClick` returns `true` after dispatching the marker press, so no `MapPressEvent` is emitted for that tap (the #1317 guard is present in 11.3.4).
The duplicate arrives through JS event bubbling instead. Both declarations use a bubbling handler with the same event name:
- `MarkerViewNativeComponent.ts`: `onPress?: CodegenTypes.BubblingEventHandler`
- `MapViewNativeComponent.ts`: `onPress?: CodegenTypes.BubblingEventHandler`
Since `Marker` is a React child of `Map`, the marker's press event bubbles up the shadow tree and is delivered to `Map.onPress` as well. So #1317 removed the native double dispatch, but codegen bubbling recreates the propagation in JS.
**Workaround**
Call `event.stopPropagation()` inside the `Marker` `onPress` handler. This fully restores the select/deselect pattern.
**Suggested fix**
Declare `Marker.onPress` as a `DirectEventHandler` (like the region events) so the press only reaches its target, or give the marker press a distinct event name. If the bubbling is intentional, it would help to document it on `Marker.onPress` the way the `Map.onPress` docs already describe Source press bubbling ("To prevent this use event.stopPropagation()"), because today the marker case is undocumented and looks like a regression of #1304.
Note: only verified on Android. iOS goes through `ViewAnnotation` and may behave differently.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read MarkerViewNativeComponent.ts and MapViewNativeComponent.ts, then trace MLRNMapView.onMapClick and reproduce the Android tap behavior from the issue. Compare the Marker onPress declaration with the region event handlers and verify whether the marker press still reaches Map.onPress. Done means marker selection no longer triggers map selection, or the bubbling behavior is documented if it is intentional.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100