Skip to main content

MarkerView

import { MarkerView } from '@rnmapbox/maps';

MarkerView

MarkerView represents an interactive React Native marker on the map.

If you have static views, consider using PointAnnotation or SymbolLayer to display an image, as they'll offer much better performance. Mapbox suggests using this component for a maximum of around 100 views displayed at one time.

This is implemented with view annotations on Android and iOS.

This component has no dedicated onPress method. Instead, handle gestures with the React views passed in as children — Pressable, TouchableOpacity, etc. all work including their visual feedback (opacity, scale, etc.).

props​

coordinate​

Position

required The center point (specified as a map coordinate) of the marker.

anchor​

type Anchor = {
  x: number; /* FIX ME NO DESCRIPTION */
  y: number; /* FIX ME NO DESCRIPTION */
}

Any coordinate between (0, 0) and (1, 1), where (0, 0) is the top-left corner of the view, and (1, 1) is the bottom-right corner. Defaults to the center at (0.5, 0.5).

defaults to: { x: 0.5, y: 0.5 }

allowOverlap​

boolean

Whether or not nearby markers on the map should all be displayed. If false, adjacent markers will 'collapse' and only one will be shown. Defaults to false.

defaults to: false

allowOverlapWithPuck​

boolean

Whether or not nearby markers on the map should be hidden if close to a UserLocation puck. Defaults to false.

defaults to: false

isSelected​

boolean

FIX ME NO DESCRIPTION

defaults to: false

stopGesturePropagation​

boolean

Keep pan/pinch/drag gestures that start on this marker inside the marker instead of letting them reach the map. Enable this for markers whose children handle their own drags in JavaScript (e.g. a PanResponder-based slider), which otherwise race the map's pan/zoom recogniser and can be taken over by the map. By default the marker is smart: taps and native scrollables are kept, but a pan/pinch that merely starts on the marker moves the map. Defaults to false.

@platform android — on iOS the map's gesture recognisers already coexist with marker content, so this has no effect.

defaults to: false

children​

ReactReactElement

required One or more valid React Native views. You can use Pressable, TouchableOpacity, etc. directly as children — onPress and touch feedback work correctly.