Viewport

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

Viewport

provides a structured approach to organizing camera management logic into states and transitions between them.

At any given time, the viewport is either:

• idle
• in a state (camera is being managed by a ViewportState)
• transitioning between states

See android, ios

props

transitionsToIdleUponUserInteraction

| boolean
| {
    pan?: boolean;
    pinch?: boolean;
    doubleTap?: boolean;
    rotate?: boolean;
    pitch?: boolean;
  }

Indicates whether the Viewport should idle when the MapView receives touch input.

• true: any gesture idles the viewport.
• false: no gesture idles it. Set this to build custom ViewportStates that can work simultaneously with certain types of gestures.
• an object, e.g. { pan: true, pinch: false, doubleTap: false }: only the gestures set to true idle the viewport, the others leave the current state running. Omitted keys default to true.
  • pan: one-finger pan
  • pinch: pinch, and quick zoom (double-tap and drag)
  • doubleTap: double-tap to zoom in, two-finger tap to zoom out
  • rotate: two-finger rotate
  • pitch: two-finger vertical drag (shove on Android)

With the object form, while in a followPuck state:

• once the user zooms, rotates or pitches with a gesture that doesn't idle, the state stops applying its zoom, bearing or pitch, so the user's value sticks. The next transition to a followPuck state applies them again.
• if pinch or doubleTap doesn't idle, zoom gestures zoom around the puck, and a two-finger drag doesn't pan the map. This temporarily sets the gesture focal point and turns off gestureSettings.pinchPanEnabled, unless the app has set them.

Defaults to true.

Viewport Gestures

onStatusChanged

func

Subscribes to status changes, will be called when the status changes.

Observers are notified of status changes asynchronously on the main queue. This means that by the time the notification is delivered, the status may have already changed again. This behavior is necessary to allow observers to trigger further transitions while avoiding out-of-order delivery of status changed notifications. signature:(event:{from: union, to: union, reason: union}) => void

methods

getState()

arguments

Name	Type	Required	Description

idle()

arguments

Name	Type	Required	Description

transitionTo(state, transition)

arguments

Name	Type	Required	Description
state	n/a	Yes	undefined
transition	n/a	Yes	undefined