Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: marker views not propagating press events from their children #3440

Open
boovius opened this issue Apr 2, 2024 · 1 comment
Open
Labels
bug 🪲 Something isn't working

Comments

@boovius
Copy link

boovius commented Apr 2, 2024

Mapbox Implementation

Mapbox

Mapbox Version

10.16.4

React Native Version

0.73.1

Platform

iOS

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

import Mapbox from '@rnmapbox/maps'
import React, {
  createRef
} from 'react'
import {
  Image,
  Pressable,
  ViewStyle,
} from 'react-native'

import Images from '@/constants/images'

type Props = {
  style?: ViewStyle,
}

export const mapRef = createRef<Mapbox.MapView>()
export const cameraRef = createRef<Mapbox.Camera>()

const POIMap = ({
  style = {},
}: Props) => {

  return (
    <Mapbox.MapView
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
      }}
      onPress={() => console.log('pressing the map')}
    >
      <Mapbox.Camera
        ref={cameraRef}
        defaultSettings={{
          centerCoordinate: [0,0],
          zoomLevel: 9,
        }}
        minZoomLevel={1}
        maxZoomLevel={18}
      />
      <Mapbox.MarkerView
        key={'MarkerView'}
        id={'foobar'}
        coordinate={[2.1901266872462024, 41.378911532404516]}
        isSelected={false}
      >
        <Pressable
          style={{
            width: 44,
            height: 44,
            alignItems: 'center',
            justifyContent: 'space-around',
          }}
          onPress={() => console.log('pressing the marker view')}>
          <Image
            style={{
              width: 44,
              height: 44,
              marginVertical: 8,
            }}
            resizeMode="contain"
            source={Images.poiKinds.mapPin.inactive.eat}
          />
        </Pressable>
      </Mapbox.MarkerView>
    </Mapbox.MapView>
  )
}

export default POIMap

Observed behavior and steps to reproduce

Simulator Screenshot - iPhone 15 Pro - 2024-04-01 at 19 34 15

Map shows the child of the MarkerView rendered nicely. However when clicking upon the marker, no event seems to be propagated. No logs come out for the onPress event of the Pressable component used as a child of the MarkerView.

Expected behavior

The console log of 'pressing the marker view' should be seen in the logs. It is not.

Notes / preliminary analysis

I've tried using a PointAnnotation but cannot get an component from ReactNative to render at all when using that as a child of the PointAnnotation.

Have tried all sorts of things. This is very frustrating. Any help would be greatly, greatly appreciated!

Additional links and references

No response

@LovroKCoreLine
Copy link

LovroKCoreLine commented May 2, 2024

I have a similar issue on iOS, on android it seems to be working normally

Also the onPress on MapView, onTouchMove and onTouchEnd don't work, while onTouchStart does

On MarkerView, the onPressIn and onPressOut work, but onPress doesn't

Seems to be a general event propagation issue on iOS.

Also using rnmapbox/maps, version 10.1.11 with default mapbox version, react native version 0.72.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🪲 Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants