react-native-maps not showing marker information when clicking on a pin

Question

I have a react native project in which I am trying to integrate react-native-maps into the application. For each pin, I want to display some information when the user clicks on the pin itself. Right now I have MapView and Marker. I trued using Callout but it is not displaying correctly.

Here is the file:

import React, { useContext } from 'react'
import { View, Text, Image, StyleSheet } from 'react-native'
import MapView, { Marker, Callout } from 'react-native-maps';
import { PropertyContext } from '../../../../context/PropertyContext';

const MapViewComponent = () => {

  const { results, currentLat, currentLong } = useContext(PropertyContext)

  return (
    <>
      <MapView 
        scrollEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        style={styles.mapWindow} 
        initialRegion={{
          latitude: currentLat,
          longitude: currentLong,
          latitudeDelta: 0.5,
          longitudeDelta: 0.5,
        }}
      >
        {
          results.map((property) => {
            return(
              <Marker 
                pinColor='blue'
                key={property.zpid}
                coordinate={{
                  longitude: property.longitude,
                  latitude: property.latitude
                }}
              >
                <Callout 
                  onPress={() => {
                    return(
                      <View style={styles.homeContainer}>
                        <Text>{property.zpid}</Text>
                      </View>
                    )
                  }}
                />
              </Marker>
            )
          })
        }
      </MapView>
    </>
  )
}

const styles = StyleSheet.create({
  mapWindow: {
    height: '100%',
    width: '100%',
  },
  homeContainer: {
    height: 300,
    width: 300,
    backgroundColor: 'white',
    borderRadius: 12
  }
})

export default MapViewComponent

Answer 1

That is because you're trying to use the onPress prop of the callout instead of the marker, try this:

{
      results.map((property) => {
        return(
          <Marker 
            pinColor='blue'
            key={property.zpid}
            coordinate={{
              longitude: property.longitude,
              latitude: property.latitude
            }}
            onPress={()=>showCallout()}
          >
            <Callout>
              <View style={styles.homeContainer}>
                  <Text>{property.zpid}</Text>
              </View>
            </Callout>
          </Marker>
        )
      })
    }

There is also a Marker prop named onCalloutPress which according to this is needed for android

Also here you can find more documentation