How to get onPress to work on Callout inside PointAnnotation or MarkerView

[jeanvr-iff]

Hi, i was trying to make a touchable popup, but i couldn't get it to work using either PointAnnotation or MarkerView.

Using PointAnnotation:

<Mapbox.PointAnnotation
                    key={marker.id}
                    id={marker.id}
                    coordinate={marker.coord}
                    title={marker.additionalInfo.name}
                    onSelected={() => {
                        setHasToFollowUser(true)
                        camera.current?.setCamera({
                            zoomLevel: 18,
                            animationMode: 'flyTo',
                            centerCoordinate: marker.coord
                        })
                        setHasToFollowUser(false)
                    }}
                >
                        <FontAwesome5 
                            name='map-marker-alt' 
                            size={markerProperDim} 
                            color={color} 
                        />
                        <Mapbox.Callout title="">
                            <PointPopUp
                                img={marker.additionalInfo.img}
                                title={marker.additionalInfo.name}
                                subtitle={marker.additionalInfo.relatedAssetName}
                                onPress={() => navigation.navigate('AssetScreen', { id: marker.id, type: marker.type })}
                            />
                        </Mapbox.Callout>
                </Mapbox.PointAnnotation>

Using MarkerView:

 <Mapbox.MarkerView
                    key={marker.id}
                    id={marker.id}
                    coordinate={marker.coord}
                    // title={marker.additionalInfo.name}
                    onTouchEnd={() => {
                        setHasToFollowUser(true)
                        camera.current?.setCamera({
                            zoomLevel: 18,
                            animationMode: 'flyTo',
                            centerCoordinate: marker.coord
                        })
                        setHasToFollowUser(false)
                    }}
                >
                    <>
                        <FontAwesome5 
                            name='map-marker-alt' 
                            size={markerProperDim} 
                            color={color} 
                        />
                        <Mapbox.Callout title="">
                            <PointPopUp
                                img={marker.additionalInfo.img}
                                title={marker.additionalInfo.name}
                                subtitle={marker.additionalInfo.relatedAssetName}
                                onPress={() => navigation.navigate('AssetScreen', { id: marker.id, type: marker.type })}
                            />
                        </Mapbox.Callout>
                    </>
                </Mapbox.MarkerView>

Obs:

• MarkerView doesn't render properly
• I've wrapped the elements inside an empty fragment because "MarkerView" only accepts one children
• I'm using FontAwesome5 element to make a custom marker

[jng34]

Hi,
While I am not sure what your PointPopUp tag is (guessing it is a component), you can create a pressable for a Callout by doing something like is:

<MarkerView>
  {/* your marker */}
  <Callout title="popup">
    <View>
      <Text onPress={() => alert('pressed callout')}>
         "Hello world!
      </Text>
    </View>
  </Callout>
</MarkerView>

Note that according to the docs, the Callout component does not have an onPress prop.

Hope this helps!

[jeanvr-iff]

Hi, thanks for the response.

I'm having some trouble with MarkerView. I can't use a custom marker unless i wrap it inside another Component (i.e., one child inside MarkerView), but doing that gives me a "buggy" View and not my FontAwesome icon.

About the onPress, nothing inside Callout listens to user touch. I've tried to change zIndex, but no success.

For any questions about PointPopUp Component, i'll leave its code below:

import { View, Text, TouchableOpacity } from "react-native";

import { styles } from "./styles";
import CameraButton from "../../../../../components/CameraButton";
import { useGlobal } from "../../../../../context/GlobalContext";

type PointPopUpProps = {
    img: string;
    title: string;
    subtitle: string;
    onPress: () => void;
}

export function PointPopUp({ img, title, subtitle, onPress }: PointPopUpProps) {
    const { colors } = useGlobal()

    if (title.length > 18)
        title = title.substring(0, 15) + '...'

    return (
        <View style={styles.container}>
            <CameraButton
                img={img}
                containerStyle={styles.image}
            />

            <View style={styles.infoContainer}>
                <Text style={styles.title}>{title}</Text>
                <Text style={styles.subtitle}>{subtitle}</Text>

                <TouchableOpacity onPress={onPress}>
                    <Text style={{ fontSize: 12, color: colors.detail }}>Mais informações</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}