Marker press handler for react-native-maps
npm install react-native-maps-touchablesreact-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
yarn add react-native-maps-touchables
or
npm install react-native-touchables
Basic Usage
Replace MapView from with react-native-maps-touchablesdiff
- import { MapView } from 'react-native-maps';
+ import { MapView } from 'react-native-maps-touchables';
`
$3
JavaScript
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 (
markerLocations={markers}
onTouch={(item, index) => {
console.log(item, index);
}}
>
{markers.map((marker, index) => (
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}
key={marker.latitude + '-' + marker.longitude + '-' + index}
>
width: marker.width,
height: marker.height,
backgroundColor: marker.item.color,
}}
>
{index}
))}
);
};
export default BasicUsage;
`
Props
|Prop|Type | Notes|
|------|-------|---|
|
| | 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.$3
|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.