react-native-maps-touchables

Touchable area fix for react-native-maps Markers on Android. Creates touchable areas for Markers.

https://github.com/GoktuqCan/react-native-maps-touchables/assets/15637944/d071a839-634a-4b72-afc6-0b1751f4ff7f

Installation

yarn add react-native-maps-touchables

or

npm install react-native-touchables

Basic Usage

Replace MapView from react-native-maps with react-native-maps-touchables

- import { MapView } from 'react-native-maps';
+ import { MapView } from 'react-native-maps-touchables';

Example

import React from 'react';
import { Text, View } from 'react-native';
import { Marker } from 'react-native-maps';
import { MapView } from 'react-native-maps-touchables';

const markers = [
  {
    latitude: 37.800332,
    longitude: -122.421301,
    height: 20,
    width: 70,
    zIndex: 2,
    item: {
      id: 3,
      color: 'red',
    },
  },
  {
    latitude: 37.79736,
    longitude: -122.429799,
    height: 40,
    width: 40,
    zIndex: 1,
    item: {
      id: 4,
      color: 'blue',
    },
  },
];

const BasicUsage = () => {
  return (
    <MapView
      // ...react-native-maps props
      markerLocations={markers}
      onTouch={(item, index) => {
        console.log(item, index);
      }}
    >
      {markers.map((marker, index) => (
        <Marker
          zIndex={marker.zIndex}
          coordinate={{
            latitude: marker.latitude,
            longitude: marker.longitude,
          }}
          key={marker.latitude + '-' + marker.longitude + '-' + index}
        >
          <View
            style={{
              width: marker.width,
              height: marker.height,
              backgroundColor: marker.item.color,
            }}
          >
            <Text>{index}</Text>
          </View>
        </Marker>
      ))}
    </MapView>
  );
};

export default BasicUsage;

Props

Prop	Type	Notes
...MapViewProps		All react-native-maps MapView props are supported.
markerLocations	MarkerLocation[]	Required. See example for usage.
onTouch	(item?:any,index?:number)=>void	This callback receives item field from MarkerLocation and index of the touched marker in markerLocations. If user touches outside of the markers both are undefined.
rotateEnabled	boolean	Default is false. This prop is not supported yet.

MarkerLocation

Field	Type	Notes
latitude	number	Required
longitude	number	Required
width	number	Required. Width of the marker must be predefined.
height	number	Required. Height of the marker must be predefined.
item	any	This will be passed to onTouch callback.

Known Issues

• rotateEnabled is not supported yet.