MarkerView with TouchableOpacity (and other Touchable) - onPress Not Triggering on Android

[stharvey]

I have been using MapLibreGL.MarkerView successfully for some time, and the press events from child elements worked fine on both iOS and Android. However, after upgrading my project to Expo SDK 52, the MarkerView on Android no longer triggers the onPress event. Tapping the marker appears to do nothing, even though the same code worked prior to the upgrade. I haven't fully tested on iOS yet.

Steps to Trigger Behavior

1. Create new project using Expo SDK 52.
2. Create a screen containing MabLibre map and a MapLibreGL.MarkerView containing TouchableOpacity element with onPress.
3. Run development build and tap marker.

Link to Minimal Reproducible Example

https://github.com/stharvey/maplibre-test

Expected Behavior

Tapping the marker should trigger the onPress callback and log "Marker clicked" to the console.

Actual Behavior

On Android, tapping the marker does nothing.

Environment

• Platform: Android
• OS version: Android 14
• Device type: Pixel 6 Pro
• Emulator or Simulator: Real device
• Development OS: MacOS 15.1.1
• @maplibre/maplibre-react-native Version: 10.0.0-alpha.28
• react-native Version: 0.76.5
• expo Version: 52.0.18

[KiwiKilian]

Thanks for the report, can you also reproduce with the latest beta version? Are you using the old or new architecture?

[stharvey]

Sorry, I should have said - this is with the new architecture.

I haven't tried with new architecture disabled and I haven't tried with beta - I'll try now.

[stharvey]

Here is what I have found from testing with old and new architecture on 10.0.0-alpha.28 and 10.0.0-beta.8:

10.0.0-alpha.28 with old architecture: no problem
10.0.0-alpha.28 with new architecture: error as described above

10.0.0-beta.8 with old architecture: no problem
10.0.0-beta.8 with new architecture: error as described above

[KiwiKilian]

Did you still only try on Android?

[stharvey]

Yes, I'll try on iOS now

[stharvey]

Apologies for the delay. Yes I am seeing the same as above on iOS

[KiwiKilian]

I can't reproduce within your repository. You are build your dev client on EAS? Did you build your dev client from that same repository or another repository? Are you using the correct dev clients?

This is how I tried to reproduce:

• Checkout your repo
• Allow bare workflow build by removing the following keys from app.json:
  • eas
  • runtimeVersion
  • updates
• Changepackage.json
  • Add these scripts:

    "build": "expo prebuild",
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios"
  

  • Update version "@maplibre/maplibre-react-native": "^10.0.0-beta.9",
• Run npm run android

Everything works as expected.

I've also tried within our example app like this, which also works fine:

import { MapView, MarkerView } from "@maplibre/maplibre-react-native";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

import { sheet } from "../styles/sheet";

const styles = StyleSheet.create({
  touchable: {
    padding: 16,
    width: 128,
    backgroundColor: "white",
  },
});

export default function BugReport() {
  return (
    <MapView style={sheet.matchParent}>
      <MarkerView coordinate={[0, 0]}>
        <TouchableOpacity
          style={styles.touchable}
          onPress={() => console.log("Marker clicked")}
        >
          <Text>Touchable</Text>
        </TouchableOpacity>
      </MarkerView>
    </MapView>
  );
}

[stharvey]

Thanks for taking the time to look into this.

Yes I'm using EAS and I'm building the dev client fresh from the repository linked above.

I'm a bit stumped now - I'm not sure what I should try next - do you have any ideas?

[KiwiKilian]

Did you rebuild your EAS client after every change in architecture and app version? Downloaded that client and tested the bug example again?

Can you try if it works for you too, if you build locally as I did in your repo?

You can also try the example in this repo:

• Checkout
• yarn install in root
• cd packages/expo-app
• yarn build
• yarn android
• Change BugReport.tsx to your bug reproduction
• Choose first item in the list "Bug Report" to view it

[stharvey]

Yes I rebuilt the dev client for each architecture & version permutation.

I'll try building locally and let you know how it goes.

[KiwiKilian]

Thanks for clarifications!

If it works for you with the local build, you could also try eas --local and clearing caches on EAS cloud.

It's yet unclear to me, how this could only happen with a EAS build.

[stharvey]

Very strange. I have built my repo locally to Android (@maplibre/maplibre-react-native ^10.0.0-beta.9) and I still experience the same issue. When tapping the marker the onPress (i.e. console.log("Marker clicked")) does not execute.

[KiwiKilian]

Yes, I see the console.log beeing executed, very strange. I've only tested on emulator/simulator only. Are you testing on devices?

[stharvey]

Yes I've only been testing on real devices

[KiwiKilian]

Could you verify, that it's working within emulator/simulator? Thanks!

[stharvey]

Ah, yes it does work within simulator.

[stharvey]

Have you been able to reproduce the issue on a real device? Can I provide any further details?

[stharvey]

I've been playing around with it and it works (including real devices) using onPressOut instead of onPress

[KiwiKilian]

Can confirm the event isn't riggered on Android device.

[KiwiKilian]

But I can't reproduce on iOS, not 100% sure if build correctly on new arch.

On Android we might have to do this migration: reactwg/react-native-new-architecture#154 (reply in thread).

[KiwiKilian]

Actually we might be experiencing this? If I press and drag in the Android emulator I can also reproduce the bug. facebook/react-native#44610 (comment)