@maplibre/maplibre-react-native 10.0.0-alpha.24 → 10.0.0-alpha.26

package/CHANGELOG.md

@@ -6,6 +6,18 @@ PR Title ([#123](link to my pr))
 
 ```
 
+## 10.0.0-alpha.26
+
+chore: upgrade Expo SDK 52 ([489](https://github.com/maplibre/maplibre-react-native/pull/489))
+chore: remove pre commit ([#491](https://github.com/maplibre/maplibre-react-native/pull/491))
+docs: improve formatting ([#490](https://github.com/maplibre/maplibre-react-native/pull/490))
+
+## 10.0.0-alpha.25
+
+feat: make Camera pure ([#471](https://github.com/maplibre/maplibre-react-native/pull/471))
+
+docs: update scripts to TypeScript ([#484](https://github.com/maplibre/maplibre-react-native/pull/484))
+
 ## 10.0.0-alpha.24
 
 feat: support new arch through interop layer ([#483](https://github.com/maplibre/maplibre-react-native/pull/483))

package/CONTRIBUTING.md

@@ -55,7 +55,7 @@ can mitigate some of the pain with this.
 
 Documentation is generated from code blocks and comments. It will be auto-generated when you commit changes. If any
 changes are generated from your edits, the changed files will need to be added using `git add` before attempting the
-commit again. To manually generate the changes, run `yarn generate`.
+commit again. To manually generate the changes, run `yarn codegen`.
 
 Notice, that changing the documentation in the individual <COMPONENT>.md within `/docs` will not suffice. The correct
 way is the above described

package/android/build.gradle

@@ -1,4 +1,12 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.android.library'
+
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
 
 buildscript {
     ext {
@@ -8,27 +16,54 @@ buildscript {
         targetSdkVersion = 33
         supportLibVersion = "28.0.0"
     }
+
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
-    dependencies {
-        classpath 'com.android.tools.build:gradle'
+}
+
+android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 33)
+    buildToolsVersion safeExtGet("buildToolsVersion", '33.0.1')
 
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
+    defaultConfig {
+        minSdkVersion safeExtGet('minSdkVersion', 16)
+        targetSdkVersion safeExtGet('targetSdkVersion', 26)
+        versionCode 1
+        versionName "1.0"
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
     }
-}
 
-allprojects {
-    repositories {
-        mavenLocal()
-        google()
-        jcenter()
-        maven { url "https://jitpack.io" }
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
         }
     }
 }
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    // MapLibre SDK
+    implementation "org.maplibre.gl:android-sdk:11.5.0"
+    implementation "org.maplibre.gl:android-sdk-turf:6.0.1"
+
+    // Dependencies
+    implementation "androidx.vectordrawable:vectordrawable:1.1.0"
+    implementation "androidx.annotation:annotation:1.7.0"
+    implementation "androidx.appcompat:appcompat:1.6.1"
+    implementation "com.squareup.okhttp3:okhttp:${safeExtGet('okhttpVersion', '4.9.0')}"
+    implementation "com.squareup.okhttp3:okhttp-urlconnection:${safeExtGet('okhttpVersion', '4.9.0')}"
+
+    // MapLibre plugins
+    implementation ("org.maplibre.gl:android-plugin-localization-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-annotation-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-markerview-v9:3.0.1")
+}

package/docs/Annotation.md

@@ -1,8 +1,9 @@
-<!-- This file was autogenerated from Annotation.js do not modify -->
-## <MapLibreGL.Annotation />
-### 
+<!-- DO NOT MODIFY! -->
+<!-- This file is auto-generated from javascript/components/Annotation.tsx -->
+# `<MapLibreGL.Annotation />`
 
-### props
+
+## Props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | id | `string` | `none` | `true` | FIX ME NO DESCRIPTION |
@@ -14,25 +15,15 @@
 | icon | `string \| number \| object` | `none` | `false` | FIX ME NO DESCRIPTION |
 | animationEasingFunction | `FIX ME UNKNOWN TYPE` | `Easing.linear` | `false` | FIX ME NO DESCRIPTION |
 
-### methods
-#### onPress(event)
+## Methods
+### `onPress(event)`
 
 
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 | `event` | `OnPressEvent` | `Yes` | undefined |
 
 
-#### symbolStyle()
-
-
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-
-
-
 

package/docs/BackgroundLayer.md

@@ -1,158 +1,166 @@
-<!-- This file was autogenerated from BackgroundLayer.js do not modify -->
-## <MapLibreGL.BackgroundLayer />
-### 
+<!-- DO NOT MODIFY! -->
+<!-- This file is auto-generated from javascript/components/BackgroundLayer.tsx -->
+# `<MapLibreGL.BackgroundLayer />`
 
-### props
+
+## Props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | style | `BackgroundLayerStyleProps` | `none` | `false` | Customizable style attributes |
 | sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION |
 
 
-### styles
+## Styles
 
-* <a href="#name">visibility</a><br/>
-* <a href="#name-1">backgroundColor</a><br/>
-* <a href="#name-2">backgroundPattern</a><br/>
-* <a href="#name-3">backgroundOpacity</a><br/>
+* <a href="#name">`visibility`</a><br/>
+* <a href="#name-1">`backgroundColor`</a><br/>
+* <a href="#name-2">`backgroundPattern`</a><br/>
+* <a href="#name-3">`backgroundOpacity`</a><br/>
 
-___
 
-#### Name
-`visibility`
+### `visibility`
 
-#### Description
 Whether this layer is displayed.
 
-#### Type
-`enum`
-#### Default Value
-`visible`
-
-#### Supported Values
-**visible** - The layer is shown.<br />
-**none** - The layer is not shown.<br />
-
-
-
-___
-
-#### Name
-`backgroundColor`
+<dl>
+    <dt>Type</dt>
+    <dd>
+        <code>enum</code>
+    </dd>
+        <dt>Default Value</dt>
+        <dd><code>visible</code></dd>
+    <dt>Supported Values</dt>
+    <dd>
+        <ul>
+                <li>
+                    <code>visible</code>: The layer is shown.
+                </li>
+                <li>
+                    <code>none</code>: The layer is not shown.
+                </li>
+        </ul>
+    </dd>
+</dl>
+
+
+
+### `backgroundColor`
 
-#### Description
 The color with which the background will be drawn.
 
-#### Type
-`color`
-#### Default Value
-`#000000`
-
-
-#### Disabled By
-`backgroundPattern`
-
-#### Expression
-
-Parameters: `zoom`
-___
-
-#### Name
-
-`backgroundColorTransition`
-
-#### Description
-
-The transition affecting any changes to this layer’s backgroundColor propery.
-
-#### Type
-
-`{ duration, delay }`
-
-#### Units
-`milliseconds`
-
-#### Default Value
-`{duration: 300, delay: 0}`
-
-
-___
-
-#### Name
-`backgroundPattern`
+<dl>
+    <dt>Type</dt>
+    <dd>
+        <code>color</code>
+    </dd>
+        <dt>Default Value</dt>
+        <dd><code>#000000</code></dd>
+        </ul>
+    </dd>
+        <dt>Disabled By</dt>
+        <dd><code>backgroundPattern</code></dd>
+        <dt>Expression Parameters</dt>
+        <dd><code>zoom</code></dd>
+</dl>
+
+### `backgroundColorTransition`
+
+The transition affecting any changes to this layer’s backgroundColor property.
+
+<dl>
+  <dt>Type</dt>
+  <dd>
+    <code>{ duration, delay }</code>
+  </dd>
+
+  <dt>Units</dt>
+  <dd>
+    <code>milliseconds</code>
+  </dd>
+
+  <dt>Default Value</dt>
+  <dd>
+    <code>{duration: 300, delay: 0}</code>
+  </dd>
+</dl>
+
+
+### `backgroundPattern`
 
-#### Description
 Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoomDependent expressions will be evaluated only at integer zoom levels.
 
-#### Type
-`resolvedImage`
+<dl>
+    <dt>Type</dt>
+    <dd>
+        <code>resolvedImage</code>
+    </dd>
+        </ul>
+    </dd>
+        <dt>Expression Parameters</dt>
+        <dd><code>zoom</code></dd>
+</dl>
 
+### `backgroundPatternTransition`
 
-#### Expression
+The transition affecting any changes to this layer’s backgroundPattern property.
 
-Parameters: `zoom`
-___
+<dl>
+  <dt>Type</dt>
+  <dd>
+    <code>{ duration, delay }</code>
+  </dd>
 
-#### Name
+  <dt>Units</dt>
+  <dd>
+    <code>milliseconds</code>
+  </dd>
 
-`backgroundPatternTransition`
+  <dt>Default Value</dt>
+  <dd>
+    <code>{duration: 300, delay: 0}</code>
+  </dd>
+</dl>
 
-#### Description
 
-The transition affecting any changes to this layer’s backgroundPattern propery.
+### `backgroundOpacity`
 
-#### Type
-
-`{ duration, delay }`
-
-#### Units
-`milliseconds`
-
-#### Default Value
-`{duration: 300, delay: 0}`
-
-
-___
-
-#### Name
-`backgroundOpacity`
-
-#### Description
 The opacity at which the background will be drawn.
 
-#### Type
-`number`
-#### Default Value
-`1`
-
-#### Minimum
-`0`
-
-
-#### Maximum
-`1`
-
-#### Expression
-
-Parameters: `zoom`
-___
-
-#### Name
-
-`backgroundOpacityTransition`
-
-#### Description
-
-The transition affecting any changes to this layer’s backgroundOpacity propery.
-
-#### Type
-
-`{ duration, delay }`
-
-#### Units
-`milliseconds`
-
-#### Default Value
-`{duration: 300, delay: 0}`
-
+<dl>
+    <dt>Type</dt>
+    <dd>
+        <code>number</code>
+    </dd>
+        <dt>Default Value</dt>
+        <dd><code>1</code></dd>
+        </ul>
+    </dd>
+        <dt>Minimum</dt>
+        <dd><code>0</code></dd>
+        <dt>Maximum</dt>
+        <dd><code>1</code></dd>
+        <dt>Expression Parameters</dt>
+        <dd><code>zoom</code></dd>
+</dl>
+
+### `backgroundOpacityTransition`
+
+The transition affecting any changes to this layer’s backgroundOpacity property.
+
+<dl>
+  <dt>Type</dt>
+  <dd>
+    <code>{ duration, delay }</code>
+  </dd>
+
+  <dt>Units</dt>
+  <dd>
+    <code>milliseconds</code>
+  </dd>
+
+  <dt>Default Value</dt>
+  <dd>
+    <code>{duration: 300, delay: 0}</code>
+  </dd>
+</dl>
 

package/docs/Callout.md

@@ -1,8 +1,9 @@
-<!-- This file was autogenerated from Callout.js do not modify -->
-## <MapLibreGL.Callout />
-### Callout that displays information about a selected annotation near the annotation.
+<!-- DO NOT MODIFY! -->
+<!-- This file is auto-generated from javascript/components/Callout.tsx -->
+# `<MapLibreGL.Callout />`
+Callout that displays information about a selected annotation near the annotation.
 
-### props
+## Props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | title | `string` | `none` | `false` | String that get's displayed in the default callout. |

package/docs/Camera.md

@@ -1,8 +1,9 @@
-<!-- This file was autogenerated from Camera.js do not modify -->
-## <MapLibreGL.Camera />
-### 
+<!-- DO NOT MODIFY! -->
+<!-- This file is auto-generated from javascript/components/Camera.tsx -->
+# `<MapLibreGL.Camera />`
 
-### props
+
+## Props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | centerCoordinate | `GeoJSON.Position` | `none` | `false` | The location on which the map should center. |
@@ -11,67 +12,65 @@
 | pitch | `number` | `none` | `false` | The pitch of the map. |
 | 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. |
-| 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. |
+| animationDuration | `number` | `none` | `false` | The duration the map takes to animate to a new configuration. |
+| animationMode | `"flyTo" \| "easeTo" \| "linearTo" \| "moveTo"` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
 | defaultSettings | `CameraStop` | `none` | `false` | Default view settings applied on camera |
-| minZoomLevel | `number` | `none` | `false` | The minimun zoom level of the map |
-| maxZoomLevel | `number` | `none` | `false` | The maximun zoom level of the map |
+| minZoomLevel | `number` | `none` | `false` | Minimum zoom level of the map |
+| maxZoomLevel | `number` | `none` | `false` | Maximum zoom level of the map |
 | maxBounds | `CameraBounds` | `none` | `false` | Restrict map panning so that the center is within these bounds |
 | followUserLocation | `boolean` | `none` | `false` | Should the map orientation follow the user's. |
 | followUserMode | `UserTrackingMode` | `none` | `false` | The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingModes.js) |
 | followZoomLevel | `number` | `none` | `false` | The zoomLevel on map while followUserLocation is set to `true` |
 | followPitch | `number` | `none` | `false` | The pitch on map while followUserLocation is set to `true` |
 | followHeading | `number` | `none` | `false` | The heading on map while followUserLocation is set to `true` |
-| triggerKey | `string \| number` | `none` | `false` | Manually update the camera - helpful for when props did not update, however you still want the camera to move |
-| onUserTrackingModeChange | `func` | `none` | `false` | FIX ME NO DESCRIPTION<br/>*signature:*`(event:MaplibreGLEvent) => void` |
+| onUserTrackingModeChange | `func` | `none` | `false` | Triggered when `followUserLocation` or `followUserMode` changes<br/>*signature:*`(event:MaplibreGLEvent) => void` |
 
-### methods
-#### fitBounds(northEastCoordinates, southWestCoordinates[, padding][, animationDuration])
+## Methods
+### `fitBounds(ne, sw, [padding], [animationDuration])`
 
 Map camera transitions to fit provided bounds
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `northEastCoordinates` | `GeoJSON.Position` | `Yes` | North east coordinate of bound |
-| `southWestCoordinates` | `GeoJSON.Position` | `Yes` | South west coordinate of bound |
-| `padding` | `Number \| Array` | `No` | Padding for the bounds |
-| `animationDuration` | `Number` | `No` | Duration of camera animation |
+| `ne` | `GeoJSON.Position` | `Yes` | North east coordinate of bound |
+| `sw` | `GeoJSON.Position` | `Yes` | South west coordinate of bound |
+| `padding` | `number \| number[]` | `No` | Padding for the bounds |
+| `animationDuration` | `number` | `No` | Duration of camera animation |
 
 
 
 ```javascript
-this.camera.fitBounds([lng, lat], [lng, lat])
-this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
-this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
+cameraRef.current?.fitBounds([lng, lat], [lng, lat])
+cameraRef.current?.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
+cameraRef.current?.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
+cameraRef.current?.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
 ```
 
 
-#### flyTo(coordinates[, animationDuration])
+### `flyTo(coordinates, [animationDuration])`
 
 Map camera will fly to new coordinate
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `coordinates` | `GeoJSON.Position` | `Yes` | Coordinates that map camera will jump too |
+| `coordinates` | `GeoJSON.Position` | `Yes` | Coordinates that map camera will jump to |
 | `animationDuration` | `Number` | `No` | Duration of camera animation |
 
 
 
 ```javascript
-this.camera.flyTo([lng, lat])
-this.camera.flyTo([lng, lat], 12000)
+cameraRef.current?.flyTo([lng, lat])
+cameraRef.current?.flyTo([lng, lat], 12000)
 ```
 
 
-#### moveTo(coordinates[, animationDuration])
+### `moveTo(coordinates, [animationDuration])`
 
 Map camera will move to new coordinate at the same zoom level
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 | `coordinates` | `GeoJSON.Position` | `Yes` | Coordinates that map camera will move too |
@@ -80,16 +79,16 @@ Map camera will move to new coordinate at the same zoom level
 
 
 ```javascript
-this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-this.camera.moveTo([lng, lat]) // snaps camera to new location without any easing
+cameraRef.current?.moveTo([lng, lat], 200) // eases camera to new location based on duration
+cameraRef.current?.moveTo([lng, lat]) // snaps camera to new location without any easing
 ```
 
 
-#### zoomTo(zoomLevel[, animationDuration])
+### `zoomTo(zoomLevel, [animationDuration])`
 
 Map camera will zoom to specified level
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 | `zoomLevel` | `number` | `Yes` | Zoom level that the map camera will animate too |
@@ -98,16 +97,16 @@ Map camera will zoom to specified level
 
 
 ```javascript
-this.camera.zoomTo(16)
-this.camera.zoomTo(16, 100)
+cameraRef.current?.zoomTo(16)
+cameraRef.current?.zoomTo(16, 100)
 ```
 
 
-#### setCamera([config])
+### `setCamera([config])`
 
 Map camera will perform updates based on provided config. Advanced use only!
 
-##### arguments
+#### Arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 | `config` | `Object` | `No` | Camera configuration |
@@ -115,13 +114,13 @@ Map camera will perform updates based on provided config. Advanced use only!
 
 
 ```javascript
-this.camera.setCamera({
+cameraRef.current?.setCamera({
   centerCoordinate: [lng, lat],
   zoomLevel: 16,
   animationDuration: 2000,
 })
 
-this.camera.setCamera({
+cameraRef.current?.setCamera({
   stops: [
     { pitch: 45, animationDuration: 200 },
     { heading: 180, animationDuration: 300 },