```tsx import { Camera } from '@rnmapbox/maps'; Camera ``` Controls the perspective from which the user sees the map. To use imperative methods, pass in a ref object: ```tsx const camera = useRef<Camera>(null); useEffect(() => { camera.current?.setCamera({ centerCoordinate: [lon, lat], }); }, []); return ( <Camera ref={camera} /> ); ``` ## props ### type ```tsx literal ``` Allows static check of the data type. For internal use only. ### centerCoordinate ```tsx Position ``` The location on which the map should center. ### bounds ```tsx type Bounds = { ne: Position; /* FIX ME NO DESCRIPTION */ sw: Position; /* FIX ME NO DESCRIPTION */ } ``` The corners of a box around which the map should bound. Contains padding props for backwards compatibility; the root `padding` prop should be used instead. ### heading ```tsx number ``` Heading (bearing, orientation) of the map, measured in degrees clockwise from true north. ### pitch ```tsx number ``` The pitch toward the horizon measured in degrees, with 0 degrees resulting in a top-down view for a two-dimensional map. ### zoomLevel ```tsx number ``` The zoom level of the map. ### padding ```tsx type Padding = { paddingLeft: number; /* Left padding in points */ paddingRight: number; /* Right padding in points */ paddingTop: number; /* Top padding in points */ paddingBottom: number; /* Bottom padding in points */ } ``` The viewport padding in points. ### animationDuration ```tsx number ``` The duration the map takes to animate to a new configuration. ### animationMode ```tsx | 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo' | 'none' ``` The easing or path the camera uses to animate to a new configuration. [Camera Animation](../examples/V10/CameraAnimation) ### followUserLocation ```tsx boolean ``` Whether the map orientation follows the user location. ### followUserMode ```tsx UserTrackingMode ``` The mode used to track the user location on the map. ### followZoomLevel ```tsx number ``` The zoom level used when following the user location. [Show Map](../examples/Map/ShowMap) ### followPitch ```tsx number ``` The pitch used when following the user location. ### followHeading ```tsx number ``` The heading used when following the user location. ### followPadding ```tsx Partial ``` The padding used to position the user location when following. ### minZoomLevel ```tsx number ``` The lowest allowed zoom level. ### maxZoomLevel ```tsx number ``` The highest allowed zoom level. ### maxBounds ```tsx type MaxBounds = { ne: Position; /* FIX ME NO DESCRIPTION */ sw: Position; /* FIX ME NO DESCRIPTION */ } ``` The corners of a box defining the limits of where the camera can pan or zoom. ### defaultSettings ```tsx type DefaultSettings = { type: literal; /* Allows static check of the data type. For internal use only. */ centerCoordinate: Position; /* The location on which the map should center. */ bounds: intersection; /* The corners of a box around which the map should bound. Contains padding props for backwards compatibility; the root `padding` prop should be used instead. */ heading: number; /* Heading (bearing, orientation) of the map, measured in degrees clockwise from true north. */ pitch: number; /* The pitch toward the horizon measured in degrees, with 0 degrees resulting in a top-down view for a two-dimensional map. */ zoomLevel: number; /* The zoom level of the map. */ padding: signature; /* The viewport padding in points. */ animationDuration: number; /* The duration the map takes to animate to a new configuration. */ animationMode: 'flyTo' \| 'easeTo' \| 'linearTo' \| 'moveTo' \| 'none'; /* The easing or path the camera uses to animate to a new configuration. */ } ``` The configuration that the camera falls back on, if no other values are specified. ### allowUpdates ```tsx boolean ``` Whether the camera should send any configuration to the native module. Prevents unnecessary tile fetching and improves performance when the map is not visible. Defaults to `true`. ### triggerKey ```tsx string | number ``` Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target configuration. (Not yet implemented.) ### onUserTrackingModeChange ```tsx func ``` Executes when user tracking mode changes. **DEPRECATED** use Viewport#onStatusChanged instead. *signature:*`(event:MapboxGLEvent) => void` ## methods ### setCamera() Sets any camera properties, with default fallbacks if unspecified. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript camera.current?.setCamera({ centerCoordinate: [lon, lat], }); ``` ### fitBounds() Set the camera position to enclose the provided bounds, with optional
padding and duration. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript camera.fitBounds([lon, lat], [lon, lat]); camera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000); ``` ### flyTo() Sets the camera to center around the provided coordinate using a realistic 'travel'
animation, with optional duration. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript camera.flyTo([lon, lat]); camera.flyTo([lon, lat], 12000); ``` ### moveTo() Sets the camera to center around the provided coordinate, with optional duration. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript camera.moveTo([lon, lat], 200); camera.moveTo([lon, lat]); ``` ### zoomTo() Zooms the camera to the provided level, with optional duration. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript camera.zoomTo(16); camera.zoomTo(16, 100); ``` [Fit](../examples/Camera/Fit)### moveBy() Move the map by a given screen coordinate offset with optional animation.
Can be used to get the Android Auto (onScroll) or Carplay(mapTemplate didUpdatePanGestureWithTranslation) pan gesture applied, for these to work properly do not specify animationDuration. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ### scaleBy() Scale the map with optional animation.
Can be used to get Android Auto pinch gesture (onScale with scaleFactor > 0.0 and < 2.0) or Android Auto double tap (onScale with scaleFactor == 2.0) applied. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: |