@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.1

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

@@ -1,23 +1,22 @@
-import {makePoint, makeLatLngBounds} from '../utils/geoUtils';
-import {
-  isFunction,
-  isNumber,
-  toJSONString,
-  isAndroid,
-  viewPropTypes,
-} from '../utils';
+import {FilterExpression} from '../utils/MaplibreStyles';
+import {Location} from '../modules/location/locationManager';
+import {isFunction, isAndroid} from '../utils';
 import {getFilter} from '../utils/filterUtils';
 import Logger from '../utils/Logger';
+import BaseProps from '../types/BaseProps';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component, ReactElement, ReactNode} from 'react';
 import {
   View,
   StyleSheet,
   NativeModules,
   requireNativeComponent,
+  ViewProps,
+  NativeMethods,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
 } from 'react-native';
 import {debounce} from 'debounce';
 
@@ -38,228 +37,254 @@ const styles = StyleSheet.create({
 
 const defaultStyleURL = MapLibreGL.StyleURL.Street;
 
+export interface RegionPayload {
+  zoomLevel: number;
+  heading: number;
+  animated: boolean;
+  isUserInteraction: boolean;
+  visibleBounds: GeoJSON.Position[];
+  pitch: number;
+}
+
+interface Bounds {
+  ne: GeoJSON.Position;
+  sw: GeoJSON.Position;
+}
+
+interface MapViewProps extends BaseProps {
+  /**
+   * The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
+   */
+  contentInset?: number[] | number;
+  /**
+   * Style for wrapping React Native View
+   */
+  style?: ViewProps['style'];
+  /**
+   * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
+   */
+  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 excess 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;
+  /**
+   * Enable/Disable attribution on map.
+   *
+   * This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.
+   * Other providers do not require this.
+   */
+  attributionEnabled?: boolean;
+  /**
+   * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map
+   */
+  attributionPosition?:
+    | {
+        top?: number;
+        left?: number;
+      }
+    | {
+        top?: number;
+        right?: number;
+      }
+    | {
+        bottom?: number;
+        left?: number;
+      }
+    | {
+        bottom?: number;
+        right?: number;
+      };
+  /**
+   * MapView's tintColor
+   */
+  tintColor?: string | unknown[];
+  /**
+   * 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?:
+    | {
+        top?: number;
+        left?: number;
+      }
+    | {
+        top?: number;
+        right?: number;
+      }
+    | {
+        bottom?: number;
+        left?: number;
+      }
+    | {
+        bottom?: number;
+        right?: number;
+      };
+  /**
+   * Enable/Disable the compass from appearing on the map
+   */
+  compassEnabled?: boolean;
+  /**
+   * 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?: object;
+  /**
+   * [Android only] Enable/Disable use of GLSurfaceView insted 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;
+  /**
+   * 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;
+  /**
+   * 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.
+   */
+  onDidFailLoadingMap?(): 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?: (location: 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;
+
+  children: ReactNode;
+}
+
+type Fn = (...args: any) => any;
+type CallableProps = {
+  [Prop in keyof MapViewProps]-?: MapViewProps[Prop] extends Fn | undefined
+    ? Prop
+    : never;
+}[keyof MapViewProps];
+
+interface NativeProps extends Omit<MapViewProps, 'onPress' | 'onLongPress'> {
+  onPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
+  onLongPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
+}
+
+export interface MapViewState {
+  isReady: boolean;
+  width: number;
+  height: number;
+  region: RegionPayload | null;
+  isUserInteraction: boolean;
+}
+
 /**
  * MapView backed by MapLibre GL Native
  */
-class MapView extends NativeBridgeComponent(React.Component) {
-  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,
-    ]),
-
-    /**
-     * Style for wrapping React Native View
-     */
-    style: PropTypes.any,
-
-    /**
-     * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.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 excess 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,
-
-    /**
-     * Enable/Disable attribution on map.
-     *
-     * This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.
-     * Other providers do not require this.
-     */
-    attributionEnabled: PropTypes.bool,
-
-    /**
-     * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map
-     */
-    attributionPosition: PropTypes.oneOfType([
-      PropTypes.shape({top: PropTypes.number, left: PropTypes.number}),
-      PropTypes.shape({top: PropTypes.number, right: PropTypes.number}),
-      PropTypes.shape({bottom: PropTypes.number, left: PropTypes.number}),
-      PropTypes.shape({bottom: PropTypes.number, right: PropTypes.number}),
-    ]),
-
-    /**
-     * 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: PropTypes.oneOfType([
-      PropTypes.shape({top: PropTypes.number, left: PropTypes.number}),
-      PropTypes.shape({top: PropTypes.number, right: PropTypes.number}),
-      PropTypes.shape({bottom: PropTypes.number, left: PropTypes.number}),
-      PropTypes.shape({bottom: PropTypes.number, right: PropTypes.number}),
-    ]),
-
-    /**
-     * Enable/Disable the compass from appearing on the map
-     */
-    compassEnabled: PropTypes.bool,
-
-    /**
-     * 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,
-
-    /**
-     * [Android only] Enable/Disable use of GLSurfaceView insted 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,
-
-    /**
-     * 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,
-
-    /**
-     * 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.
-     */
-    onDidFailLoadingMap: 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,
-  };
-
+class MapView extends NativeBridgeComponent(
+  React.Component<MapViewProps, MapViewState>,
+  NATIVE_MODULE_NAME,
+) {
   static defaultProps = {
     localizeLabels: false,
     scrollEnabled: true,
@@ -272,14 +297,19 @@ class MapView extends NativeBridgeComponent(React.Component) {
     regionDidChangeDebounceTime: 500,
   };
 
-  constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+  logger: Logger;
+  _nativeRef?: RCTMGLMapViewRefType;
+  _onDebouncedRegionWillChange: ReturnType<typeof debounce>;
+  _onDebouncedRegionDidChange: ReturnType<typeof debounce>;
+
+  constructor(props: MapViewProps) {
+    super(props);
 
     this.logger = Logger.sharedInstance();
     this.logger.start();
 
     this.state = {
-      isReady: null,
+      isReady: false,
       region: null,
       width: 0,
       height: 0,
@@ -304,21 +334,21 @@ class MapView extends NativeBridgeComponent(React.Component) {
     );
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this._setHandledMapChangedEvents(this.props);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this._onDebouncedRegionWillChange.clear();
     this._onDebouncedRegionDidChange.clear();
     this.logger.stop();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: MapViewProps): void {
     this._setHandledMapChangedEvents(nextProps);
   }
 
-  _setHandledMapChangedEvents(props) {
+  _setHandledMapChangedEvents(props: MapViewProps): void {
     if (isAndroid()) {
       const events = [];
 
@@ -382,8 +412,8 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @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: GeoJSON.Position): Promise<GeoJSON.Point> {
+    const res: {pointInView: GeoJSON.Point} = await this._runNativeCommand(
       'getPointInView',
       this._nativeRef,
       [coordinate],
@@ -400,12 +430,11 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @param {Array<Number>} point - A point expressed in the given view’s coordinate system.
    * @return {Array}
    */
-  async getCoordinateFromView(point) {
-    const res = await this._runNativeCommand(
-      'getCoordinateFromView',
-      this._nativeRef,
-      [point],
-    );
+  async getCoordinateFromView(point: number[]): Promise<GeoJSON.Position> {
+    const res: {coordinateFromView: GeoJSON.Position} =
+      await this._runNativeCommand('getCoordinateFromView', this._nativeRef, [
+        point,
+      ]);
     return res.coordinateFromView;
   }
 
@@ -417,8 +446,8 @@ class MapView extends NativeBridgeComponent(React.Component) {
    *
    * @return {Array}
    */
-  async getVisibleBounds() {
-    const res = await this._runNativeCommand(
+  async getVisibleBounds(): Promise<Bounds> {
+    const res: {visibleBounds: Bounds} = await this._runNativeCommand(
       'getVisibleBounds',
       this._nativeRef,
     );
@@ -434,24 +463,29 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
    * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
    * @param  {Array=} layerIDs - A array of layer id's to filter the features by
-   * @return {FeatureCollection}
+   * @return {GeoJSON.FeatureCollection}
    */
-  async queryRenderedFeaturesAtPoint(coordinate, filter = [], layerIDs = []) {
+  async queryRenderedFeaturesAtPoint(
+    coordinate: GeoJSON.Position,
+    filter?: FilterExpression,
+    layerIDs = [],
+  ): Promise<GeoJSON.FeatureCollection> {
     if (!coordinate || coordinate.length < 2) {
       throw new Error('Must pass in valid coordinate[lng, lat]');
     }
 
-    const res = await this._runNativeCommand(
-      'queryRenderedFeaturesAtPoint',
-      this._nativeRef,
-      [coordinate, getFilter(filter), layerIDs],
-    );
+    const res: {data: string | GeoJSON.FeatureCollection} =
+      await this._runNativeCommand(
+        'queryRenderedFeaturesAtPoint',
+        this._nativeRef,
+        [coordinate, getFilter(filter), layerIDs],
+      );
 
     if (isAndroid()) {
-      return JSON.parse(res.data);
+      return JSON.parse(res.data as string);
     }
 
-    return res.data;
+    return res.data as GeoJSON.FeatureCollection;
   }
 
   /**
@@ -464,31 +498,36 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @param  {Array<Number>} bbox - A rectangle expressed in the map view’s coordinate system.
    * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
    * @param  {Array=} layerIDs -  A array of layer id's to filter the features by
-   * @return {FeatureCollection}
+   * @return {GeoJSON.FeatureCollection}
    */
-  async queryRenderedFeaturesInRect(bbox, filter = [], layerIDs = []) {
+  async queryRenderedFeaturesInRect(
+    bbox: GeoJSON.BBox,
+    filter?: FilterExpression,
+    layerIDs = [],
+  ): Promise<GeoJSON.FeatureCollection> {
     if (!bbox || bbox.length !== 4) {
       throw new Error(
         'Must pass in a valid bounding box[top, right, bottom, left]',
       );
     }
-    const res = await this._runNativeCommand(
-      'queryRenderedFeaturesInRect',
-      this._nativeRef,
-      [bbox, getFilter(filter), layerIDs],
-    );
+    const res: {data: string | GeoJSON.FeatureCollection} =
+      await this._runNativeCommand(
+        'queryRenderedFeaturesInRect',
+        this._nativeRef,
+        [bbox, getFilter(filter), layerIDs],
+      );
 
     if (isAndroid()) {
-      return JSON.parse(res.data);
+      return JSON.parse(res.data as string);
     }
 
-    return res.data;
+    return res.data as GeoJSON.FeatureCollection;
   }
 
   /**
    * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
    */
-  setCamera() {
+  setCamera(): void {
     console.warn(
       'MapView.setCamera is deprecated - please use Camera#setCamera',
     );
@@ -499,10 +538,12 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @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, [
-      writeToDisk,
-    ]);
+  async takeSnap(writeToDisk = false): Promise<string> {
+    const res: {uri: string} = await this._runNativeCommand(
+      'takeSnap',
+      this._nativeRef,
+      [writeToDisk],
+    );
     return res.uri;
   }
 
@@ -515,8 +556,11 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @return {Number}
    */
 
-  async getZoom() {
-    const res = await this._runNativeCommand('getZoom', this._nativeRef);
+  async getZoom(): Promise<number> {
+    const res: {zoom: number} = await this._runNativeCommand(
+      'getZoom',
+      this._nativeRef,
+    );
     return res.zoom;
   }
 
@@ -528,8 +572,11 @@ class MapView extends NativeBridgeComponent(React.Component) {
    *
    * @return {Array<Number>} Coordinates
    */
-  async getCenter() {
-    const res = await this._runNativeCommand('getCenter', this._nativeRef);
+  async getCenter(): Promise<GeoJSON.Position> {
+    const res: {center: GeoJSON.Position} = await this._runNativeCommand(
+      'getCenter',
+      this._nativeRef,
+    );
     return res.center;
   }
 
@@ -543,7 +590,11 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * @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) {
+  setSourceVisibility(
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId: string | null = null,
+  ): void {
     this._runNativeCommand('setSourceVisibility', this._nativeRef, [
       visible,
       sourceId,
@@ -555,73 +606,54 @@ class MapView extends NativeBridgeComponent(React.Component) {
    * Show the attribution and telemetry action sheet.
    * If you implement a custom attribution button, you should add this action to the button.
    */
-  showAttribution() {
-    return this._runNativeCommand('showAttribution', this._nativeRef);
-  }
-
-  _createStopConfig(config = {}) {
-    const stopConfig = {
-      mode: isNumber(config.mode) ? config.mode : MapLibreGL.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;
+  async showAttribution(): Promise<void> {
+    this._runNativeCommand('showAttribution', this._nativeRef);
   }
 
-  _onPress(e) {
+  _onPress(e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void {
     if (isFunction(this.props.onPress)) {
       this.props.onPress(e.nativeEvent.payload);
     }
   }
 
-  _onLongPress(e) {
+  _onLongPress(e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void {
     if (isFunction(this.props.onLongPress)) {
       this.props.onLongPress(e.nativeEvent.payload);
     }
   }
 
-  _onRegionWillChange(payload) {
+  _onRegionWillChange(
+    payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ): void {
     if (isFunction(this.props.onRegionWillChange)) {
       this.props.onRegionWillChange(payload);
     }
     this.setState({isUserInteraction: payload.properties.isUserInteraction});
   }
 
-  _onRegionDidChange(payload) {
+  _onRegionDidChange(
+    payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ): void {
     if (isFunction(this.props.onRegionDidChange)) {
       this.props.onRegionDidChange(payload);
     }
     this.setState({region: payload});
   }
 
-  _onChange(e) {
+  _onChange(
+    e: NativeSyntheticEvent<{
+      type: string;
+      payload?: GeoJSON.Feature | Location;
+    }>,
+  ): void {
     const {regionWillChangeDebounceTime, regionDidChangeDebounceTime} =
       this.props;
     const {type, payload} = e.nativeEvent;
-    let propName = '';
+    let propName: CallableProps | undefined;
 
     switch (type) {
       case MapLibreGL.EventTypes.RegionWillChange:
-        if (regionWillChangeDebounceTime > 0) {
+        if (regionWillChangeDebounceTime && regionWillChangeDebounceTime > 0) {
           this._onDebouncedRegionWillChange(payload);
         } else {
           propName = 'onRegionWillChange';
@@ -631,7 +663,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
         propName = 'onRegionIsChanging';
         break;
       case MapLibreGL.EventTypes.RegionDidChange:
-        if (regionDidChangeDebounceTime > 0) {
+        if (regionDidChangeDebounceTime && regionDidChangeDebounceTime > 0) {
           this._onDebouncedRegionDidChange(payload);
         } else {
           propName = 'onRegionDidChange';
@@ -674,12 +706,12 @@ class MapView extends NativeBridgeComponent(React.Component) {
         console.warn('Unhandled event callback type', type);
     }
 
-    if (propName.length) {
+    if (propName) {
       this._handleOnChange(propName, payload);
     }
   }
 
-  _onLayout(e) {
+  _onLayout(e: LayoutChangeEvent): void {
     this.setState({
       isReady: true,
       width: e.nativeEvent.layout.width,
@@ -687,32 +719,17 @@ class MapView extends NativeBridgeComponent(React.Component) {
     });
   }
 
-  _handleOnChange(propName, payload) {
-    if (isFunction(this.props[propName])) {
-      this.props[propName](payload);
+  _handleOnChange<T extends CallableProps>(
+    propName: T,
+    payload?: object,
+  ): void {
+    const callable = this.props[propName] as (payload?: object) => void;
+    if (callable && isFunction(callable)) {
+      callable(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() {
+  _getContentInset(): number[] | undefined {
     if (!this.props.contentInset) {
       return;
     }
@@ -724,18 +741,18 @@ class MapView extends NativeBridgeComponent(React.Component) {
     return this.props.contentInset;
   }
 
-  _setNativeRef(nativeRef) {
+  _setNativeRef(nativeRef: RCTMGLMapViewRefType): void {
     this._nativeRef = nativeRef;
     super._runPendingNativeCommands(nativeRef);
   }
 
-  setNativeProps(props) {
+  setNativeProps(props: NativeProps): void {
     if (this._nativeRef) {
       this._nativeRef.setNativeProps(props);
     }
   }
 
-  _setStyleURL(props) {
+  _setStyleURL(props: MapViewProps): void {
     // user set a styleURL, no need to alter props
     if (props.styleURL) {
       return;
@@ -753,7 +770,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
     }
   }
 
-  render() {
+  render(): ReactElement {
     const props = {
       ...this.props,
       contentInset: this._getContentInset(),
@@ -763,14 +780,14 @@ class MapView extends NativeBridgeComponent(React.Component) {
     this._setStyleURL(props);
 
     const callbacks = {
-      ref: nativeRef => this._setNativeRef(nativeRef),
+      ref: (ref: RCTMGLMapViewRefType) => this._setNativeRef(ref),
       onPress: this._onPress,
       onLongPress: this._onLongPress,
       onMapChange: this._onChange,
       onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
 
-    let mapView = null;
+    let mapView: ReactElement | null = null;
     if (isAndroid() && !this.props.surfaceView && this.state.isReady) {
       mapView = (
         <RCTMGLAndroidTextureMapView {...props} {...callbacks}>
@@ -789,26 +806,20 @@ class MapView extends NativeBridgeComponent(React.Component) {
       <View
         onLayout={this._onLayout}
         style={this.props.style}
-        testID={mapView ? null : this.props.testID}>
+        testID={mapView ? undefined : this.props.testID}>
         {mapView}
       </View>
     );
   }
 }
 
-const RCTMGLMapView = requireNativeComponent(NATIVE_MODULE_NAME, MapView, {
-  nativeOnly: {onMapChange: true, onAndroidCallback: true},
-});
+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},
-    },
   );
 }
-
 export default MapView;