@rnmapbox/maps 10.0.0-beta.74 → 10.0.0-beta.76

package/javascript/components/{MapView.js → MapView.tsx}

@@ -1,24 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import {
   View,
   StyleSheet,
   NativeModules,
   requireNativeComponent,
+  ViewProps,
+  NativeSyntheticEvent,
+  NativeMethods,
+  HostComponent,
+  LayoutChangeEvent,
 } from 'react-native';
 import { debounce } from 'debounce';
 
-import { makePoint, makeLatLngBounds } from '../utils/geoUtils';
 import {
   isFunction,
-  isNumber,
-  toJSONString,
   isAndroid,
-  viewPropTypes,
-  ornamentPositionPropType,
+  type NativeArg,
+  type OrnamentPositonProp,
 } from '../utils';
 import { getFilter } from '../utils/filterUtils';
 import Logger from '../utils/Logger';
+import { FilterExpression } from '../utils/MapboxStyles';
+import { type Position } from '../types/Position';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
@@ -39,276 +42,334 @@ const styles = StyleSheet.create({
 
 const defaultStyleURL = MapboxGL.StyleURL.Street;
 
+export type Point = {
+  x: number;
+  y: number;
+};
+
+type BBox = [number, number, number, number];
+
+export type RegionPayload = {
+  zoomLevel: number;
+  heading: number;
+  animated: boolean;
+  isUserInteraction: boolean;
+  visibleBounds: GeoJSON.Position[];
+  pitch: number;
+};
+
+/**
+ * v10 only - experimental
+ */
+export type MapState = {
+  properties: {
+    center: GeoJSON.Position;
+    bounds: {
+      ne: GeoJSON.Position;
+      sw: GeoJSON.Position;
+    };
+    zoom: number;
+    heading: number;
+    pitch: number;
+  };
+  gestures: {
+    isGestureActive: boolean;
+    isAnimatingFromGesture: boolean;
+  };
+};
+
+type Props = ViewProps & {
+  /**
+   * The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
+   */
+  contentInset?: number | number[];
+
+  /**
+   * The projection used when rendering the map
+   */
+  projection?: 'mercator' | 'globe';
+
+  /**
+   * Style URL for map - notice, if non is set it _will_ default to `MapboxGL.StyleURL.Street`
+   */
+  styleURL?: string;
+
+  /**
+   * StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
+   */
+  styleJSON?: string;
+
+  /**
+   * iOS: The preferred frame rate at which the map view is rendered.
+   * The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,
+   * which will adaptively set the preferred frame rate based on the capability of
+   * the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.
+   *
+   * Android: The maximum frame rate at which the map view is rendered, but it can't exceed the ability of device hardware.
+   * This property can be set to arbitrary integer values.
+   */
+  preferredFramesPerSecond?: number;
+
+  /**
+   * Automatically change the language of the map labels to the system’s preferred language,
+   * this is not something that can be toggled on/off
+   */
+  localizeLabels?: boolean;
+
+  /**
+   * Enable/Disable zoom on the map
+   */
+  zoomEnabled?: boolean;
+
+  /**
+   * Enable/Disable scroll on the map
+   */
+  scrollEnabled?: boolean;
+
+  /**
+   * Enable/Disable pitch on map
+   */
+  pitchEnabled?: boolean;
+
+  /**
+   * Enable/Disable rotation on map
+   */
+  rotateEnabled?: boolean;
+
+  /**
+   * The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,
+   * [requires](https://www.mapbox.com/help/how-attribution-works/) these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.
+   * If that applies to this map view, do not hide this view or remove any notices from it.
+   *
+   * You are additionally [required](https://www.mapbox.com/help/how-mobile-apps-work/#telemetry) to provide users with the option to disable anonymous usage and location sharing (telemetry).
+   * If this view is hidden, you must implement this setting elsewhere in your app. See our website for [Android](https://www.mapbox.com/android-docs/map-sdk/overview/#telemetry-opt-out) and [iOS](https://www.mapbox.com/ios-sdk/#telemetry_opt_out) for implementation details.
+   *
+   * Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES
+   * to your Info.plist
+   */
+  attributionEnabled?: boolean;
+
+  /**
+   * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map. By default on Android, the attribution with information icon (i) will be on the bottom left, while on iOS the mapbox logo will be on bottom left with information icon (i) on bottom right. Read more about mapbox attribution [here](https://docs.mapbox.com/help/getting-started/attribution/)
+   */
+  attributionPosition?: OrnamentPositonProp;
+
+  /**
+   * MapView's tintColor
+   */
+  tintColor?: string | number[];
+
+  /**
+   * Enable/Disable the logo on the map.
+   */
+  logoEnabled?: boolean;
+
+  /**
+   * Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
+   */
+  logoPosition?: OrnamentPositonProp;
+
+  /**
+   * Enable/Disable the compass from appearing on the map
+   */
+  compassEnabled: boolean;
+
+  /**
+   * [`mapbox` (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north
+   */
+  compassFadeWhenNorth?: boolean;
+
+  /**
+   * [`mapbox` (v10) implementation only] Adds compass offset, e.g. `{top: 8, left: 8}` will put the compass in top-left corner of the map
+   */
+  compassPosition?: OrnamentPositonProp;
+
+  /**
+   * Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight
+   */
+  compassViewPosition?: number;
+
+  /**
+   * Add margins to the compass with x and y values
+   */
+  compassViewMargins?: Point;
+
+  /**
+   * [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component.
+   */
+  compassImage?: string;
+
+  /**
+   * [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map
+   */
+  scaleBarEnabled?: boolean;
+
+  /**
+   * [`mapbox` (v10) implementation only] Adds scale bar offset, e.g. `{top: 8, left: 8}` will put the scale bar in top-left corner of the map
+   */
+  scaleBarPosition?: OrnamentPositonProp;
+
+  /**
+   * [Android only] Enable/Disable use of GLSurfaceView instead of TextureView.
+   */
+  surfaceView?: boolean;
+
+  /**
+   * Map press listener, gets called when a user presses the map
+   */
+  onPress?: (feature: GeoJSON.Feature) => void;
+
+  /**
+   * Map long press listener, gets called when a user long presses the map
+   */
+  onLongPress?: (feature: GeoJSON.Feature) => void;
+
+  /**
+   * <v10 only
+   *
+   * This event is triggered whenever the currently displayed map region is about to change.
+   *
+   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   */
+  onRegionWillChange?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+
+  /**
+   *
+   * This event is triggered whenever the currently displayed map region is changing.
+   *
+   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   */
+  onRegionIsChanging?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+
+  /**
+   *
+   * This event is triggered whenever the currently displayed map region finished changing.
+   *
+   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   */
+  onRegionDidChange?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+
+  /**
+   * iOS, v10 only, deprecated will be removed in next version - please use onRegionIsChanging.
+   */
+  onCameraChanged?: (state: MapState) => void;
+
+  /**
+   * iOS, v10 only, deprecated will be removed in next version - please use onRegionDidChange
+   */
+  onMapIdle?: (state: MapState) => void;
+
+  /**
+   * This event is triggered when the map is about to start loading a new map style.
+   */
+  onWillStartLoadingMap?: () => void;
+
+  /**
+   * This is triggered when the map has successfully loaded a new map style.
+   */
+  onDidFinishLoadingMap?: () => void;
+
+  /**
+   * This event is triggered when the map has failed to load a new map style. On v10 it's deprecated and replaced by onMapLoadingError
+   * @deprecated use onMapLoadingError
+   */
+  onDidFailLoadingMap?: () => void;
+
+  /**
+   * This event is tiggered when there is an error during map load. V10 only, replaces onDidFailLoadingMap, might be called multiple times and not exclusive with onDidFinishLoadingMap.
+   */
+  onMapLoadingError?: () => void;
+
+  /**
+   * This event is triggered when the map will start rendering a frame.
+   */
+  onWillStartRenderingFrame?: () => void;
+
+  /**
+   * This event is triggered when the map finished rendering a frame.
+   */
+  onDidFinishRenderingFrame?: () => void;
+
+  /**
+   * This event is triggered when the map fully finished rendering a frame.
+   */
+  onDidFinishRenderingFrameFully?: () => void;
+
+  /**
+   * This event is triggered when the map will start rendering the map.
+   */
+  onWillStartRenderingMap?: () => void;
+
+  /**
+   * This event is triggered when the map finished rendering the map.
+   */
+  onDidFinishRenderingMap?: () => void;
+
+  /**
+   * This event is triggered when the map fully finished rendering the map.
+   */
+  onDidFinishRenderingMapFully?: () => void;
+
+  /**
+   * This event is triggered when the user location is updated.
+   */
+  onUserLocationUpdate?: (feature: Location) => void;
+
+  /**
+   * This event is triggered when a style has finished loading.
+   */
+  onDidFinishLoadingStyle?: () => void;
+
+  /**
+   * The emitted frequency of regionwillchange events
+   */
+  regionWillChangeDebounceTime?: number;
+
+  /**
+   * The emitted frequency of regiondidchange events
+   */
+  regionDidChangeDebounceTime?: number;
+};
+
+type CallbablePropKeys =
+  | 'onRegionWillChange'
+  | 'onRegionIsChanging'
+  | 'onRegionDidChange'
+  | 'onUserLocationUpdate'
+  | 'onWillStartLoadingMap'
+  | 'onMapLoadingError'
+  | 'onDidFinishLoadingMap'
+  | 'onDidFailLoadingMap'
+  | 'onWillStartRenderingFrame'
+  | 'onDidFinishRenderingFrame'
+  | 'onDidFinishRenderingFrameFully'
+  | 'onWillStartRenderingMap'
+  | 'onDidFinishRenderingMap'
+  | 'onDidFinishRenderingMapFully'
+  | 'onDidFinishLoadingStyle'
+  | 'onMapIdle'
+  | 'onCameraChanged';
+
+type CallbablePropKeysWithoutOn = CallbablePropKeys extends `on${infer C}`
+  ? C
+  : never;
+
+type Debounced<F> = F & { clear(): void; flush(): void };
+
 /**
  * MapView backed by Mapbox Native GL
  */
 class MapView extends NativeBridgeComponent(
-  React.Component,
+  React.PureComponent<Props>,
   NATIVE_MODULE_NAME,
 ) {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
-     */
-    contentInset: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.number,
-    ]),
-
-    /**
-     * The projection used when rendering the map
-     */
-    projection: PropTypes.oneOf(['mercator', 'globe']),
-
-    /**
-     * Style for wrapping React Native View
-     */
-    style: PropTypes.any,
-
-    /**
-     * Style URL for map - notice, if non is set it _will_ default to `MapboxGL.StyleURL.Street`
-     */
-    styleURL: PropTypes.string,
-
-    /**
-     * StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
-     */
-    styleJSON: PropTypes.string,
-
-    /**
-     * iOS: The preferred frame rate at which the map view is rendered.
-     * The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,
-     * which will adaptively set the preferred frame rate based on the capability of
-     * the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.
-     *
-     * Android: The maximum frame rate at which the map view is rendered, but it can't exceed the ability of device hardware.
-     * This property can be set to arbitrary integer values.
-     */
-    preferredFramesPerSecond: PropTypes.number,
-
-    /**
-     * Automatically change the language of the map labels to the system’s preferred language,
-     * this is not something that can be toggled on/off
-     */
-    localizeLabels: PropTypes.bool,
-
-    /**
-     * Enable/Disable zoom on the map
-     */
-    zoomEnabled: PropTypes.bool,
-
-    /**
-     * Enable/Disable scroll on the map
-     */
-    scrollEnabled: PropTypes.bool,
-
-    /**
-     * Enable/Disable pitch on map
-     */
-    pitchEnabled: PropTypes.bool,
-
-    /**
-     * Enable/Disable rotation on map
-     */
-    rotateEnabled: PropTypes.bool,
-
-    /**
-     * The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,
-     * [requires](https://www.mapbox.com/help/how-attribution-works/) these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.
-     * If that applies to this map view, do not hide this view or remove any notices from it.
-     *
-     * You are additionally [required](https://www.mapbox.com/help/how-mobile-apps-work/#telemetry) to provide users with the option to disable anonymous usage and location sharing (telemetry).
-     * If this view is hidden, you must implement this setting elsewhere in your app. See our website for [Android](https://www.mapbox.com/android-docs/map-sdk/overview/#telemetry-opt-out) and [iOS](https://www.mapbox.com/ios-sdk/#telemetry_opt_out) for implementation details.
-     *
-     * Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES
-     * to your Info.plist
-     */
-    attributionEnabled: PropTypes.bool,
-
-    /**
-     * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map. By default on Android, the attribution with information icon (i) will be on the bottom left, while on iOS the mapbox logo will be on bottom left with information icon (i) on bottom right. Read more about mapbox attribution [here](https://docs.mapbox.com/help/getting-started/attribution/)
-     */
-    attributionPosition: ornamentPositionPropType,
-
-    /**
-     * MapView's tintColor
-     */
-    tintColor: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-
-    /**
-     * Enable/Disable the logo on the map.
-     */
-    logoEnabled: PropTypes.bool,
-
-    /**
-     * Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
-     */
-    logoPosition: ornamentPositionPropType,
-
-    /**
-     * Enable/Disable the compass from appearing on the map
-     */
-    compassEnabled: PropTypes.bool,
-
-    /**
-     * [`mapbox` (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north
-     */
-    compassFadeWhenNorth: PropTypes.bool,
-
-    /**
-     * [`mapbox` (v10) implementation only] Adds compass offset, e.g. `{top: 8, left: 8}` will put the compass in top-left corner of the map
-     */
-    compassPosition: ornamentPositionPropType,
-
-    /**
-     * Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight
-     */
-    compassViewPosition: PropTypes.number,
-
-    /**
-     * Add margins to the compass with x and y values
-     */
-    compassViewMargins: PropTypes.object,
-
-    /**
-     * [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component.
-     */
-    compassImage: PropTypes.string,
-
-    /**
-     * [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map
-     */
-    scaleBarEnabled: PropTypes.bool,
-
-    /**
-     * [`mapbox` (v10) implementation only] Adds scale bar offset, e.g. `{top: 8, left: 8}` will put the scale bar in top-left corner of the map
-     */
-    scaleBarPosition: ornamentPositionPropType,
-
-    /**
-     * [Android only] Enable/Disable use of GLSurfaceView instead of TextureView.
-     */
-    surfaceView: PropTypes.bool,
-
-    /**
-     * Map press listener, gets called when a user presses the map
-     */
-    onPress: PropTypes.func,
-
-    /**
-     * Map long press listener, gets called when a user long presses the map
-     */
-    onLongPress: PropTypes.func,
-
-    /**
-     * <v10 only
-     *
-     * This event is triggered whenever the currently displayed map region is about to change.
-     *
-     * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
-     */
-    onRegionWillChange: PropTypes.func,
-
-    /**
-     *
-     * This event is triggered whenever the currently displayed map region is changing.
-     *
-     * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
-     */
-    onRegionIsChanging: PropTypes.func,
-
-    /**
-     *
-     * This event is triggered whenever the currently displayed map region finished changing.
-     *
-     * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
-     */
-    onRegionDidChange: PropTypes.func,
-
-    /**
-     * iOS, v10 only, deprecated will be removed in next version - please use onRegionIsChanging.
-     */
-    onCameraChanged: PropTypes.func,
-
-    /**
-     * iOS, v10 only, deprecated will be removed in next version - please use onRegionDidChange
-     */
-    onMapIdle: PropTypes.func,
-
-    /**
-     * This event is triggered when the map is about to start loading a new map style.
-     */
-    onWillStartLoadingMap: PropTypes.func,
-
-    /**
-     * This is triggered when the map has successfully loaded a new map style.
-     */
-    onDidFinishLoadingMap: PropTypes.func,
-
-    /**
-     * This event is triggered when the map has failed to load a new map style. On v10 it's deprecated and replaced by onMapLoadingError
-     */
-    onDidFailLoadingMap: PropTypes.func,
-
-    /**
-     * This event is tiggered when there is an error during map load. V10 only, replaces onDidFailLoadingMap, might be called multiple times and not exclusive with onDidFinishLoadingMap.
-     */
-    onMapLoadingError: PropTypes.func,
-
-    /**
-     * This event is triggered when the map will start rendering a frame.
-     */
-    onWillStartRenderingFrame: PropTypes.func,
-
-    /**
-     * This event is triggered when the map finished rendering a frame.
-     */
-    onDidFinishRenderingFrame: PropTypes.func,
-
-    /**
-     * This event is triggered when the map fully finished rendering a frame.
-     */
-    onDidFinishRenderingFrameFully: PropTypes.func,
-
-    /**
-     * This event is triggered when the map will start rendering the map.
-     */
-    onWillStartRenderingMap: PropTypes.func,
-
-    /**
-     * This event is triggered when the map finished rendering the map.
-     */
-    onDidFinishRenderingMap: PropTypes.func,
-
-    /**
-     * This event is triggered when the map fully finished rendering the map.
-     */
-    onDidFinishRenderingMapFully: PropTypes.func,
-
-    /**
-     * This event is triggered when the user location is updated.
-     */
-    onUserLocationUpdate: PropTypes.func,
-
-    /**
-     * This event is triggered when a style has finished loading.
-     */
-    onDidFinishLoadingStyle: PropTypes.func,
-
-    /**
-     * The emitted frequency of regionwillchange events
-     */
-    regionWillChangeDebounceTime: PropTypes.number,
-
-    /**
-     * The emitted frequency of regiondidchange events
-     */
-    regionDidChangeDebounceTime: PropTypes.number,
-  };
-
-  static defaultProps = {
+  static defaultProps: Props = {
     projection: 'mercator',
     localizeLabels: false,
     scrollEnabled: true,
@@ -324,7 +385,33 @@ class MapView extends NativeBridgeComponent(
     regionDidChangeDebounceTime: 500,
   };
 
-  constructor(props) {
+  logger: Logger;
+  _onDebouncedRegionWillChange: Debounced<
+    (
+      payload: GeoJSON.Feature<
+        GeoJSON.Point,
+        RegionPayload & { isAnimatingFromUserInteraction: boolean }
+      >,
+    ) => void
+  >;
+  _onDebouncedRegionDidChange: Debounced<
+    (
+      payload: GeoJSON.Feature<
+        GeoJSON.Point,
+        RegionPayload & { isAnimatingFromUserInteraction: boolean }
+      >,
+    ) => void
+  >;
+  _nativeRef?: RCTMGLMapViewRefType;
+  state: {
+    isReady: boolean | null;
+    region: null;
+    width: number;
+    height: number;
+    isUserInteraction: boolean;
+  };
+
+  constructor(props: Props) {
     super(props);
 
     this.logger = Logger.sharedInstance();
@@ -366,15 +453,15 @@ class MapView extends NativeBridgeComponent(
     this.logger.stop();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     this._setHandledMapChangedEvents(nextProps);
   }
 
-  _setHandledMapChangedEvents(props) {
+  _setHandledMapChangedEvents(props: Props) {
     if (isAndroid() || MapboxGL.MapboxV10) {
-      const events = [];
+      const events: string[] = [];
 
-      function addIfHasHandler(name) {
+      function addIfHasHandler(name: CallbablePropKeysWithoutOn) {
         if (props[`on${name}`] != null) {
           if (MapboxGL.EventTypes[name] == null) {
             if (name === 'DidFailLoadingMap') {
@@ -447,13 +534,12 @@ class MapView extends NativeBridgeComponent(
    * @example
    * const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);
    *
-   * @param {Array<Number>} coordinate - A point expressed in the map view's coordinate system.
+   * @param {Array<number>} coordinate - A point expressed in the map view's coordinate system.
    * @return {Array}
    */
-  async getPointInView(coordinate) {
-    const res = await this._runNativeCommand(
+  async getPointInView(coordinate: Position): Promise<Position> {
+    const res = await this._runNative<{ pointInView: Position }>(
       'getPointInView',
-      this._nativeRef,
       [coordinate],
     );
     return res.pointInView;
@@ -465,13 +551,12 @@ class MapView extends NativeBridgeComponent(
    * @example
    * const coordinate = await this._map.getCoordinateFromView([100, 100]);
    *
-   * @param {Array<Number>} point - A point expressed in the given view’s coordinate system.
+   * @param {Array<number>} point - A point expressed in the given view’s coordinate system.
    * @return {Array}
    */
-  async getCoordinateFromView(point) {
-    const res = await this._runNativeCommand(
+  async getCoordinateFromView(point: Position): Promise<Position> {
+    const res = await this._runNative<{ coordinateFromView: Position }>(
       'getCoordinateFromView',
-      this._nativeRef,
       [point],
     );
     return res.coordinateFromView;
@@ -485,10 +570,9 @@ class MapView extends NativeBridgeComponent(
    *
    * @return {Array}
    */
-  async getVisibleBounds() {
-    const res = await this._runNativeCommand(
+  async getVisibleBounds(): Promise<[Position, Position]> {
+    const res = await this._runNative<{ visibleBounds: [Position, Position] }>(
       'getVisibleBounds',
-      this._nativeRef,
     );
     return res.visibleBounds;
   }
@@ -504,22 +588,26 @@ class MapView extends NativeBridgeComponent(
    * @param  {Array=} layerIDs - A array of layer id's to filter the features by
    * @return {FeatureCollection}
    */
-  async queryRenderedFeaturesAtPoint(coordinate, filter = [], layerIDs = []) {
+
+  async queryRenderedFeaturesAtPoint(
+    coordinate: Position,
+    filter: FilterExpression | [] = [],
+    layerIDs: string[] = [],
+  ): Promise<GeoJSON.FeatureCollection | undefined> {
     if (!coordinate || coordinate.length < 2) {
       throw new Error('Must pass in valid coordinate[lng, lat]');
     }
 
-    const res = await this._runNativeCommand(
+    const res = await this._runNative<{ data: GeoJSON.FeatureCollection }>(
       'queryRenderedFeaturesAtPoint',
-      this._nativeRef,
       [coordinate, getFilter(filter), layerIDs],
     );
 
     if (isAndroid()) {
-      return JSON.parse(res.data);
+      return JSON.parse(res.data as unknown as string);
     }
 
-    return res.data;
+    return res.data as GeoJSON.FeatureCollection;
   }
 
   /**
@@ -535,19 +623,22 @@ class MapView extends NativeBridgeComponent(
    * @param  {Array=} layerIDs -  A array of layer id's to filter the features by
    * @return {FeatureCollection}
    */
-  async queryRenderedFeaturesInRect(bbox, filter = [], layerIDs = null) {
+  async queryRenderedFeaturesInRect(
+    bbox: BBox | [],
+    filter: FilterExpression | [] = [],
+    layerIDs: string[] | null = null,
+  ): Promise<GeoJSON.FeatureCollection | undefined> {
     if (
       bbox != null &&
       (bbox.length === 4 || (MapboxGL.MapboxV10 && bbox.length === 0))
     ) {
-      const res = await this._runNativeCommand(
+      const res = await this._runNative<{ data: GeoJSON.FeatureCollection }>(
         'queryRenderedFeaturesInRect',
-        this._nativeRef,
         [bbox, getFilter(filter), layerIDs],
       );
 
       if (isAndroid()) {
-        return JSON.parse(res.data);
+        return JSON.parse(res.data as unknown as string);
       }
 
       return res.data;
@@ -560,6 +651,7 @@ class MapView extends NativeBridgeComponent(
 
   /**
    * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
+   * @deprecated use Camera#setCamera
    */
   setCamera() {
     console.warn(
@@ -567,13 +659,24 @@ class MapView extends NativeBridgeComponent(
     );
   }
 
+  _runNative<ReturnType>(
+    methodName: string,
+    args: NativeArg[] = [],
+  ): Promise<ReturnType> {
+    return super._runNativeCommand<typeof RCTMGLMapView, ReturnType>(
+      methodName,
+      this._nativeRef as HostComponent<NativeProps> | undefined,
+      args,
+    );
+  }
+
   /**
    * Takes snapshot of map with current tiles and returns a URI to the image
    * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
    * @return {String}
    */
-  async takeSnap(writeToDisk = false) {
-    const res = await this._runNativeCommand('takeSnap', this._nativeRef, [
+  async takeSnap(writeToDisk = false): Promise<string> {
+    const res = await this._runNative<{ uri: string }>('takeSnap', [
       writeToDisk,
     ]);
     return res.uri;
@@ -588,8 +691,8 @@ class MapView extends NativeBridgeComponent(
    * @return {Number}
    */
 
-  async getZoom() {
-    const res = await this._runNativeCommand('getZoom', this._nativeRef);
+  async getZoom(): Promise<number> {
+    const res = await this._runNative<{ zoom: number }>('getZoom');
     return res.zoom;
   }
 
@@ -601,8 +704,8 @@ class MapView extends NativeBridgeComponent(
    *
    * @return {Array<Number>} Coordinates
    */
-  async getCenter() {
-    const res = await this._runNativeCommand('getCenter', this._nativeRef);
+  async getCenter(): Promise<Position> {
+    const res = await this._runNative<{ center: Position }>('getCenter');
     return res.center;
   }
 
@@ -614,10 +717,9 @@ class MapView extends NativeBridgeComponent(
    * @param {Array<Number>} coordinate - the coordinates to query elevation at
    * @return {Number}
    */
-  async queryTerrainElevation(coordinate) {
-    const res = await this._runNativeCommand(
+  async queryTerrainElevation(coordinate: Position): Promise<number> {
+    const res = await this._runNative<{ data: number }>(
       'queryTerrainElevation',
-      this._nativeRef,
       [coordinate],
     );
     return res.data;
@@ -633,8 +735,12 @@ class MapView extends NativeBridgeComponent(
    * @param {String} sourceId - Identifier of the target source (e.g. 'composite')
    * @param {String=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
    */
-  setSourceVisibility(visible, sourceId, sourceLayerId = undefined) {
-    this._runNativeCommand('setSourceVisibility', this._nativeRef, [
+  setSourceVisibility(
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId: string | null = null,
+  ) {
+    this._runNative<void>('setSourceVisibility', [
       visible,
       sourceId,
       sourceLayerId,
@@ -649,47 +755,24 @@ class MapView extends NativeBridgeComponent(
     return this._runNativeCommand('showAttribution', this._nativeRef);
   }
 
-  _createStopConfig(config = {}) {
-    const stopConfig = {
-      mode: isNumber(config.mode) ? config.mode : MapboxGL.CameraModes.Ease,
-      pitch: config.pitch,
-      heading: config.heading,
-      duration: config.duration || 2000,
-      zoom: config.zoom,
-    };
-
-    if (config.centerCoordinate) {
-      stopConfig.centerCoordinate = toJSONString(
-        makePoint(config.centerCoordinate),
-      );
-    }
-
-    if (config.bounds && config.bounds.ne && config.bounds.sw) {
-      const { ne, sw, paddingLeft, paddingRight, paddingTop, paddingBottom } =
-        config.bounds;
-      stopConfig.bounds = toJSONString(makeLatLngBounds(ne, sw));
-      stopConfig.boundsPaddingTop = paddingTop || 0;
-      stopConfig.boundsPaddingRight = paddingRight || 0;
-      stopConfig.boundsPaddingBottom = paddingBottom || 0;
-      stopConfig.boundsPaddingLeft = paddingLeft || 0;
-    }
-
-    return stopConfig;
-  }
-
-  _onPress(e) {
+  _onPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>) {
     if (isFunction(this.props.onPress)) {
       this.props.onPress(e.nativeEvent.payload);
     }
   }
 
-  _onLongPress(e) {
+  _onLongPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>) {
     if (isFunction(this.props.onLongPress)) {
       this.props.onLongPress(e.nativeEvent.payload);
     }
   }
 
-  _onRegionWillChange(payload) {
+  _onRegionWillChange(
+    payload: GeoJSON.Feature<
+      GeoJSON.Point,
+      RegionPayload & { isAnimatingFromUserInteraction: boolean }
+    >,
+  ) {
     if (isFunction(this.props.onRegionWillChange)) {
       this.props.onRegionWillChange(payload);
     }
@@ -700,23 +783,31 @@ class MapView extends NativeBridgeComponent(
     });
   }
 
-  _onRegionDidChange(payload) {
+  _onRegionDidChange(payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>) {
     if (isFunction(this.props.onRegionDidChange)) {
       this.props.onRegionDidChange(payload);
     }
     this.setState({ region: payload });
   }
 
-  _onChange(e) {
+  _onChange(
+    e: NativeSyntheticEvent<{
+      type: string;
+      payload: GeoJSON.Feature<
+        GeoJSON.Point,
+        RegionPayload & { isAnimatingFromUserInteraction: boolean }
+      >;
+    }>,
+  ) {
     const { regionWillChangeDebounceTime, regionDidChangeDebounceTime } =
       this.props;
     const { type, payload } = e.nativeEvent;
-    let propName = '';
-    let deprecatedPropName = '';
+    let propName: CallbablePropKeys | '' = '';
+    let deprecatedPropName: CallbablePropKeys | '' = '';
 
     switch (type) {
       case MapboxGL.EventTypes.RegionWillChange:
-        if (regionWillChangeDebounceTime > 0) {
+        if (regionWillChangeDebounceTime && regionWillChangeDebounceTime > 0) {
           this._onDebouncedRegionWillChange(payload);
         } else {
           propName = 'onRegionWillChange';
@@ -726,7 +817,7 @@ class MapView extends NativeBridgeComponent(
         propName = 'onRegionIsChanging';
         break;
       case MapboxGL.EventTypes.RegionDidChange:
-        if (regionDidChangeDebounceTime > 0) {
+        if (regionDidChangeDebounceTime && regionDidChangeDebounceTime > 0) {
           this._onDebouncedRegionDidChange(payload);
         } else {
           propName = 'onRegionDidChange';
@@ -779,15 +870,15 @@ class MapView extends NativeBridgeComponent(
         console.warn('Unhandled event callback type', type);
     }
 
-    if (propName.length) {
+    if (propName !== '') {
       this._handleOnChange(propName, payload);
     }
-    if (deprecatedPropName.length) {
+    if (deprecatedPropName !== '') {
       this._handleOnChange(deprecatedPropName, payload);
     }
   }
 
-  _onLayout(e) {
+  _onLayout(e: LayoutChangeEvent) {
     this.setState({
       isReady: true,
       width: e.nativeEvent.layout.width,
@@ -795,31 +886,13 @@ class MapView extends NativeBridgeComponent(
     });
   }
 
-  _handleOnChange(propName, payload) {
-    if (isFunction(this.props[propName])) {
-      this.props[propName](payload);
+  _handleOnChange<T>(propName: CallbablePropKeys, payload: object) {
+    const func = this.props[propName] as (payload: object) => void;
+    if (func && isFunction(func)) {
+      func(payload);
     }
   }
 
-  _getCenterCoordinate() {
-    if (!this.props.centerCoordinate) {
-      return;
-    }
-    return toJSONString(makePoint(this.props.centerCoordinate));
-  }
-
-  _getVisibleCoordinateBounds() {
-    if (!this.props.visibleCoordinateBounds) {
-      return;
-    }
-    return toJSONString(
-      makeLatLngBounds(
-        this.props.visibleCoordinateBounds[0],
-        this.props.visibleCoordinateBounds[1],
-      ),
-    );
-  }
-
   _getContentInset() {
     if (!this.props.contentInset) {
       return;
@@ -832,18 +905,18 @@ class MapView extends NativeBridgeComponent(
     return this.props.contentInset;
   }
 
-  _setNativeRef(nativeRef) {
+  _setNativeRef(nativeRef: RCTMGLMapViewRefType) {
     this._nativeRef = nativeRef;
     super._runPendingNativeCommands(nativeRef);
   }
 
-  setNativeProps(props) {
+  setNativeProps(props: NativeProps) {
     if (this._nativeRef) {
       this._nativeRef.setNativeProps(props);
     }
   }
 
-  _setStyleURL(props) {
+  _setStyleURL(props: Props) {
     // user set a styleURL, no need to alter props
     if (props.styleURL) {
       return;
@@ -871,7 +944,7 @@ class MapView extends NativeBridgeComponent(
     this._setStyleURL(props);
 
     const callbacks = {
-      ref: (nativeRef) => this._setNativeRef(nativeRef),
+      ref: (nativeRef: RCTMGLMapViewRefType) => this._setNativeRef(nativeRef),
       onPress: this._onPress,
       onLongPress: this._onLongPress,
       onMapChange: this._onChange,
@@ -897,7 +970,7 @@ class MapView extends NativeBridgeComponent(
       <View
         onLayout={this._onLayout}
         style={this.props.style}
-        testID={mapView ? null : this.props.testID}
+        testID={mapView ? undefined : this.props.testID}
       >
         {mapView}
       </View>
@@ -905,18 +978,18 @@ class MapView extends NativeBridgeComponent(
   }
 }
 
-const RCTMGLMapView = requireNativeComponent(NATIVE_MODULE_NAME, MapView, {
-  nativeOnly: { onMapChange: true, onAndroidCallback: true },
-});
+type NativeProps = Omit<Props, 'onPress' | 'onLongPress'> & {
+  onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
+  onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
+};
+
+type RCTMGLMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
+const RCTMGLMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
-let RCTMGLAndroidTextureMapView;
+let RCTMGLAndroidTextureMapView: typeof RCTMGLMapView;
 if (isAndroid()) {
-  RCTMGLAndroidTextureMapView = requireNativeComponent(
+  RCTMGLAndroidTextureMapView = requireNativeComponent<NativeProps>(
     ANDROID_TEXTURE_NATIVE_MODULE_NAME,
-    MapView,
-    {
-      nativeOnly: { onMapChange: true, onAndroidCallback: true },
-    },
   );
 }