@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-alpha.9

package/CHANGELOG.md

@@ -3,8 +3,14 @@
 ```
 Please add unreleased changes in the following style:
 PR Title ([#123](link to my pr))
+
 ```
 
+## 10.0.0-alpha.9
+
+fix: [fix: yarn, eslint and prettier implementation #419](https://github.com/maplibre/maplibre-react-native/pull/419)
+fix: [typescript errors and add typescript:check to Github CI (#418)](https://github.com/maplibre/maplibre-react-native/pull/418)
+
 ## 10.0.0-alpha.8
 feat: [Updated Android SDK from 10.2.0 to 11.0.1 #412](https://github.com/maplibre/maplibre-react-native/pull/412)
 

package/README.md

@@ -83,4 +83,4 @@ set up your local dev environment.
 
 ## Community
 
-Join the #maplibre-native Slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/
+Join the #maplibre-react-native or #maplibre Slack channels at OSMUS: get an invite at https://slack.openstreetmap.us/

package/docs/Camera.md

@@ -12,7 +12,7 @@
 | zoomLevel | `number` | `none` | `false` | The zoom level of the map. |
 | padding | `CameraPadding` | `none` | `false` | The viewport padding in points. |
 | animationDuration | `number` | `2000` | `false` | The duration the map takes to animate to a new configuration. |
-| animationMode | `'flyTo' \| 'easeTo' \| 'linearTo' \| 'moveTo'` | `'easeTo'` | `false` | The easing or path the camera uses to animate to a new configuration. |
+| animationMode | `"flyTo" \| "easeTo" \| "linearTo" \| "moveTo"` | `"easeTo"` | `false` | The easing or path the camera uses to animate to a new configuration. |
 | allowUpdates | `boolean` | `true` | `false` | If false, the camera will not send any props to the native module. Intended to be used to prevent unnecessary tile fetching and improve performance when the map is not visible. Defaults to true. |
 | defaultSettings | `CameraStop` | `none` | `false` | Default view settings applied on camera |
 | minZoomLevel | `number` | `none` | `false` | The minimun zoom level of the map |

package/docs/MapView.md

@@ -6,7 +6,7 @@
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | contentInset | `number[] \| number` | `none` | `false` | The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport. |
-| style | `ViewProps['style']` | `none` | `false` | Style for wrapping React Native View |
+| style | `ViewProps["style"]` | `none` | `false` | Style for wrapping React Native View |
 | styleURL | `string` | `none` | `false` | Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default` |
 | styleJSON | `string` | `none` | `false` | StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec |
 | preferredFramesPerSecond | `number` | `none` | `false` | iOS: The preferred frame rate at which the map view is rendered.<br/>The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,<br/>which will adaptively set the preferred frame rate based on the capability of<br/>the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.<br/><br/>Android: The maximum frame rate at which the map view is rendered, but it can't excess the ability of device hardware.<br/>This property can be set to arbitrary integer values. |
@@ -16,16 +16,16 @@
 | pitchEnabled | `boolean` | `true` | `false` | Enable/Disable pitch on map |
 | rotateEnabled | `boolean` | `true` | `false` | Enable/Disable rotation on map |
 | attributionEnabled | `boolean` | `true` | `false` | Enable/Disable attribution on map.<br/><br/>This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.<br/>Other providers do not require this. |
-| attributionPosition | `\| {top?: number; left?: number}
-\| {top?: number; right?: number}
-\| {bottom?: number; left?: number}
-\| {bottom?: number; right?: number}` | `none` | `false` | 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 }` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
 | tintColor | `string \| unknown[]` | `none` | `false` | MapView's tintColor |
 | logoEnabled | `boolean` | `false` | `false` | Enable/Disable the logo on the map. |
-| logoPosition | `\| {top?: number; left?: number}
-\| {top?: number; right?: number}
-\| {bottom?: number; left?: number}
-\| {bottom?: number; right?: number}` | `none` | `false` | 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 }` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
 | compassEnabled | `boolean` | `none` | `false` | Enable/Disable the compass from appearing on the map |
 | compassViewPosition | `number` | `none` | `false` | Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight |
 | compassViewMargins | `object` | `none` | `false` | Add margins to the compass with x and y values |

package/docs/MarkerView.md

@@ -6,7 +6,7 @@
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | coordinate | `Array` | `none` | `true` | The center point (specified as a map coordinate) of the marker.<br/>See also #anchor. |
-| anchor | `shape` | `{x: 0.5, y: 0.5}` | `false` | Specifies the anchor being set on a particular point of the annotation.<br/>The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],<br/>where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.<br/>Note this is only for custom annotations not the default pin view.<br/>Defaults to the center of the view. |
+| anchor | `shape` | `{ x: 0.5, y: 0.5 }` | `false` | Specifies the anchor being set on a particular point of the annotation.<br/>The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],<br/>where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.<br/>Note this is only for custom annotations not the default pin view.<br/>Defaults to the center of the view. |
 | &nbsp;&nbsp;x | `number` | `none` | `true` | `x` of anchor |
 | &nbsp;&nbsp;y | `number` | `none` | `true` | `y` of anchor |
 | allowOverlap | `boolean` | `false` | `false` | FIX ME NO DESCRIPTION |

package/docs/NativeUserLocation.md

@@ -5,7 +5,7 @@
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| androidRenderMode | `'normal' \| 'compass' \| 'gps'` | `none` | `false` | Android render mode.<br/><br/> - normal: just a circle<br/> - compass: triangle with heading<br/> - gps: large arrow<br/><br/>@platform android |
+| androidRenderMode | `"normal" \| "compass" \| "gps"` | `none` | `false` | Android render mode.<br/><br/> - normal: just a circle<br/> - compass: triangle with heading<br/> - gps: large arrow<br/><br/>@platform android |
 | iosShowsUserHeadingIndicator | `boolean` | `none` | `false` | iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.<br/><br/>@platform ios |
 
 

package/docs/PointAnnotation.md

@@ -11,11 +11,11 @@
 | selected | `boolean` | `none` | `false` | Manually selects/deselects annotation<br/>@type {[type]} |
 | draggable | `boolean` | `false` | `false` | Enable or disable dragging. Defaults to false. |
 | coordinate | `Array` | `none` | `true` | The center point (specified as a map coordinate) of the annotation. |
-| anchor | `shape` | `{x: 0.5, y: 0.5}` | `false` | Specifies the anchor being set on a particular point of the annotation.<br/>The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],<br/>where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.<br/>Note this is only for custom annotations not the default pin view.<br/>Defaults to the center of the view. |
+| anchor | `shape` | `{ x: 0.5, y: 0.5 }` | `false` | Specifies the anchor being set on a particular point of the annotation.<br/>The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],<br/>where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.<br/>Note this is only for custom annotations not the default pin view.<br/>Defaults to the center of the view. |
 | &nbsp;&nbsp;x | `number` | `none` | `true` | See anchor |
 | &nbsp;&nbsp;y | `number` | `none` | `true` | See anchor |
 | children | `React.ReactElement \| [React.ReactElement, React.ReactElement]` | `none` | `true` | Expects one child, and an optional callout can be added as well |
-| style | `ViewProps['style']` | `none` | `false` | FIX ME NO DESCRIPTION |
+| style | `ViewProps["style"]` | `none` | `false` | FIX ME NO DESCRIPTION |
 
 ### methods
 #### refresh()

package/docs/UserLocation.md

@@ -6,8 +6,8 @@
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | animated | `boolean` | `true` | `false` | Whether location icon is animated between updates |
-| renderMode | `'normal' \| 'native'` | `'normal'` | `false` | Which render mode to use.<br/>Can either be `normal` or `native` |
-| androidRenderMode | `'normal' \| 'compass' \| 'gps'` | `none` | `false` | native/android only render mode<br/><br/> - normal: just a circle<br/> - compass: triangle with heading<br/> - gps: large arrow<br/><br/>@platform android |
+| renderMode | `"normal" \| "native"` | `"normal"` | `false` | Which render mode to use.<br/>Can either be `normal` or `native` |
+| androidRenderMode | `"normal" \| "compass" \| "gps"` | `none` | `false` | native/android only render mode<br/><br/> - normal: just a circle<br/> - compass: triangle with heading<br/> - gps: large arrow<br/><br/>@platform android |
 | visible | `boolean` | `true` | `false` | Whether location icon is visible |
 | showsUserHeadingIndicator | `boolean` | `false` | `false` | Show or hide small arrow which indicates direction the device is pointing relative to north. |
 | minDisplacement | `number` | `0` | `false` | Minimum amount of movement before GPS location is updated in meters |

package/docs/docs.json

@@ -477,8 +477,8 @@
       {
         "name": "animationMode",
         "required": false,
-        "type": "'flyTo' \\| 'easeTo' \\| 'linearTo' \\| 'moveTo'",
-        "default": "'easeTo'",
+        "type": "\"flyTo\" \\| \"easeTo\" \\| \"linearTo\" \\| \"moveTo\"",
+        "default": "\"easeTo\"",
         "description": "The easing or path the camera uses to animate to a new configuration."
       },
       {
@@ -2415,7 +2415,7 @@
       {
         "name": "style",
         "required": false,
-        "type": "ViewProps['style']",
+        "type": "ViewProps[\"style\"]",
         "default": "none",
         "description": "Style for wrapping React Native View"
       },
@@ -2485,7 +2485,7 @@
       {
         "name": "attributionPosition",
         "required": false,
-        "type": "\\| {top?: number; left?: number}\n\\| {top?: number; right?: number}\n\\| {bottom?: number; left?: number}\n\\| {bottom?: number; right?: number}",
+        "type": "\\| { top?: number; left?: number }\n\\| { top?: number; right?: number }\n\\| { bottom?: number; left?: number }\n\\| { bottom?: number; right?: number }",
         "default": "none",
         "description": "Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map"
       },
@@ -2506,7 +2506,7 @@
       {
         "name": "logoPosition",
         "required": false,
-        "type": "\\| {top?: number; left?: number}\n\\| {top?: number; right?: number}\n\\| {bottom?: number; left?: number}\n\\| {bottom?: number; right?: number}",
+        "type": "\\| { top?: number; left?: number }\n\\| { top?: number; right?: number }\n\\| { bottom?: number; left?: number }\n\\| { bottom?: number; right?: number }",
         "default": "none",
         "description": "Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map"
       },
@@ -2610,7 +2610,7 @@
             }
           ]
         },
-        "default": "{x: 0.5, y: 0.5}",
+        "default": "{ x: 0.5, y: 0.5 }",
         "description": "Specifies the anchor being set on a particular point of the annotation.\nThe anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],\nwhere (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.\nNote this is only for custom annotations not the default pin view.\nDefaults to the center of the view."
       },
       {
@@ -2649,7 +2649,7 @@
       {
         "name": "androidRenderMode",
         "required": false,
-        "type": "'normal' \\| 'compass' \\| 'gps'",
+        "type": "\"normal\" \\| \"compass\" \\| \"gps\"",
         "default": "none",
         "description": "Android render mode.\n\n - normal: just a circle\n - compass: triangle with heading\n - gps: large arrow\n\n@platform android"
       },
@@ -2747,7 +2747,7 @@
             }
           ]
         },
-        "default": "{x: 0.5, y: 0.5}",
+        "default": "{ x: 0.5, y: 0.5 }",
         "description": "Specifies the anchor being set on a particular point of the annotation.\nThe anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],\nwhere (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.\nNote this is only for custom annotations not the default pin view.\nDefaults to the center of the view."
       },
       {
@@ -2760,7 +2760,7 @@
       {
         "name": "style",
         "required": false,
-        "type": "ViewProps['style']",
+        "type": "ViewProps[\"style\"]",
         "default": "none",
         "description": "FIX ME NO DESCRIPTION"
       }
@@ -4811,14 +4811,14 @@
       {
         "name": "renderMode",
         "required": false,
-        "type": "'normal' \\| 'native'",
-        "default": "'normal'",
+        "type": "\"normal\" \\| \"native\"",
+        "default": "\"normal\"",
         "description": "Which render mode to use.\nCan either be `normal` or `native`"
       },
       {
         "name": "androidRenderMode",
         "required": false,
-        "type": "'normal' \\| 'compass' \\| 'gps'",
+        "type": "\"normal\" \\| \"compass\" \\| \"gps\"",
         "default": "none",
         "description": "native/android only render mode\n\n - normal: just a circle\n - compass: triangle with heading\n - gps: large arrow\n\n@platform android"
       },

package/javascript/@types/assets.d.ts

@@ -1,4 +1,4 @@
-declare module '*.png' {
+declare module "*.png" {
   const content: number;
   export default content;
 }

package/javascript/MLNModule.ts

@@ -1,4 +1,4 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
 interface IMLNModule {
   StyleURL: {
@@ -24,7 +24,7 @@ interface IMLNModule {
   setConnected(connected: boolean): void;
 }
 
-const MLNModule: IMLNModule = {...NativeModules.MLNModule};
+const MLNModule: IMLNModule = { ...NativeModules.MLNModule };
 
 export const {
   StyleURL,

package/javascript/Maplibre.ts

@@ -1,4 +1,6 @@
-export * from './MLNModule';
+import { UserTrackingMode } from "./components/Camera";
+
+export * from "./MLNModule";
 export {
   default as Camera,
   UserTrackingMode,
@@ -6,45 +8,45 @@ export {
   type CameraAnimationMode,
   type CameraBounds,
   type CameraRef,
-} from './components/Camera';
-export {default as MapView, type MapViewRef} from './components/MapView';
-export {default as Light} from './components/Light';
-export {default as PointAnnotation} from './components/PointAnnotation';
-export type {PointAnnotationRef} from './components/PointAnnotation';
-export {default as Annotation} from './components/annotations/Annotation';
-export {default as Callout} from './components/Callout';
-export {requestAndroidLocationPermissions} from './requestAndroidLocationPermissions';
+} from "./components/Camera";
+export { default as MapView, type MapViewRef } from "./components/MapView";
+export { default as Light } from "./components/Light";
+export { default as PointAnnotation } from "./components/PointAnnotation";
+export type { PointAnnotationRef } from "./components/PointAnnotation";
+export { default as Annotation } from "./components/annotations/Annotation";
+export { default as Callout } from "./components/Callout";
+export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions";
 export {
   default as UserLocation,
   UserLocationRenderMode,
-} from './components/UserLocation';
-export type {UserLocationRef} from './components/UserLocation';
-export {default as VectorSource} from './components/VectorSource';
-export {default as ShapeSource} from './components/ShapeSource';
-export type {ShapeSourceRef} from './components/ShapeSource';
-export {default as RasterSource} from './components/RasterSource';
-export {default as ImageSource} from './components/ImageSource';
-export {default as Images} from './components/Images';
-export {default as FillLayer} from './components/FillLayer';
-export {default as FillExtrusionLayer} from './components/FillExtrusionLayer';
-export {default as HeatmapLayer} from './components/HeatmapLayer';
-export {default as LineLayer} from './components/LineLayer';
-export {default as CircleLayer} from './components/CircleLayer';
-export {default as SymbolLayer} from './components/SymbolLayer';
-export {default as RasterLayer} from './components/RasterLayer';
-export {default as BackgroundLayer} from './components/BackgroundLayer';
+} from "./components/UserLocation";
+export type { UserLocationRef } from "./components/UserLocation";
+export { default as VectorSource } from "./components/VectorSource";
+export { default as ShapeSource } from "./components/ShapeSource";
+export type { ShapeSourceRef } from "./components/ShapeSource";
+export { default as RasterSource } from "./components/RasterSource";
+export { default as ImageSource } from "./components/ImageSource";
+export { default as Images } from "./components/Images";
+export { default as FillLayer } from "./components/FillLayer";
+export { default as FillExtrusionLayer } from "./components/FillExtrusionLayer";
+export { default as HeatmapLayer } from "./components/HeatmapLayer";
+export { default as LineLayer } from "./components/LineLayer";
+export { default as CircleLayer } from "./components/CircleLayer";
+export { default as SymbolLayer } from "./components/SymbolLayer";
+export { default as RasterLayer } from "./components/RasterLayer";
+export { default as BackgroundLayer } from "./components/BackgroundLayer";
 export {
   default as locationManager,
   type Location,
-} from './modules/location/locationManager';
-export {default as offlineManager} from './modules/offline/offlineManager';
-export {default as OfflineCreatePackOptions} from './modules/offline/OfflineCreatePackOptions';
-export {default as snapshotManager} from './modules/snapshot/snapshotManager';
-export type {SnapshotInputOptions} from './modules/snapshot/SnapshotOptions';
-export {default as MarkerView} from './components/MarkerView';
-export {default as Animated} from './utils/animated/Animated';
-export {default as Style} from './components/Style';
-export {default as Logger, type LogLevel} from './utils/Logger';
+} from "./modules/location/locationManager";
+export { default as offlineManager } from "./modules/offline/offlineManager";
+export { default as OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
+export { default as snapshotManager } from "./modules/snapshot/snapshotManager";
+export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
+export { default as MarkerView } from "./components/MarkerView";
+export { default as Animated } from "./utils/animated/Animated";
+export { default as Style } from "./components/Style";
+export { default as Logger, type LogLevel } from "./utils/Logger";
 export type {
   FillLayerStyleProps as FillLayerStyle,
   LineLayerStyleProps as LineLayerStyle,
@@ -56,14 +58,7 @@ export type {
   HillshadeLayerStyleProps as HillshadeLayerStyle,
   BackgroundLayerStyleProps as BackgroundLayerStyle,
   LightLayerStyleProps as LightLayerStyle,
-} from './utils/MaplibreStyles';
-
-import {UserTrackingMode} from './components/Camera';
-
-// types:
-export enum StyleURL {
-  Default = 'https://demotiles.maplibre.org/style.json',
-}
+} from "./utils/MaplibreStyles";
 
 /** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
 export const UserTrackingModes = UserTrackingMode;

package/javascript/components/BackgroundLayer.tsx

@@ -1,16 +1,16 @@
-import {BackgroundLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
 import useAbstractLayer, {
   BaseLayerProps,
   NativeBaseProps,
-} from '../hooks/useAbstractLayer';
-
-import React from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { BackgroundLayerStyleProps } from "../utils/MaplibreStyles";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNBackgroundLayer';
+export const NATIVE_MODULE_NAME = "RCTMLNBackgroundLayer";
 
 export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -20,7 +20,7 @@ export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<BackgroundLayerProps, 'style'>,
+  extends Omit<BackgroundLayerProps, "style">,
     NativeBaseProps {}
 
 const RCTMLNBackgroundLayer =
@@ -30,7 +30,7 @@ const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
   sourceID = MapLibreGL.StyleSource.DefaultSourceID,
   ...props
 }: BackgroundLayerProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<
+  const { baseProps, setNativeLayer } = useAbstractLayer<
     BackgroundLayerProps,
     NativeProps
   >({

package/javascript/components/Callout.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, { ReactElement } from "react";
 import {
   View,
   Text,
@@ -8,47 +8,47 @@ import {
   ViewStyle,
   ViewProps,
   StyleProp,
-} from 'react-native';
+} from "react-native";
 
-export const NATIVE_MODULE_NAME = 'RCTMLNCallout';
+export const NATIVE_MODULE_NAME = "RCTMLNCallout";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     width: 180,
     zIndex: 9999999,
   },
   content: {
-    backgroundColor: 'white',
-    borderColor: 'rgba(0, 0, 0, 0.2)',
+    backgroundColor: "white",
+    borderColor: "rgba(0, 0, 0, 0.2)",
     borderRadius: 3,
     borderWidth: 1,
     flex: 1,
     padding: 8,
-    position: 'relative',
+    position: "relative",
   },
   tip: {
-    backgroundColor: 'transparent',
-    borderBottomColor: 'transparent',
+    backgroundColor: "transparent",
+    borderBottomColor: "transparent",
     borderBottomWidth: 0,
-    borderLeftColor: 'transparent',
+    borderLeftColor: "transparent",
     borderLeftWidth: 8,
-    borderRightColor: 'transparent',
+    borderRightColor: "transparent",
     borderRightWidth: 8,
-    borderTopColor: 'white',
+    borderTopColor: "white",
     borderTopWidth: 16,
     elevation: 0,
     marginTop: -2,
     zIndex: 1000,
   },
   title: {
-    color: 'black',
-    textAlign: 'center',
+    color: "black",
+    textAlign: "center",
   },
 });
 
-interface CalloutProps extends Omit<ViewProps, 'style'> {
+interface CalloutProps extends Omit<ViewProps, "style"> {
   /**
    * String that get's displayed in the default callout.
    */
@@ -75,7 +75,7 @@ interface CalloutProps extends Omit<ViewProps, 'style'> {
   textStyle?: ViewStyle;
 }
 
-interface NativeProps extends Omit<CalloutProps, 'style'> {
+interface NativeProps extends Omit<CalloutProps, "style"> {
   style: StyleProp<ViewStyle>;
 }
 
@@ -95,9 +95,9 @@ const Callout = (props: CalloutProps): ReactElement => {
 
   const _containerStyle: ViewStyle[] = [
     {
-      position: 'absolute',
+      position: "absolute",
       zIndex: 999,
-      backgroundColor: 'transparent',
+      backgroundColor: "transparent",
       ...containerStyle,
     } as ViewStyle,
   ];

package/javascript/components/Camera.tsx

@@ -1,9 +1,3 @@
-import {toJSONString} from '../utils';
-import * as geoUtils from '../utils/geoUtils';
-import {MaplibreGLEvent} from '../types';
-import {useNativeRef} from '../hooks/useNativeRef';
-
-import {NativeModules, requireNativeComponent, ViewProps} from 'react-native';
 import React, {
   memo,
   RefObject,
@@ -12,21 +6,27 @@ import React, {
   useMemo,
   useRef,
   useCallback,
-} from 'react';
+} from "react";
+import { NativeModules, requireNativeComponent, ViewProps } from "react-native";
+
+import { useNativeRef } from "../hooks/useNativeRef";
+import { MaplibreGLEvent } from "../types";
+import { toJSONString } from "../utils";
+import * as geoUtils from "../utils/geoUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNCamera';
+export const NATIVE_MODULE_NAME = "RCTMLNCamera";
 
 export enum UserTrackingMode {
-  Follow = 'normal',
-  FollowWithHeading = 'compass',
-  FollowWithCourse = 'course',
+  Follow = "normal",
+  FollowWithHeading = "compass",
+  FollowWithCourse = "course",
 }
 
 export type UserTrackingModeChangeCallback = (
   event: MaplibreGLEvent<
-    'usertrackingmodechange',
+    "usertrackingmodechange",
     {
       followUserLocation: boolean;
       followUserMode: UserTrackingMode | null;
@@ -96,8 +96,8 @@ interface CameraBoundsWithPadding
   extends CameraBounds,
     Partial<CameraPadding> {}
 
-type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
-export type CameraAnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo';
+type NativeAnimationMode = "flight" | "ease" | "linear" | "none" | "move";
+export type CameraAnimationMode = "flyTo" | "easeTo" | "linearTo" | "moveTo";
 
 export interface NativeCameraStop extends Required<CameraPadding> {
   mode: NativeAnimationMode;
@@ -133,7 +133,7 @@ export type CameraStops = {
   stops: CameraStop[];
 };
 
-interface CameraProps extends Omit<ViewProps, 'style'>, CameraStop {
+interface CameraProps extends Omit<ViewProps, "style">, CameraStop {
   /**
    * If false, the camera will not send any props to the native module. Intended to be used to prevent unnecessary tile fetching and improve performance when the map is not visible. Defaults to true.
    */
@@ -193,7 +193,7 @@ interface CameraProps extends Omit<ViewProps, 'style'>, CameraStop {
   onUserTrackingModeChange?: UserTrackingModeChangeCallback;
 }
 
-interface NativeProps extends Omit<CameraProps, 'maxBounds'> {
+interface NativeProps extends Omit<CameraProps, "maxBounds"> {
   maxBounds: string | null;
   stop: NativeCameraStop | null;
   defaultStop: NativeCameraStop | null;
@@ -204,7 +204,7 @@ const Camera = memo(
     (
       {
         allowUpdates = true,
-        animationMode = 'easeTo',
+        animationMode = "easeTo",
         animationDuration = 2000,
         ...rest
       }: CameraProps,
@@ -340,7 +340,7 @@ const Camera = memo(
           }
 
           if (config.bounds && config.bounds.ne && config.bounds.sw) {
-            const {ne, sw} = config.bounds;
+            const { ne, sw } = config.bounds;
             stopConfig.bounds = toJSONString(geoUtils.makeLatLngBounds(ne, sw));
           }
 
@@ -351,7 +351,7 @@ const Camera = memo(
 
       const _setCamera = useCallback(
         (config: CameraStop | CameraStops = {}): void => {
-          if ('stops' in config) {
+          if ("stops" in config) {
             let nativeStops: NativeCameraStop[] = [];
 
             for (const stop of config.stops) {
@@ -360,12 +360,12 @@ const Camera = memo(
                 nativeStops = [...nativeStops, nativeStop];
               }
             }
-            cameraRef.current?.setNativeProps({stop: {stops: nativeStops}});
+            cameraRef.current?.setNativeProps({ stop: { stops: nativeStops } });
           } else {
             const nativeStop = _createStopConfig(config);
 
             if (nativeStop) {
-              cameraRef.current?.setNativeProps({stop: nativeStop});
+              cameraRef.current?.setNativeProps({ stop: nativeStop });
             }
           }
         },
@@ -520,8 +520,8 @@ const Camera = memo(
             sw: southWestCoordinates,
           },
           padding: pad,
-          animationDuration: animationDuration,
-          animationMode: 'easeTo',
+          animationDuration,
+          animationMode: "easeTo",
         });
       };
 
@@ -532,7 +532,7 @@ const Camera = memo(
         setCamera({
           centerCoordinate: coordinates,
           animationDuration,
-          animationMode: 'flyTo',
+          animationMode: "flyTo",
         });
       };
 
@@ -550,7 +550,7 @@ const Camera = memo(
         setCamera({
           zoomLevel,
           animationDuration,
-          animationMode: 'flyTo',
+          animationMode: "flyTo",
         });
       };
 
@@ -569,7 +569,7 @@ const Camera = memo(
         _defaultCamera.current = _createStopConfig(
           {
             ...props.defaultSettings,
-            animationMode: 'moveTo',
+            animationMode: "moveTo",
           },
           true,
         );
@@ -580,11 +580,11 @@ const Camera = memo(
         config: CameraStop,
       ): NativeAnimationMode => {
         switch (config.animationMode) {
-          case 'flyTo':
+          case "flyTo":
             return MapLibreGL.CameraModes.Flight;
-          case 'moveTo':
+          case "moveTo":
             return MapLibreGL.CameraModes.None;
-          case 'linearTo':
+          case "linearTo":
             return MapLibreGL.CameraModes.Linear;
           default:
             return MapLibreGL.CameraModes.Ease;