From b92abfe3e505368f5c39632ee32a0ed352d6706d Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 13:06:34 +0200
Subject: [PATCH 01/13] feat: align react and react-native versions for
 development

---
 package.json                   |  10 +-
 packages/examples/package.json |   2 +-
 yarn.lock                      | 890 ++++++---------------------------
 3 files changed, 152 insertions(+), 750 deletions(-)

diff --git a/package.json b/package.json
index c8c3bda76..96b9ad26c 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "react-native": ">=0.59.9"
   },
   "dependencies": {
-    "@mapbox/geo-viewport": ">= 0.4.0",
+    "@mapbox/geo-viewport": ">=0.4.0",
     "@turf/along": "6.5.0",
     "@turf/distance": "6.5.0",
     "@turf/helpers": "6.5.0",
@@ -93,11 +93,11 @@
     "metro-react-native-babel-preset": "^0.76.7",
     "node-dir": "0.1.17",
     "pinst": "^3.0.0",
-    "prettier": "^3.3.3",
-    "react": "^18.2.0",
+    "prettier": "3.3.3",
+    "react": "18.2.0",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
-    "react-native": "0.72.1",
-    "react-test-renderer": "^18.2.0",
+    "react-native": "0.74.6",
+    "react-test-renderer": "18.2.0",
     "typescript": "^5.3.3"
   },
   "resolutions": {
diff --git a/packages/examples/package.json b/packages/examples/package.json
index 40caa82ed..cf858ec6b 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -28,7 +28,7 @@
     "moment": "^2.30.1",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
-    "react-native": "0.74.5",
+    "react-native": "0.74.6",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "~3.10.1",
diff --git a/yarn.lock b/yarn.lock
index a11d58861..d5b3f2f71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2685,7 +2685,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/geo-viewport@npm:*, @mapbox/geo-viewport@npm:>= 0.4.0, @mapbox/geo-viewport@npm:^0.5.0":
+"@mapbox/geo-viewport@npm:*, @mapbox/geo-viewport@npm:>=0.4.0, @mapbox/geo-viewport@npm:^0.5.0":
   version: 0.5.0
   resolution: "@mapbox/geo-viewport@npm:0.5.0"
   dependencies:
@@ -2741,7 +2741,7 @@ __metadata:
     moment: "npm:^2.30.1"
     prop-types: "npm:^15.7.2"
     react: "npm:18.2.0"
-    react-native: "npm:0.74.5"
+    react-native: "npm:0.74.6"
     react-native-elements: "npm:^3.4.3"
     react-native-gesture-handler: "npm:~2.16.1"
     react-native-reanimated: "npm:~3.10.1"
@@ -2808,7 +2808,7 @@ __metadata:
     "@babel/plugin-proposal-class-properties": "npm:7.18.6"
     "@babel/runtime": "npm:7.17.2"
     "@expo/config-plugins": "npm:^7.2.5"
-    "@mapbox/geo-viewport": "npm:>= 0.4.0"
+    "@mapbox/geo-viewport": "npm:>=0.4.0"
     "@react-native/eslint-config": "npm:^0.73.2"
     "@react-native/eslint-plugin": "npm:^0.74.0"
     "@react-native/metro-config": "npm:^0.72.7"
@@ -2847,11 +2847,11 @@ __metadata:
     metro-react-native-babel-preset: "npm:^0.76.7"
     node-dir: "npm:0.1.17"
     pinst: "npm:^3.0.0"
-    prettier: "npm:^3.3.3"
-    react: "npm:^18.2.0"
+    prettier: "npm:3.3.3"
+    react: "npm:18.2.0"
     react-docgen: "rnmapbox/react-docgen#rnmapbox-dist"
-    react-native: "npm:0.72.1"
-    react-test-renderer: "npm:^18.2.0"
+    react-native: "npm:0.74.6"
+    react-test-renderer: "npm:18.2.0"
     typescript: "npm:^5.3.3"
   peerDependencies:
     "@expo/config-plugins": ">=7"
@@ -2942,18 +2942,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-clean@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-clean@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    prompts: "npm:^2.4.0"
-  checksum: 10/65507fb7abfea41e198aa655bd8c9024d0d6a4e5cdf5fb17bf5a10d6fe697388b1ab16b2e8fea03906cfaf74dd95b381c3edd0584b071bb442c156ce075133fe
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-clean@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-clean@npm:13.6.9"
@@ -2978,20 +2966,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-config@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-config@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    cosmiconfig: "npm:^5.1.0"
-    deepmerge: "npm:^4.3.0"
-    glob: "npm:^7.1.3"
-    joi: "npm:^17.2.1"
-  checksum: 10/6fba5a201323c3b4ed4b2bdf077def75491be16528db36fe67974735e2a907c2cb67263bd11823c6746d09aca82028f75f8d61b144daf6fa1a38b82d6df59971
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-config@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-config@npm:13.6.9"
@@ -3020,15 +2994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-debugger-ui@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-debugger-ui@npm:11.3.3"
-  dependencies:
-    serve-static: "npm:^1.13.1"
-  checksum: 10/f04bb9c8c2d7ba617ff7ad970b44c43f384e834c94d640385b996e2d3ca7e53e692d2e51eecf03903bab09609f1924e1a56b9409af5282552f8dc477cb248a5c
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-debugger-ui@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-debugger-ui@npm:13.6.9"
@@ -3047,32 +3012,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-doctor@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-doctor@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-config": "npm:11.3.3"
-    "@react-native-community/cli-platform-android": "npm:11.3.3"
-    "@react-native-community/cli-platform-ios": "npm:11.3.3"
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    command-exists: "npm:^1.2.8"
-    envinfo: "npm:^7.7.2"
-    execa: "npm:^5.0.0"
-    hermes-profile-transformer: "npm:^0.0.6"
-    ip: "npm:^1.1.5"
-    node-stream-zip: "npm:^1.9.1"
-    ora: "npm:^5.4.1"
-    prompts: "npm:^2.4.0"
-    semver: "npm:^6.3.0"
-    strip-ansi: "npm:^5.2.0"
-    sudo-prompt: "npm:^9.0.0"
-    wcwidth: "npm:^1.0.1"
-    yaml: "npm:^2.2.1"
-  checksum: 10/7128adc0261430007705dda1d23e015027806dce5ec4afc0e5fca5e97550b7d418cba4532868ad61915a2f13692698e5b447ee54deb40e055dbd92cd8183f112
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-doctor@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-doctor@npm:13.6.9"
@@ -3122,19 +3061,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-hermes@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-hermes@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-platform-android": "npm:11.3.3"
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    hermes-profile-transformer: "npm:^0.0.6"
-    ip: "npm:^1.1.5"
-  checksum: 10/712e39c09298d783f267ee670548d52d21a1614ebc5e1f3a463d4c8cf8ebf934beb7f7dd02c16bce187c6088f03672bac7949e1803d78ab59889efcc17820cc6
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-hermes@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-hermes@npm:13.6.9"
@@ -3147,19 +3073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-platform-android@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-platform-android@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    glob: "npm:^7.1.3"
-    logkitty: "npm:^0.7.1"
-  checksum: 10/86aecd4d966f5b444ca854cdb0772ce3330de8f9e452b1c9cf54e90a789d5ffbda5bac09c672e18ad753a2e1114999425b2fd9ae2ec46e6f339c3996037315fc
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-platform-android@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-platform-android@npm:13.6.9"
@@ -3216,20 +3129,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-platform-ios@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-platform-ios@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    fast-xml-parser: "npm:^4.0.12"
-    glob: "npm:^7.1.3"
-    ora: "npm:^5.4.1"
-  checksum: 10/6973553e8eeb72dc736d4b001606e30fe0fe88f32949077d4152fcb89eb1aeef0a3c2d457ba2a3de8c3aaf6b0b09cddce8d4b63801d9b05de2430fa3c0f056aa
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-platform-ios@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-platform-ios@npm:13.6.9"
@@ -3248,42 +3147,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-plugin-metro@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-plugin-metro@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-server-api": "npm:11.3.3"
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    metro: "npm:0.76.5"
-    metro-config: "npm:0.76.5"
-    metro-core: "npm:0.76.5"
-    metro-react-native-babel-transformer: "npm:0.76.5"
-    metro-resolver: "npm:0.76.5"
-    metro-runtime: "npm:0.76.5"
-    readline: "npm:^1.3.0"
-  checksum: 10/501123c5efe58680f147c7769cc704ba10b5ae23b0604a3fc4b99c72f6be7c12ce14b8e99381d060c73e2be8ecd2f873af08de90878590c8f2eb4ffe3b1d23c9
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-server-api@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-server-api@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-debugger-ui": "npm:11.3.3"
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    compression: "npm:^1.7.1"
-    connect: "npm:^3.6.5"
-    errorhandler: "npm:^1.5.1"
-    nocache: "npm:^3.0.1"
-    pretty-format: "npm:^26.6.2"
-    serve-static: "npm:^1.13.1"
-    ws: "npm:^7.5.1"
-  checksum: 10/3f0266e0248779aa27633633f0b6bb7ac92f9c421a78a95538ccab177bb0bac117621c040f1f9915b443089267829aa5ae20224d25910925324afaa8ad13da5a
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-server-api@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-server-api@npm:13.6.9"
@@ -3318,23 +3181,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-tools@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-tools@npm:11.3.3"
-  dependencies:
-    appdirsjs: "npm:^1.2.4"
-    chalk: "npm:^4.1.2"
-    find-up: "npm:^5.0.0"
-    mime: "npm:^2.4.1"
-    node-fetch: "npm:^2.6.0"
-    open: "npm:^6.2.0"
-    ora: "npm:^5.4.1"
-    semver: "npm:^6.3.0"
-    shell-quote: "npm:^1.7.3"
-  checksum: 10/f6be9bcc9e8d1e279af1b24f47f45e7d34c550a0a6af6ce5a3d6e168fc8d4838cadcce42027c9a6e851d5afd0886c724a20cadefb305cf756d2b8ad43ed4f105
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-tools@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-tools@npm:13.6.9"
@@ -3372,15 +3218,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-types@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli-types@npm:11.3.3"
-  dependencies:
-    joi: "npm:^17.2.1"
-  checksum: 10/4d172ee8a3d4bf24adc237d0e6086f8545094f1a96ee64a61e3b533d69aeef8df5f61fd9ece36634b9617c37b8ecafa6b1af71cc3da8708388e492d52b8d78e9
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli-types@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli-types@npm:13.6.9"
@@ -3399,33 +3236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli@npm:11.3.3":
-  version: 11.3.3
-  resolution: "@react-native-community/cli@npm:11.3.3"
-  dependencies:
-    "@react-native-community/cli-clean": "npm:11.3.3"
-    "@react-native-community/cli-config": "npm:11.3.3"
-    "@react-native-community/cli-debugger-ui": "npm:11.3.3"
-    "@react-native-community/cli-doctor": "npm:11.3.3"
-    "@react-native-community/cli-hermes": "npm:11.3.3"
-    "@react-native-community/cli-plugin-metro": "npm:11.3.3"
-    "@react-native-community/cli-server-api": "npm:11.3.3"
-    "@react-native-community/cli-tools": "npm:11.3.3"
-    "@react-native-community/cli-types": "npm:11.3.3"
-    chalk: "npm:^4.1.2"
-    commander: "npm:^9.4.1"
-    execa: "npm:^5.0.0"
-    find-up: "npm:^4.1.0"
-    fs-extra: "npm:^8.1.0"
-    graceful-fs: "npm:^4.1.3"
-    prompts: "npm:^2.4.0"
-    semver: "npm:^6.3.0"
-  bin:
-    react-native: build/bin.js
-  checksum: 10/63bd82da7d5ceccdca4d837f004a4d833c2afae158028824c32e554dea8b1d59ab54979c5d39149278badaaf6115e52ad04c2839d423e42b14db19e7256cfc1f
-  languageName: node
-  linkType: hard
-
 "@react-native-community/cli@npm:13.6.9":
   version: 13.6.9
   resolution: "@react-native-community/cli@npm:13.6.9"
@@ -3489,10 +3299,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/assets-registry@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/assets-registry@npm:0.74.87"
-  checksum: 10/03bd730a821b8e717a286a5eeec0df72fcfbd4faba9d8489714f027ce3bb5e161181e9ff1b1e37c68bda8bedf3c229b030a237848f7cb8c5a98ec032bd62b64c
+"@react-native/assets-registry@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/assets-registry@npm:0.74.88"
+  checksum: 10/abc49ff0179af408ed58ce3e63533f4a7eef5360b7f2a634f200c703cb8266d201d41ea4293c2a3900bfc1145c411ed5ba243a5ac27231e8bc64dce65bf5911a
   languageName: node
   linkType: hard
 
@@ -3503,13 +3313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/assets-registry@npm:^0.72.0":
-  version: 0.72.0
-  resolution: "@react-native/assets-registry@npm:0.72.0"
-  checksum: 10/c3ea6a0d225fe39a4ec5c779bfdc66ff404c5303a5793fd7277f4fd697e602416294384bfa8edc19e6622efee298c24bca31d65dbeefd3b06944a04d49906d05
-  languageName: node
-  linkType: hard
-
 "@react-native/babel-plugin-codegen@npm:0.74.87":
   version: 0.74.87
   resolution: "@react-native/babel-plugin-codegen@npm:0.74.87"
@@ -3519,6 +3322,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/babel-plugin-codegen@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/babel-plugin-codegen@npm:0.74.88"
+  dependencies:
+    "@react-native/codegen": "npm:0.74.88"
+  checksum: 10/a6cfc436a599d29d81ceb5fcc9c24ff4b91b686b1bfede65cda85859fca8cf68a931bb1654d211db47133788f67d3829e4f37882961a02960bc4532587222aeb
+  languageName: node
+  linkType: hard
+
 "@react-native/babel-plugin-codegen@npm:0.75.3":
   version: 0.75.3
   resolution: "@react-native/babel-plugin-codegen@npm:0.75.3"
@@ -3581,6 +3393,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/babel-preset@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/babel-preset@npm:0.74.88"
+  dependencies:
+    "@babel/core": "npm:^7.20.0"
+    "@babel/plugin-proposal-async-generator-functions": "npm:^7.0.0"
+    "@babel/plugin-proposal-class-properties": "npm:^7.18.0"
+    "@babel/plugin-proposal-export-default-from": "npm:^7.0.0"
+    "@babel/plugin-proposal-logical-assignment-operators": "npm:^7.18.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.18.0"
+    "@babel/plugin-proposal-numeric-separator": "npm:^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.0"
+    "@babel/plugin-proposal-optional-catch-binding": "npm:^7.0.0"
+    "@babel/plugin-proposal-optional-chaining": "npm:^7.20.0"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.0"
+    "@babel/plugin-syntax-export-default-from": "npm:^7.0.0"
+    "@babel/plugin-syntax-flow": "npm:^7.18.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.0.0"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.0.0"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.20.0"
+    "@babel/plugin-transform-block-scoping": "npm:^7.0.0"
+    "@babel/plugin-transform-classes": "npm:^7.0.0"
+    "@babel/plugin-transform-computed-properties": "npm:^7.0.0"
+    "@babel/plugin-transform-destructuring": "npm:^7.20.0"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.20.0"
+    "@babel/plugin-transform-function-name": "npm:^7.0.0"
+    "@babel/plugin-transform-literals": "npm:^7.0.0"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.0.0"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.0.0"
+    "@babel/plugin-transform-parameters": "npm:^7.0.0"
+    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.22.11"
+    "@babel/plugin-transform-react-display-name": "npm:^7.0.0"
+    "@babel/plugin-transform-react-jsx": "npm:^7.0.0"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.0.0"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.0.0"
+    "@babel/plugin-transform-runtime": "npm:^7.0.0"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0"
+    "@babel/plugin-transform-spread": "npm:^7.0.0"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.0.0"
+    "@babel/plugin-transform-typescript": "npm:^7.5.0"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.0.0"
+    "@babel/template": "npm:^7.0.0"
+    "@react-native/babel-plugin-codegen": "npm:0.74.88"
+    babel-plugin-transform-flow-enums: "npm:^0.0.2"
+    react-refresh: "npm:^0.14.0"
+  peerDependencies:
+    "@babel/core": "*"
+  checksum: 10/3abf5e1d5b8c87ce45dc99ea68a6b829efe621b43a8b3eceb67f36fb78eafd264ab73da35e52036aab98104ab0ad20b6ae7f5d49a2234bd5cd477ad0794950d6
+  languageName: node
+  linkType: hard
+
 "@react-native/babel-preset@npm:0.75.3":
   version: 0.75.3
   resolution: "@react-native/babel-preset@npm:0.75.3"
@@ -3653,13 +3518,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/codegen@npm:0.75.3":
-  version: 0.75.3
-  resolution: "@react-native/codegen@npm:0.75.3"
+"@react-native/codegen@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/codegen@npm:0.74.88"
   dependencies:
     "@babel/parser": "npm:^7.20.0"
     glob: "npm:^7.1.1"
-    hermes-parser: "npm:0.22.0"
+    hermes-parser: "npm:0.19.1"
     invariant: "npm:^2.2.4"
     jscodeshift: "npm:^0.14.0"
     mkdirp: "npm:^0.5.1"
@@ -3667,35 +3532,36 @@ __metadata:
     yargs: "npm:^17.6.2"
   peerDependencies:
     "@babel/preset-env": ^7.1.6
-  checksum: 10/a6b23e560bfe0d98594362c8ed602758eb0d00a467b45dc1863b7e585f97f7bab8c93ba711f8e41807b00b26c0776f561be7ed2d38a759bcbde375fe20ceff35
+  checksum: 10/e2e796b6e3df526fc2a7f18a17062316b7bedb82848df5cece2a5510fa87fdb12aac2f19ac6db532b57f63ee4d4d6df1304b0cec2bb33e72e68058dc57b93221
   languageName: node
   linkType: hard
 
-"@react-native/codegen@npm:^0.72.6":
-  version: 0.72.8
-  resolution: "@react-native/codegen@npm:0.72.8"
+"@react-native/codegen@npm:0.75.3":
+  version: 0.75.3
+  resolution: "@react-native/codegen@npm:0.75.3"
   dependencies:
     "@babel/parser": "npm:^7.20.0"
-    flow-parser: "npm:^0.206.0"
     glob: "npm:^7.1.1"
+    hermes-parser: "npm:0.22.0"
     invariant: "npm:^2.2.4"
     jscodeshift: "npm:^0.14.0"
     mkdirp: "npm:^0.5.1"
     nullthrows: "npm:^1.1.1"
+    yargs: "npm:^17.6.2"
   peerDependencies:
     "@babel/preset-env": ^7.1.6
-  checksum: 10/42f8d30c8481d1dd9b26e3cb63f57af69a3f3acf3bc0c45c6a64ecf72a89c07be96162a7d90449af4475d1a3bfbc3b1e081e925fbdb2a7e10f0cafb44035fad3
+  checksum: 10/a6b23e560bfe0d98594362c8ed602758eb0d00a467b45dc1863b7e585f97f7bab8c93ba711f8e41807b00b26c0776f561be7ed2d38a759bcbde375fe20ceff35
   languageName: node
   linkType: hard
 
-"@react-native/community-cli-plugin@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/community-cli-plugin@npm:0.74.87"
+"@react-native/community-cli-plugin@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/community-cli-plugin@npm:0.74.88"
   dependencies:
     "@react-native-community/cli-server-api": "npm:13.6.9"
     "@react-native-community/cli-tools": "npm:13.6.9"
-    "@react-native/dev-middleware": "npm:0.74.87"
-    "@react-native/metro-babel-transformer": "npm:0.74.87"
+    "@react-native/dev-middleware": "npm:0.74.88"
+    "@react-native/metro-babel-transformer": "npm:0.74.88"
     chalk: "npm:^4.0.0"
     execa: "npm:^5.1.1"
     metro: "npm:^0.80.3"
@@ -3704,7 +3570,7 @@ __metadata:
     node-fetch: "npm:^2.2.0"
     querystring: "npm:^0.2.1"
     readline: "npm:^1.3.0"
-  checksum: 10/ac3d9621d50135b356378033bcdf87f84982c134fee53947aa13da574815e56976818e36f18cbb93255df698ab0bc84b9476df3d9619742bbabe1790c1da1fb3
+  checksum: 10/8b13a8c349b449175f136bdde523f5382634e6c5bd044bc50f54ebdb14297a01c2ea93147968cbfc454161dbb1cfac8e246d85d16404b99411e68f673324f65e
   languageName: node
   linkType: hard
 
@@ -3734,10 +3600,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/debugger-frontend@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/debugger-frontend@npm:0.74.87"
-  checksum: 10/6d9c20be1900b0150ca41bca0411373503b5e48f3f5be941e547bae3f7ad18f95c942af30a4c754f54cfec8eca03f82bec6b027b9d5f0c5a6af8919fe6767ccf
+"@react-native/debugger-frontend@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/debugger-frontend@npm:0.74.88"
+  checksum: 10/b41a27f7b7ade8e9e56e64b2085f0100dd3f3318bac05f5a4bb3c7d4d5648475a6220c4658283a49aac6bd1b52d8e93d126bffae1a59e950cbd60783f512899d
   languageName: node
   linkType: hard
 
@@ -3769,12 +3635,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/dev-middleware@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/dev-middleware@npm:0.74.87"
+"@react-native/dev-middleware@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/dev-middleware@npm:0.74.88"
   dependencies:
     "@isaacs/ttlcache": "npm:^1.4.1"
-    "@react-native/debugger-frontend": "npm:0.74.87"
+    "@react-native/debugger-frontend": "npm:0.74.88"
     "@rnx-kit/chromium-edge-launcher": "npm:^1.0.0"
     chrome-launcher: "npm:^0.15.2"
     connect: "npm:^3.6.5"
@@ -3786,7 +3652,7 @@ __metadata:
     serve-static: "npm:^1.13.1"
     temp-dir: "npm:^2.0.0"
     ws: "npm:^6.2.2"
-  checksum: 10/9fcaaa3b37981fca5805d0b3d22de774c0c6371bfa188943e7afc3568d523cc55aa6683b3b9e6fe60a38e982209ef52c31951875d5acbbd764558127a9164625
+  checksum: 10/9c28a7966cbf42da7acb5cfd52d38a919f97b5240cfb7f832effd93f84cada05bc1644f1d5b1a530b102a54f78231db021fc32d8c5f035dbe5bd140d1ad5f17b
   languageName: node
   linkType: hard
 
@@ -3848,10 +3714,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/gradle-plugin@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/gradle-plugin@npm:0.74.87"
-  checksum: 10/6a72fd36be6022e166df3c6d7af8e792fcaeff6b9bbe80e1b8237cab0a972795da48f9d9ca57608b1964fef9cdaf670dfe2cb934e4e5ed458fc557c443cf8d64
+"@react-native/gradle-plugin@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/gradle-plugin@npm:0.74.88"
+  checksum: 10/9422510b68d7038e6d2a6dfef69b89fbfd0508e2bf0c63d277a441b4c2bb5df85e1f29d7b28316964278efdf778ae40f2bbba57e2268dd95fa3ce4084f040ad1
   languageName: node
   linkType: hard
 
@@ -3862,17 +3728,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/gradle-plugin@npm:^0.72.11":
-  version: 0.72.11
-  resolution: "@react-native/gradle-plugin@npm:0.72.11"
-  checksum: 10/1cd6a8034bb2ac2041da9dc5fd958d41332de1b330cac115daaf78e98583a022a0cc59430ab7ef6a1fe58e34fc075ff1dfb3bd5f02155d259668ffc27edb69ff
-  languageName: node
-  linkType: hard
-
-"@react-native/js-polyfills@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/js-polyfills@npm:0.74.87"
-  checksum: 10/aa552c0e3c4d90148567b9434b4c6dabbee77ea376493ebe289170301f304606c7f6ee3830e6acd90b21b25cfcb9eb2121f934911f737f969f2743630263f0ba
+"@react-native/js-polyfills@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/js-polyfills@npm:0.74.88"
+  checksum: 10/97d3d6205d79e6bc92c72229e0ad5c239f8b8220ff18aef002641174886938f0b51492f2002a37eb6586815f586b72666e96fb404fdde15798131e50064fbe6a
   languageName: node
   linkType: hard
 
@@ -3890,17 +3749,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/metro-babel-transformer@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/metro-babel-transformer@npm:0.74.87"
+"@react-native/metro-babel-transformer@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/metro-babel-transformer@npm:0.74.88"
   dependencies:
     "@babel/core": "npm:^7.20.0"
-    "@react-native/babel-preset": "npm:0.74.87"
+    "@react-native/babel-preset": "npm:0.74.88"
     hermes-parser: "npm:0.19.1"
     nullthrows: "npm:^1.1.1"
   peerDependencies:
     "@babel/core": "*"
-  checksum: 10/02654f4544786e19de2a8dea905bca3ef5793587c89537f8c61df9c6c0a5193f543a1975ec54be7993da2277bc1f2c5fecb559504c18a7f95078e7f53989baa9
+  checksum: 10/c9dfc9043c862c4322df61169a157fc46f31ce381939f17c0edc36d45798a6f9700c9aae81aafa730a3a54d864aefbc98fc6a993702e47eb7e9a5231f43f53c8
   languageName: node
   linkType: hard
 
@@ -3949,13 +3808,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:*, @react-native/normalize-colors@npm:0.75.3":
-  version: 0.75.3
-  resolution: "@react-native/normalize-colors@npm:0.75.3"
-  checksum: 10/a631015d453395d66c093b6bb6690c1fe4331318a846109a700cfd70ac278d271f6fdbce7e12e523bcf2b810f3d800ada387e4eb761e44b430b163bee96c5b99
-  languageName: node
-  linkType: hard
-
 "@react-native/normalize-colors@npm:0.74.85":
   version: 0.74.85
   resolution: "@react-native/normalize-colors@npm:0.74.85"
@@ -3963,23 +3815,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/normalize-colors@npm:0.74.87"
-  checksum: 10/f24ba360e5b32319adb674b3d6b606bc97c21b72487e7dae52f23425b6c563166d1d9bb8c5a2bf1405a4aea5efa065574748f37311ec09da06901476159d3a2c
+"@react-native/normalize-colors@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/normalize-colors@npm:0.74.88"
+  checksum: 10/997f3c4f50832a34b0624dfcfc4b8c33ce84462e62d4abc4bee8cd71aea9ed1f378a28f792408813bfb26fd903800595930d643721014b684a309ac814edacfa
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:^0.72.0":
-  version: 0.72.0
-  resolution: "@react-native/normalize-colors@npm:0.72.0"
-  checksum: 10/d9b219191a5191a8b3528d8abfac339adfbe0738c46f0a34ba25b6f076d55e888fb9e07e844d205c201099a5f9d5c5bfd8bc6635f9fa04f9a92a80e9836daf99
+"@react-native/normalize-colors@npm:0.75.3":
+  version: 0.75.3
+  resolution: "@react-native/normalize-colors@npm:0.75.3"
+  checksum: 10/a631015d453395d66c093b6bb6690c1fe4331318a846109a700cfd70ac278d271f6fdbce7e12e523bcf2b810f3d800ada387e4eb761e44b430b163bee96c5b99
   languageName: node
   linkType: hard
 
-"@react-native/virtualized-lists@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/virtualized-lists@npm:0.74.87"
+"@react-native/virtualized-lists@npm:0.74.88":
+  version: 0.74.88
+  resolution: "@react-native/virtualized-lists@npm:0.74.88"
   dependencies:
     invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
@@ -3990,7 +3842,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/eac3fd11d776de281dde440fcb4dbe0abdacc0be6c82a31ede755cf07678907dacc9e0252067880282f21b75b4ee3e131c80833b5cc61dd48b7113b9d461c7a5
+  checksum: 10/05b0c7c93b03786953461f481a194452caf675b405f167c8981ce123d6ea9dcc2a4e423338a93dd0037b1160073b4ea3d0be0766a34a94f898906cfaea6a3ae3
   languageName: node
   linkType: hard
 
@@ -4011,7 +3863,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/virtualized-lists@npm:^0.72.4, @react-native/virtualized-lists@npm:^0.72.6":
+"@react-native/virtualized-lists@npm:^0.72.4":
   version: 0.72.8
   resolution: "@react-native/virtualized-lists@npm:0.72.8"
   dependencies:
@@ -6132,7 +5984,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.1.2, base64-js@npm:^1.2.3, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
+"base64-js@npm:^1.2.3, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
   checksum: 10/669632eb3745404c2f822a18fc3a0122d2f9a7a13f7fb8b5823ee19d1d2ff9ee5b52c53367176ea4ad093c332fd5ab4bd0ebae5a8e27917a4105a4cfc86b1005
@@ -7458,17 +7310,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deprecated-react-native-prop-types@npm:4.1.0":
-  version: 4.1.0
-  resolution: "deprecated-react-native-prop-types@npm:4.1.0"
-  dependencies:
-    "@react-native/normalize-colors": "npm:*"
-    invariant: "npm:*"
-    prop-types: "npm:*"
-  checksum: 10/90bb851e1e453399d3041ba6e7fee020f0b39b31d33d95c4679d71ead3a8e229a6ece05c05c4a373a2c0f6f42c04b8b0082c925d4a157767e782187b3a8473ae
-  languageName: node
-  linkType: hard
-
 "dequal@npm:^2.0.0":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
@@ -7899,7 +7740,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:^7.10.0, envinfo@npm:^7.13.0, envinfo@npm:^7.7.2":
+"envinfo@npm:^7.10.0, envinfo@npm:^7.13.0":
   version: 7.14.0
   resolution: "envinfo@npm:7.14.0"
   bin:
@@ -9241,13 +9082,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flow-enums-runtime@npm:^0.0.5":
-  version: 0.0.5
-  resolution: "flow-enums-runtime@npm:0.0.5"
-  checksum: 10/4d79961ba9e869917278de6254ce7fcceeb45ab0f4a093c459e20879fc8c96d5af35a5a89e35af33c377526067ae86b60ff91bf4a3c2169146470dc4071c1a5c
-  languageName: node
-  linkType: hard
-
 "flow-enums-runtime@npm:^0.0.6":
   version: 0.0.6
   resolution: "flow-enums-runtime@npm:0.0.6"
@@ -9262,13 +9096,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flow-parser@npm:^0.206.0":
-  version: 0.206.0
-  resolution: "flow-parser@npm:0.206.0"
-  checksum: 10/26ab7c3f0c23953fac977bcd093b4f18b13a705ea57ef5be8591d100f4c55c83225ae27693bdec3ba38b1d591b9b47b2cd8845eac0bce69cced9d3417154f143
-  languageName: node
-  linkType: hard
-
 "fontfaceobserver@npm:^2.1.0":
   version: 2.3.0
   resolution: "fontfaceobserver@npm:2.3.0"
@@ -10008,13 +9835,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hermes-estree@npm:0.8.0":
-  version: 0.8.0
-  resolution: "hermes-estree@npm:0.8.0"
-  checksum: 10/f28f2cda9463d96b879b21a6093ebcf8a189796d6b8c011bc5726d6d3635d7337f3e846e663ada4400076f7c4616f13ff15646bd021ffc9e9d620d9c14b7eff3
-  languageName: node
-  linkType: hard
-
 "hermes-parser@npm:0.12.0":
   version: 0.12.0
   resolution: "hermes-parser@npm:0.12.0"
@@ -10051,15 +9871,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hermes-parser@npm:0.8.0":
-  version: 0.8.0
-  resolution: "hermes-parser@npm:0.8.0"
-  dependencies:
-    hermes-estree: "npm:0.8.0"
-  checksum: 10/2cfacb0a0b3b30ed6abc489b3902d35294aa15131669aac5afc0b641c0cea7692d6082c705c7a3c61cf3b13e771d9ddf496d84acfa8b2d373004e1d128d29d35
-  languageName: node
-  linkType: hard
-
 "hermes-profile-transformer@npm:^0.0.6":
   version: 0.0.6
   resolution: "hermes-profile-transformer@npm:0.0.6"
@@ -10342,7 +10153,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:*, invariant@npm:^2.2.4":
+"invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
   dependencies:
@@ -10368,13 +10179,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip@npm:^1.1.5":
-  version: 1.1.9
-  resolution: "ip@npm:1.1.9"
-  checksum: 10/29261559b806f64929ada21e6d7e3bf4e67f2b43a4cb67500fdb72cead2e655ce97451a2e325eca3f404081c634ff5c3a68472814744b7f2148ddffc0fdfe66c
-  languageName: node
-  linkType: hard
-
 "ipaddr.js@npm:^1.9.0":
   version: 1.9.1
   resolution: "ipaddr.js@npm:1.9.1"
@@ -11198,7 +11002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^29.2.1, jest-environment-node@npm:^29.6.3, jest-environment-node@npm:^29.7.0":
+"jest-environment-node@npm:^29.6.3, jest-environment-node@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-environment-node@npm:29.7.0"
   dependencies:
@@ -12643,18 +12447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-babel-transformer@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-babel-transformer@npm:0.76.5"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    hermes-parser: "npm:0.8.0"
-    metro-source-map: "npm:0.76.5"
-    nullthrows: "npm:^1.1.1"
-  checksum: 10/1d595847e620c062ea03e4e43f7a6ab1888d21616a9fe21580d5b222438818c0053b5589dfaa960fb904ed76f03460f5e3aaa04c6183545405ced478ac5f2400
-  languageName: node
-  linkType: hard
-
 "metro-babel-transformer@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-babel-transformer@npm:0.76.9"
@@ -12678,13 +12470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-cache-key@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-cache-key@npm:0.76.5"
-  checksum: 10/87e0d6325dd0666d82d51adc7a5599cdddb56b637e212208c2ccee90b1f1fae2e5fbec4ac6b4960e3cfae462a6ffbe76a6d707b2c053420af52977305f2ed8b2
-  languageName: node
-  linkType: hard
-
 "metro-cache-key@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-cache-key@npm:0.76.9"
@@ -12701,16 +12486,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-cache@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-cache@npm:0.76.5"
-  dependencies:
-    metro-core: "npm:0.76.5"
-    rimraf: "npm:^3.0.2"
-  checksum: 10/217f891e197a73ae733bd482cee0e6d91f39007f9e820bbc09e43d668e1f7a25573d32635fa772e723354f5064af984baab4c357b16ce410a8e7228b1c2a6ae5
-  languageName: node
-  linkType: hard
-
 "metro-cache@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-cache@npm:0.76.9"
@@ -12732,20 +12507,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-config@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-config@npm:0.76.5"
-  dependencies:
-    cosmiconfig: "npm:^5.0.5"
-    jest-validate: "npm:^29.2.1"
-    metro: "npm:0.76.5"
-    metro-cache: "npm:0.76.5"
-    metro-core: "npm:0.76.5"
-    metro-runtime: "npm:0.76.5"
-  checksum: 10/be1c0f498d454760d9f17b0469159c111b22b65b28af4ea804ac7a30d9f42241b9d7f6dde7d6bdf7c1b50b972b7f19a3feb82c6b8180896c14c15d2863454f11
-  languageName: node
-  linkType: hard
-
 "metro-config@npm:0.76.9, metro-config@npm:^0.76.9":
   version: 0.76.9
   resolution: "metro-config@npm:0.76.9"
@@ -12777,16 +12538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-core@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-core@npm:0.76.5"
-  dependencies:
-    lodash.throttle: "npm:^4.1.1"
-    metro-resolver: "npm:0.76.5"
-  checksum: 10/ee4afe090ae665e3f2f392ec5d2a97bbaf667f61d8fd99cb4a64251f11eeb7c96e012ec62d2aff20430ebe28762ab5cfe6a47dfbd1219251694b86e20ab9ed9a
-  languageName: node
-  linkType: hard
-
 "metro-core@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-core@npm:0.76.9"
@@ -12808,30 +12559,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-file-map@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-file-map@npm:0.76.5"
-  dependencies:
-    anymatch: "npm:^3.0.3"
-    debug: "npm:^2.2.0"
-    fb-watchman: "npm:^2.0.0"
-    fsevents: "npm:^2.3.2"
-    graceful-fs: "npm:^4.2.4"
-    invariant: "npm:^2.2.4"
-    jest-regex-util: "npm:^27.0.6"
-    jest-util: "npm:^27.2.0"
-    jest-worker: "npm:^27.2.0"
-    micromatch: "npm:^4.0.4"
-    node-abort-controller: "npm:^3.1.1"
-    nullthrows: "npm:^1.1.1"
-    walker: "npm:^1.0.7"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10/27fa861f630fb2f623f0c08fc3c2ba9218e3f250690e9321f7636879cae8ae92b49121a231bc8ab997e64533f72623ccce8bdfc0ef74c5ffb4acb5c83eef8918
-  languageName: node
-  linkType: hard
-
 "metro-file-map@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-file-map@npm:0.76.9"
@@ -12879,21 +12606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-inspector-proxy@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-inspector-proxy@npm:0.76.5"
-  dependencies:
-    connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    node-fetch: "npm:^2.2.0"
-    ws: "npm:^7.5.1"
-    yargs: "npm:^17.6.2"
-  bin:
-    metro-inspector-proxy: src/cli.js
-  checksum: 10/bb728a502346fbbf63c34ea7558d467a5628c780a743d675357d635c9f976549aba5356f7531de1ae63291ad48a2c1582376b6c5623f0f39eafd98073ba53c98
-  languageName: node
-  linkType: hard
-
 "metro-inspector-proxy@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-inspector-proxy@npm:0.76.9"
@@ -12909,15 +12621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-minify-terser@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-minify-terser@npm:0.76.5"
-  dependencies:
-    terser: "npm:^5.15.0"
-  checksum: 10/5bc834413435b47bc4e90bde8943698a7c5ba8b2e188b9b6507a124844bcd541cb15723b58b77e825072e2da31083291f4484532b602a166e7608ae60e4f5e2b
-  languageName: node
-  linkType: hard
-
 "metro-minify-terser@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-minify-terser@npm:0.76.9"
@@ -12937,15 +12640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-minify-uglify@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-minify-uglify@npm:0.76.5"
-  dependencies:
-    uglify-es: "npm:^3.1.9"
-  checksum: 10/79c5e9cd4e7e18986914fa092cb7a7ab6c134beb4e179cc6db180e4c72100187708991a19aef6d342ebd607052dd9cc3435f029884fe680093b2a88870478703
-  languageName: node
-  linkType: hard
-
 "metro-minify-uglify@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-minify-uglify@npm:0.76.9"
@@ -13004,55 +12698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-preset@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-react-native-babel-preset@npm:0.76.5"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/plugin-proposal-async-generator-functions": "npm:^7.0.0"
-    "@babel/plugin-proposal-class-properties": "npm:^7.18.0"
-    "@babel/plugin-proposal-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.18.0"
-    "@babel/plugin-proposal-numeric-separator": "npm:^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.0"
-    "@babel/plugin-proposal-optional-catch-binding": "npm:^7.0.0"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.20.0"
-    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.0"
-    "@babel/plugin-syntax-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-syntax-flow": "npm:^7.18.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.0.0"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.0.0"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.20.0"
-    "@babel/plugin-transform-block-scoping": "npm:^7.0.0"
-    "@babel/plugin-transform-classes": "npm:^7.0.0"
-    "@babel/plugin-transform-computed-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-destructuring": "npm:^7.20.0"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.20.0"
-    "@babel/plugin-transform-function-name": "npm:^7.0.0"
-    "@babel/plugin-transform-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-parameters": "npm:^7.0.0"
-    "@babel/plugin-transform-react-display-name": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.0.0"
-    "@babel/plugin-transform-runtime": "npm:^7.0.0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-spread": "npm:^7.0.0"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-typescript": "npm:^7.5.0"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.0.0"
-    "@babel/template": "npm:^7.0.0"
-    babel-plugin-transform-flow-enums: "npm:^0.0.2"
-    react-refresh: "npm:^0.4.0"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10/0d2639edfb8c01a3a808478ffede15e8b7e10ee9c893b40774dd5de0707b6a2fa98597bc2b651b86de0fc56a1fc5b199e65f73135af964780f8f702407a30597
-  languageName: node
-  linkType: hard
-
 "metro-react-native-babel-preset@npm:0.76.9, metro-react-native-babel-preset@npm:^0.76.7":
   version: 0.76.9
   resolution: "metro-react-native-babel-preset@npm:0.76.9"
@@ -13102,23 +12747,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-transformer@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-react-native-babel-transformer@npm:0.76.5"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    babel-preset-fbjs: "npm:^3.4.0"
-    hermes-parser: "npm:0.8.0"
-    metro-babel-transformer: "npm:0.76.5"
-    metro-react-native-babel-preset: "npm:0.76.5"
-    metro-source-map: "npm:0.76.5"
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10/5a221b0467197a1b362bdbf5e23fbdaebf3172b5d0ebeb3d568f6febecaecb4d6428d3b23a2be6883a663a7fe82b4e8038d2b736ad56156ae1624b79273e4981
-  languageName: node
-  linkType: hard
-
 "metro-react-native-babel-transformer@npm:^0.76.9":
   version: 0.76.9
   resolution: "metro-react-native-babel-transformer@npm:0.76.9"
@@ -13134,13 +12762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-resolver@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-resolver@npm:0.76.5"
-  checksum: 10/bfbb3a15be752c6f9bc19d09b9c9da3a41bce1859b60d27273f1863749642eeb566c3daf96b3b7e5dd18a83390e3a1b2370eb2bf2a66a0724619cb8b4c7e809a
-  languageName: node
-  linkType: hard
-
 "metro-resolver@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-resolver@npm:0.76.9"
@@ -13157,16 +12778,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-runtime@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-runtime@npm:0.76.5"
-  dependencies:
-    "@babel/runtime": "npm:^7.0.0"
-    react-refresh: "npm:^0.4.0"
-  checksum: 10/8ae647a81ed7639eb7642ef76f4c747110141d718ea4011c8a6e9dae9815beefa939a17732694a0170c330313a2796d2bb35b9dd9a1fabcc42033ad193590ebf
-  languageName: node
-  linkType: hard
-
 "metro-runtime@npm:0.76.9, metro-runtime@npm:^0.76.9":
   version: 0.76.9
   resolution: "metro-runtime@npm:0.76.9"
@@ -13187,22 +12798,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-source-map@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-source-map@npm:0.76.5"
-  dependencies:
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    invariant: "npm:^2.2.4"
-    metro-symbolicate: "npm:0.76.5"
-    nullthrows: "npm:^1.1.1"
-    ob1: "npm:0.76.5"
-    source-map: "npm:^0.5.6"
-    vlq: "npm:^1.0.0"
-  checksum: 10/fd4aca7cc8fdcfa519ebee220366a721b035ed2de294d0cce819f498d5ae45da9a981a9409345e3c7927a7b8899dc899be0ac5ba31661ffd17053a392cb102f8
-  languageName: node
-  linkType: hard
-
 "metro-source-map@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-source-map@npm:0.76.9"
@@ -13236,22 +12831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-symbolicate@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-symbolicate@npm:0.76.5"
-  dependencies:
-    invariant: "npm:^2.2.4"
-    metro-source-map: "npm:0.76.5"
-    nullthrows: "npm:^1.1.1"
-    source-map: "npm:^0.5.6"
-    through2: "npm:^2.0.1"
-    vlq: "npm:^1.0.0"
-  bin:
-    metro-symbolicate: src/index.js
-  checksum: 10/1ba00a276a2bc30fa5ea859133a793e53c1d61955bf07a00f18db39fd03976ad388ce575b34eb3ab2c2b7bbac771ab9b527ec148caa13afa8d1e7f0cd9b20d70
-  languageName: node
-  linkType: hard
-
 "metro-symbolicate@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-symbolicate@npm:0.76.9"
@@ -13285,19 +12864,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-transform-plugins@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-transform-plugins@npm:0.76.5"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
-    nullthrows: "npm:^1.1.1"
-  checksum: 10/72b3fe1a205b39a872a69efb81b4bc290aa3f6443d11cf04036c80192df4cce7c12eabee41569222cc76b64c04bfddddc84f94857cf92b8b7d37600e355779c7
-  languageName: node
-  linkType: hard
-
 "metro-transform-plugins@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-transform-plugins@npm:0.76.9"
@@ -13325,26 +12891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-transform-worker@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro-transform-worker@npm:0.76.5"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    babel-preset-fbjs: "npm:^3.4.0"
-    metro: "npm:0.76.5"
-    metro-babel-transformer: "npm:0.76.5"
-    metro-cache: "npm:0.76.5"
-    metro-cache-key: "npm:0.76.5"
-    metro-source-map: "npm:0.76.5"
-    metro-transform-plugins: "npm:0.76.5"
-    nullthrows: "npm:^1.1.1"
-  checksum: 10/ccf81ef7f9d01cdf82053d184bab6eef80a08cab33357a173901dfe63b684a545b4dbe91f2cdc818fc835848ed0566a0a35dca8ee63c7f859c52455ddee42ba5
-  languageName: node
-  linkType: hard
-
 "metro-transform-worker@npm:0.76.9":
   version: 0.76.9
   resolution: "metro-transform-worker@npm:0.76.9"
@@ -13387,64 +12933,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro@npm:0.76.5":
-  version: 0.76.5
-  resolution: "metro@npm:0.76.5"
-  dependencies:
-    "@babel/code-frame": "npm:^7.0.0"
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    accepts: "npm:^1.3.7"
-    async: "npm:^3.2.2"
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^2.0.0"
-    connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    denodeify: "npm:^1.2.1"
-    error-stack-parser: "npm:^2.0.6"
-    graceful-fs: "npm:^4.2.4"
-    hermes-parser: "npm:0.8.0"
-    image-size: "npm:^1.0.2"
-    invariant: "npm:^2.2.4"
-    jest-worker: "npm:^27.2.0"
-    jsc-safe-url: "npm:^0.2.2"
-    lodash.throttle: "npm:^4.1.1"
-    metro-babel-transformer: "npm:0.76.5"
-    metro-cache: "npm:0.76.5"
-    metro-cache-key: "npm:0.76.5"
-    metro-config: "npm:0.76.5"
-    metro-core: "npm:0.76.5"
-    metro-file-map: "npm:0.76.5"
-    metro-inspector-proxy: "npm:0.76.5"
-    metro-minify-terser: "npm:0.76.5"
-    metro-minify-uglify: "npm:0.76.5"
-    metro-react-native-babel-preset: "npm:0.76.5"
-    metro-resolver: "npm:0.76.5"
-    metro-runtime: "npm:0.76.5"
-    metro-source-map: "npm:0.76.5"
-    metro-symbolicate: "npm:0.76.5"
-    metro-transform-plugins: "npm:0.76.5"
-    metro-transform-worker: "npm:0.76.5"
-    mime-types: "npm:^2.1.27"
-    node-fetch: "npm:^2.2.0"
-    nullthrows: "npm:^1.1.1"
-    rimraf: "npm:^3.0.2"
-    serialize-error: "npm:^2.1.0"
-    source-map: "npm:^0.5.6"
-    strip-ansi: "npm:^6.0.0"
-    throat: "npm:^5.0.0"
-    ws: "npm:^7.5.1"
-    yargs: "npm:^17.6.2"
-  bin:
-    metro: src/cli.js
-  checksum: 10/81f5d102c41ad198e8741fd267062a02871425a843efce91651609b13e7339f6e8e99268984f1991b914625af444b7b613a7517419c2cdedba6c790933647387
-  languageName: node
-  linkType: hard
-
 "metro@npm:0.76.9":
   version: 0.76.9
   resolution: "metro@npm:0.76.9"
@@ -14463,13 +13951,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ob1@npm:0.76.5":
-  version: 0.76.5
-  resolution: "ob1@npm:0.76.5"
-  checksum: 10/1f186035b6b6907048d3c96f5d08e1df58d95bf271ade5736433f447bc37e97ebd30bd5204511cdafd769f57df5113bbbb41ab984c3acdb7c799d4e777c1c4a3
-  languageName: node
-  linkType: hard
-
 "ob1@npm:0.76.9":
   version: 0.76.9
   resolution: "ob1@npm:0.76.9"
@@ -15165,7 +14646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.3.3":
+"prettier@npm:3.3.3":
   version: 3.3.3
   resolution: "prettier@npm:3.3.3"
   bin:
@@ -15272,7 +14753,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prompts@npm:^2.0.1, prompts@npm:^2.2.1, prompts@npm:^2.3.2, prompts@npm:^2.4.0, prompts@npm:^2.4.2":
+"prompts@npm:^2.0.1, prompts@npm:^2.2.1, prompts@npm:^2.3.2, prompts@npm:^2.4.2":
   version: 2.4.2
   resolution: "prompts@npm:2.4.2"
   dependencies:
@@ -15444,16 +14925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-devtools-core@npm:^4.27.2":
-  version: 4.28.5
-  resolution: "react-devtools-core@npm:4.28.5"
-  dependencies:
-    shell-quote: "npm:^1.6.1"
-    ws: "npm:^7"
-  checksum: 10/7c951a6a9b773e4fd56b2f1894c83aaec417373cf01aa261bd2dd286e6c6f1d8c67a3749ecb1d106dbf9e8cda0e6ed1bfd6ce1b61c81e035f2527be3dd9eebc2
-  languageName: node
-  linkType: hard
-
 "react-devtools-core@npm:^5.0.0, react-devtools-core@npm:^5.3.1":
   version: 5.3.1
   resolution: "react-devtools-core@npm:5.3.1"
@@ -15501,7 +14972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0, react-is@npm:^18.3.1":
+"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22
@@ -15771,69 +15242,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native@npm:0.72.1":
-  version: 0.72.1
-  resolution: "react-native@npm:0.72.1"
-  dependencies:
-    "@jest/create-cache-key-function": "npm:^29.2.1"
-    "@react-native-community/cli": "npm:11.3.3"
-    "@react-native-community/cli-platform-android": "npm:11.3.3"
-    "@react-native-community/cli-platform-ios": "npm:11.3.3"
-    "@react-native/assets-registry": "npm:^0.72.0"
-    "@react-native/codegen": "npm:^0.72.6"
-    "@react-native/gradle-plugin": "npm:^0.72.11"
-    "@react-native/js-polyfills": "npm:^0.72.1"
-    "@react-native/normalize-colors": "npm:^0.72.0"
-    "@react-native/virtualized-lists": "npm:^0.72.6"
-    abort-controller: "npm:^3.0.0"
-    anser: "npm:^1.4.9"
-    base64-js: "npm:^1.1.2"
-    deprecated-react-native-prop-types: "npm:4.1.0"
-    event-target-shim: "npm:^5.0.1"
-    flow-enums-runtime: "npm:^0.0.5"
-    invariant: "npm:^2.2.4"
-    jest-environment-node: "npm:^29.2.1"
-    jsc-android: "npm:^250231.0.0"
-    memoize-one: "npm:^5.0.0"
-    metro-runtime: "npm:0.76.5"
-    metro-source-map: "npm:0.76.5"
-    mkdirp: "npm:^0.5.1"
-    nullthrows: "npm:^1.1.1"
-    pretty-format: "npm:^26.5.2"
-    promise: "npm:^8.3.0"
-    react-devtools-core: "npm:^4.27.2"
-    react-refresh: "npm:^0.4.0"
-    react-shallow-renderer: "npm:^16.15.0"
-    regenerator-runtime: "npm:^0.13.2"
-    scheduler: "npm:0.24.0-canary-efb381bbf-20230505"
-    stacktrace-parser: "npm:^0.1.10"
-    use-sync-external-store: "npm:^1.0.0"
-    whatwg-fetch: "npm:^3.0.0"
-    ws: "npm:^6.2.2"
-    yargs: "npm:^17.6.2"
-  peerDependencies:
-    react: 18.2.0
-  bin:
-    react-native: cli.js
-  checksum: 10/de391c18da0c652ede73c63789dda890340ede200994124e9e120c1c742c53c672e3fcc3b624869a4f7ae5bfba1d772ba5c85e9301cb5a00ab489c270a62cbc3
-  languageName: node
-  linkType: hard
-
-"react-native@npm:0.74.5":
-  version: 0.74.5
-  resolution: "react-native@npm:0.74.5"
+"react-native@npm:0.74.6":
+  version: 0.74.6
+  resolution: "react-native@npm:0.74.6"
   dependencies:
     "@jest/create-cache-key-function": "npm:^29.6.3"
     "@react-native-community/cli": "npm:13.6.9"
     "@react-native-community/cli-platform-android": "npm:13.6.9"
     "@react-native-community/cli-platform-ios": "npm:13.6.9"
-    "@react-native/assets-registry": "npm:0.74.87"
-    "@react-native/codegen": "npm:0.74.87"
-    "@react-native/community-cli-plugin": "npm:0.74.87"
-    "@react-native/gradle-plugin": "npm:0.74.87"
-    "@react-native/js-polyfills": "npm:0.74.87"
-    "@react-native/normalize-colors": "npm:0.74.87"
-    "@react-native/virtualized-lists": "npm:0.74.87"
+    "@react-native/assets-registry": "npm:0.74.88"
+    "@react-native/codegen": "npm:0.74.88"
+    "@react-native/community-cli-plugin": "npm:0.74.88"
+    "@react-native/gradle-plugin": "npm:0.74.88"
+    "@react-native/js-polyfills": "npm:0.74.88"
+    "@react-native/normalize-colors": "npm:0.74.88"
+    "@react-native/virtualized-lists": "npm:0.74.88"
     abort-controller: "npm:^3.0.0"
     anser: "npm:^1.4.9"
     ansi-regex: "npm:^5.0.0"
@@ -15841,6 +15264,7 @@ __metadata:
     chalk: "npm:^4.0.0"
     event-target-shim: "npm:^5.0.1"
     flow-enums-runtime: "npm:^0.0.6"
+    glob: "npm:^7.1.1"
     invariant: "npm:^2.2.4"
     jest-environment-node: "npm:^29.6.3"
     jsc-android: "npm:^250231.0.0"
@@ -15868,7 +15292,7 @@ __metadata:
       optional: true
   bin:
     react-native: cli.js
-  checksum: 10/3ffd5ec753749bc1d9f4f072547dc7e475f6e6be17a6a3f21698479b5143aaaa1c90e07175b11ed20480e75419b7c0bdd07d66477f2a1e4dca9d5f5c3d926eb0
+  checksum: 10/9e9af7584ed194313c3932a6f18d1de9135bd3fc0e48f94709d0e46121f22b428afd3376850f5b4dd10836a08319d0436d314680b277d656734754e21f2202f5
   languageName: node
   linkType: hard
 
@@ -15911,20 +15335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-test-renderer@npm:18.3.1"
-  dependencies:
-    react-is: "npm:^18.3.1"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.2"
-  peerDependencies:
-    react: ^18.3.1
-  checksum: 10/d53137315c677bdfba702a7179a69828233fc7635ae1e0c03b203923d643400ace72b343cb3dd3dafba8911c20bef53f55bff7aa2e4ddff3ccc423fdd9deeee2
-  languageName: node
-  linkType: hard
-
-"react@npm:*, react@npm:^18.2.0":
+"react@npm:*":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -16562,7 +15973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0, scheduler@npm:^0.23.2":
+"scheduler@npm:^0.23.0":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"
   dependencies:
@@ -18344,15 +17755,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.0.0":
-  version: 1.2.2
-  resolution: "use-sync-external-store@npm:1.2.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/671e9c190aab9a8374a5d468c6ba17f52c38b6fae970110bc196fc1e2b57204149aea9619be49a1bb5207fb6e51d8afd19c3bcb94afe61813fed039821461dc0
-  languageName: node
-  linkType: hard
-
 "utf8-byte-length@npm:^1.0.1":
   version: 1.0.5
   resolution: "utf8-byte-length@npm:1.0.5"

From 7c54ad11188ef4a94d0b4971e97ccaeef258871e Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 16:26:45 +0200
Subject: [PATCH 02/13] chore: improve eslint setup

---
 .eslintrc.js         |   5 +
 package.json         |  31 +---
 scripts/.eslintrc.js |   3 +
 yarn.lock            | 395 +++++++++++--------------------------------
 4 files changed, 111 insertions(+), 323 deletions(-)
 create mode 100644 .eslintrc.js
 create mode 100644 scripts/.eslintrc.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..b749fec45
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ["universe/native"],
+  ignorePatterns: ["plugin/build"],
+};
diff --git a/package.json b/package.json
index 96b9ad26c..239afa60a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "unittest:single": "jest --testNamePattern",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "lint:single": "eslint",
     "prepack": "pinst --disable && yarn build:plugin",
     "test:plugin": "jest plugin",
     "build:plugin": "tsc --build plugin",
@@ -68,23 +67,18 @@
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
     "@expo/config-plugins": "^7.2.5",
-    "@react-native/eslint-config": "^0.73.2",
-    "@react-native/eslint-plugin": "^0.74.0",
     "@react-native/metro-config": "^0.72.7",
     "@sinonjs/fake-timers": "^11.2.2",
     "@testing-library/react-native": "^12.4.3",
     "@tsconfig/node14": "^14.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.6.0",
     "documentation": "^14.0.0",
     "ejs": "^3.1.3",
     "ejs-lint": "^2.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^8.57.1",
     "eslint-config-universe": "13.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "expo-module-scripts": "^3.1.0",
     "husky": "^9.0.10",
     "jest": "^29.7.0",
@@ -121,25 +115,6 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "yarn lint"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "prettier",
-      "universe/native"
-    ],
-    "ignorePatterns": [
-      "node_modules/*",
-      "*.js",
-      "**/dist/*.js",
-      "/plugin/build"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": "error"
-    }
-  },
   "packageManager": "yarn@4.1.0",
   "workspaces": [
     "apps/*",
diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js
new file mode 100644
index 000000000..e4f12c057
--- /dev/null
+++ b/scripts/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["universe/node"],
+};
diff --git a/yarn.lock b/yarn.lock
index d5b3f2f71..440ef351f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -91,7 +91,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/eslint-parser@npm:^7.20.0, @babel/eslint-parser@npm:^7.22.9":
+"@babel/eslint-parser@npm:^7.22.9":
   version: 7.25.1
   resolution: "@babel/eslint-parser@npm:7.25.1"
   dependencies:
@@ -1809,13 +1809,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.4.0, @eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.1":
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.5.1":
   version: 4.11.0
   resolution: "@eslint-community/regexpp@npm:4.11.0"
   checksum: 10/f053f371c281ba173fe6ee16dbc4fe544c84870d58035ccca08dba7f6ce1830d895ce3237a0db89ba37616524775dca82f1c502066b58e2d5712d7f87f5ba17c
   languageName: node
   linkType: hard
 
+"@eslint-community/regexpp@npm:^4.6.1":
+  version: 4.11.1
+  resolution: "@eslint-community/regexpp@npm:4.11.1"
+  checksum: 10/934b6d3588c7f16b18d41efec4fdb89616c440b7e3256b8cb92cfd31ae12908600f2b986d6c1e61a84cbc10256b1dd3448cd1eec79904bd67ac365d0f1aba2e2
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^2.1.4":
   version: 2.1.4
   resolution: "@eslint/eslintrc@npm:2.1.4"
@@ -1833,10 +1840,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.57.0":
-  version: 8.57.0
-  resolution: "@eslint/js@npm:8.57.0"
-  checksum: 10/3c501ce8a997cf6cbbaf4ed358af5492875e3550c19b9621413b82caa9ae5382c584b0efa79835639e6e0ddaa568caf3499318e5bdab68643ef4199dce5eb0a0
+"@eslint/js@npm:8.57.1":
+  version: 8.57.1
+  resolution: "@eslint/js@npm:8.57.1"
+  checksum: 10/7562b21be10c2adbfa4aa5bb2eccec2cb9ac649a3569560742202c8d1cb6c931ce634937a2f0f551e078403a1c1285d6c2c0aa345dafc986149665cd69fe8b59
   languageName: node
   linkType: hard
 
@@ -2291,14 +2298,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.14":
-  version: 0.11.14
-  resolution: "@humanwhocodes/config-array@npm:0.11.14"
+"@humanwhocodes/config-array@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "@humanwhocodes/config-array@npm:0.13.0"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.2"
+    "@humanwhocodes/object-schema": "npm:^2.0.3"
     debug: "npm:^4.3.1"
     minimatch: "npm:^3.0.5"
-  checksum: 10/3ffb24ecdfab64014a230e127118d50a1a04d11080cbb748bc21629393d100850496456bbcb4e8c438957fe0934430d731042f1264d6a167b62d32fc2863580a
+  checksum: 10/524df31e61a85392a2433bf5d03164e03da26c03d009f27852e7dcfdafbc4a23f17f021dacf88e0a7a9fe04ca032017945d19b57a16e2676d9114c22a53a9d11
   languageName: node
   linkType: hard
 
@@ -2309,7 +2316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.2":
+"@humanwhocodes/object-schema@npm:^2.0.3":
   version: 2.0.3
   resolution: "@humanwhocodes/object-schema@npm:2.0.3"
   checksum: 10/05bb99ed06c16408a45a833f03a732f59bf6184795d4efadd33238ff8699190a8c871ad1121241bb6501589a9598dc83bf25b99dcbcf41e155cdf36e35e937a3
@@ -2809,8 +2816,6 @@ __metadata:
     "@babel/runtime": "npm:7.17.2"
     "@expo/config-plugins": "npm:^7.2.5"
     "@mapbox/geo-viewport": "npm:>=0.4.0"
-    "@react-native/eslint-config": "npm:^0.73.2"
-    "@react-native/eslint-plugin": "npm:^0.74.0"
     "@react-native/metro-config": "npm:^0.72.7"
     "@sinonjs/fake-timers": "npm:^11.2.2"
     "@testing-library/react-native": "npm:^12.4.3"
@@ -2827,18 +2832,15 @@ __metadata:
     "@types/node": "npm:^18.11.18"
     "@types/react": "npm:^18.2.15"
     "@types/react-native": "npm:0.67.8"
-    "@typescript-eslint/eslint-plugin": "npm:^7.16.0"
-    "@typescript-eslint/parser": "npm:^7.16.0"
+    "@typescript-eslint/eslint-plugin": "npm:^7.18.0"
+    "@typescript-eslint/parser": "npm:^7.18.0"
     babel-jest: "npm:^29.6.0"
     debounce: "npm:^2.0.0"
     documentation: "npm:^14.0.0"
     ejs: "npm:^3.1.3"
     ejs-lint: "npm:^2.0.0"
-    eslint: "npm:^8.57.0"
-    eslint-config-prettier: "npm:^9.1.0"
+    eslint: "npm:^8.57.1"
     eslint-config-universe: "npm:13.0.0"
-    eslint-plugin-import: "npm:^2.29.1"
-    eslint-plugin-prettier: "npm:^5.1.3"
     expo-module-scripts: "npm:^3.1.0"
     husky: "npm:^9.0.10"
     jest: "npm:^29.7.0"
@@ -3676,44 +3678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/eslint-config@npm:^0.73.2":
-  version: 0.73.2
-  resolution: "@react-native/eslint-config@npm:0.73.2"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/eslint-parser": "npm:^7.20.0"
-    "@react-native/eslint-plugin": "npm:0.73.1"
-    "@typescript-eslint/eslint-plugin": "npm:^5.57.1"
-    "@typescript-eslint/parser": "npm:^5.57.1"
-    eslint-config-prettier: "npm:^8.5.0"
-    eslint-plugin-eslint-comments: "npm:^3.2.0"
-    eslint-plugin-ft-flow: "npm:^2.0.1"
-    eslint-plugin-jest: "npm:^26.5.3"
-    eslint-plugin-prettier: "npm:^4.2.1"
-    eslint-plugin-react: "npm:^7.30.1"
-    eslint-plugin-react-hooks: "npm:^4.6.0"
-    eslint-plugin-react-native: "npm:^4.0.0"
-  peerDependencies:
-    eslint: ">=8"
-    prettier: ">=2"
-  checksum: 10/01026d001a13df218f9958308a530a02cb57b483202e47ac348d89a2dc1030beb7c1fd6fb01ad10905f8c559fbc64f4c518086fcc18177bbe781c57e491e6f9e
-  languageName: node
-  linkType: hard
-
-"@react-native/eslint-plugin@npm:0.73.1":
-  version: 0.73.1
-  resolution: "@react-native/eslint-plugin@npm:0.73.1"
-  checksum: 10/59ee5a5a7e17f5d07053d05bdf464d77e3455dcaf7fc65a5784bb085057b098b5dfde9f736464c78b053148ef82feedb01036525680b9dd1049e44ced69b9b59
-  languageName: node
-  linkType: hard
-
-"@react-native/eslint-plugin@npm:^0.74.0":
-  version: 0.74.87
-  resolution: "@react-native/eslint-plugin@npm:0.74.87"
-  checksum: 10/19ea34ff10084af8841dea67c1a0ab9613bc385a377747e6823ae1239aa20ae1c50a2a9e9437e518da707f4bdc5b2037663b2f91f3e485a2174a0441865e752d
-  languageName: node
-  linkType: hard
-
 "@react-native/gradle-plugin@npm:0.74.88":
   version: 0.74.88
   resolution: "@react-native/gradle-plugin@npm:0.74.88"
@@ -4535,7 +4499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.12, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:^7.0.12":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
@@ -4693,7 +4657,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
+"@types/semver@npm:^7.5.0":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
   checksum: 10/3496808818ddb36deabfe4974fd343a78101fa242c4690044ccdc3b95dcf8785b494f5d628f2f47f38a702f8db9c53c67f47d7818f2be1b79f2efb09692e1178
@@ -4771,30 +4735,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.57.1":
-  version: 5.62.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.62.0"
-  dependencies:
-    "@eslint-community/regexpp": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/type-utils": "npm:5.62.0"
-    "@typescript-eslint/utils": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-    graphemer: "npm:^1.4.0"
-    ignore: "npm:^5.2.0"
-    natural-compare-lite: "npm:^1.4.0"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
-  peerDependencies:
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/9cc8319c6fd8a21938f5b69476974a7e778c283a55ef9fad183c850995b9adcb0087d57cea7b2ac6b9449570eee983aad39491d14cdd2e52d6b4b0485e7b2482
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:^6.0.0":
   version: 6.21.0
   resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0"
@@ -4820,7 +4760,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^7.10.0, @typescript-eslint/eslint-plugin@npm:^7.16.0":
+"@typescript-eslint/eslint-plugin@npm:^7.10.0, @typescript-eslint/eslint-plugin@npm:^7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0"
   dependencies:
@@ -4843,23 +4783,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.57.1":
-  version: 5.62.0
-  resolution: "@typescript-eslint/parser@npm:5.62.0"
-  dependencies:
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/b6ca629d8f4e6283ff124501731cc886703eb4ce2c7d38b3e4110322ea21452b9d9392faf25be6bd72f54b89de7ffc72a40d9b159083ac54345a3d04b4fa5394
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/parser@npm:^6.0.0":
   version: 6.21.0
   resolution: "@typescript-eslint/parser@npm:6.21.0"
@@ -4878,7 +4801,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^7.10.0, @typescript-eslint/parser@npm:^7.16.0":
+"@typescript-eslint/parser@npm:^7.10.0, @typescript-eslint/parser@npm:^7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/parser@npm:7.18.0"
   dependencies:
@@ -4896,16 +4819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.62.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/visitor-keys": "npm:5.62.0"
-  checksum: 10/e827770baa202223bc0387e2fd24f630690809e460435b7dc9af336c77322290a770d62bd5284260fa881c86074d6a9fd6c97b07382520b115f6786b8ed499da
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/scope-manager@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/scope-manager@npm:6.21.0"
@@ -4926,23 +4839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/type-utils@npm:5.62.0"
-  dependencies:
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    "@typescript-eslint/utils": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-    tsutils: "npm:^3.21.0"
-  peerDependencies:
-    eslint: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/f9a4398d6d2aae09e3e765eff04cf4ab364376a87868031ac5c6a64c9bbb555cb1a7f99b07b3d1017e7422725b5f0bbee537f13b82ab2d930f161c987b3dece0
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/type-utils@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/type-utils@npm:6.21.0"
@@ -4977,13 +4873,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/types@npm:5.62.0"
-  checksum: 10/24e8443177be84823242d6729d56af2c4b47bfc664dd411a1d730506abf2150d6c31bdefbbc6d97c8f91043e3a50e0c698239dcb145b79bb6b0c34469aaf6c45
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/types@npm:6.21.0"
@@ -4998,24 +4887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/visitor-keys": "npm:5.62.0"
-    debug: "npm:^4.3.4"
-    globby: "npm:^11.1.0"
-    is-glob: "npm:^4.0.3"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/06c975eb5f44b43bd19fadc2e1023c50cf87038fe4c0dd989d4331c67b3ff509b17fa60a3251896668ab4d7322bdc56162a9926971218d2e1a1874d2bef9a52e
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/typescript-estree@npm:6.21.0"
@@ -5054,24 +4925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.10.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/utils@npm:5.62.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@types/json-schema": "npm:^7.0.9"
-    "@types/semver": "npm:^7.3.12"
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    eslint-scope: "npm:^5.1.1"
-    semver: "npm:^7.3.7"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10/15ef13e43998a082b15f85db979f8d3ceb1f9ce4467b8016c267b1738d5e7cdb12aa90faf4b4e6dd6486c236cf9d33c463200465cf25ff997dbc0f12358550a1
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/utils@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/utils@npm:6.21.0"
@@ -5103,16 +4956,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    eslint-visitor-keys: "npm:^3.3.0"
-  checksum: 10/dc613ab7569df9bbe0b2ca677635eb91839dfb2ca2c6fa47870a5da4f160db0b436f7ec0764362e756d4164e9445d49d5eb1ff0b87f4c058946ae9d8c92eb388
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/visitor-keys@npm:6.21.0"
@@ -7990,7 +7833,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:^8.5.0, eslint-config-prettier@npm:^8.8.0":
+"eslint-config-prettier@npm:^8.8.0":
   version: 8.10.0
   resolution: "eslint-config-prettier@npm:8.10.0"
   peerDependencies:
@@ -8067,6 +7910,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-module-utils@npm:^2.12.0":
+  version: 2.12.0
+  resolution: "eslint-module-utils@npm:2.12.0"
+  dependencies:
+    debug: "npm:^3.2.7"
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 10/dd27791147eca17366afcb83f47d6825b6ce164abb256681e5de4ec1d7e87d8605641eb869298a0dbc70665e2446dbcc2f40d3e1631a9475dd64dd23d4ca5dee
+  languageName: node
+  linkType: hard
+
 "eslint-module-utils@npm:^2.9.0":
   version: 2.11.0
   resolution: "eslint-module-utils@npm:2.11.0"
@@ -8091,32 +7946,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-eslint-comments@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "eslint-plugin-eslint-comments@npm:3.2.0"
-  dependencies:
-    escape-string-regexp: "npm:^1.0.5"
-    ignore: "npm:^5.0.5"
-  peerDependencies:
-    eslint: ">=4.19.1"
-  checksum: 10/4aa0d31a78ac7746002e37ca0cb436f3e5b481a97d28be07bad831e161a2ffcc4dedff44820edef9a1e80f6a0ab1ef44ed9a46e3a4c4a050350438451908972b
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-ft-flow@npm:^2.0.1":
-  version: 2.0.3
-  resolution: "eslint-plugin-ft-flow@npm:2.0.3"
-  dependencies:
-    lodash: "npm:^4.17.21"
-    string-natural-compare: "npm:^3.0.1"
-  peerDependencies:
-    "@babel/eslint-parser": ^7.12.0
-    eslint: ^8.1.0
-  checksum: 10/ea03496d247b9de915f0c5cee3724d4cbec8c0ab22029e4c06301c524bd8a7cbc20598971bed792304c5b3a17c1a1004a1bf7c7f59b55d3887aa7581e00ad0e1
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-import@npm:^2.27.5, eslint-plugin-import@npm:^2.29.1":
+"eslint-plugin-import@npm:^2.27.5":
   version: 2.30.0
   resolution: "eslint-plugin-import@npm:2.30.0"
   dependencies:
@@ -8144,20 +7974,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-jest@npm:^26.5.3":
-  version: 26.9.0
-  resolution: "eslint-plugin-jest@npm:26.9.0"
+"eslint-plugin-import@npm:^2.29.1":
+  version: 2.31.0
+  resolution: "eslint-plugin-import@npm:2.31.0"
   dependencies:
-    "@typescript-eslint/utils": "npm:^5.10.0"
+    "@rtsao/scc": "npm:^1.1.0"
+    array-includes: "npm:^3.1.8"
+    array.prototype.findlastindex: "npm:^1.2.5"
+    array.prototype.flat: "npm:^1.3.2"
+    array.prototype.flatmap: "npm:^1.3.2"
+    debug: "npm:^3.2.7"
+    doctrine: "npm:^2.1.0"
+    eslint-import-resolver-node: "npm:^0.3.9"
+    eslint-module-utils: "npm:^2.12.0"
+    hasown: "npm:^2.0.2"
+    is-core-module: "npm:^2.15.1"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^3.1.2"
+    object.fromentries: "npm:^2.0.8"
+    object.groupby: "npm:^1.0.3"
+    object.values: "npm:^1.2.0"
+    semver: "npm:^6.3.1"
+    string.prototype.trimend: "npm:^1.0.8"
+    tsconfig-paths: "npm:^3.15.0"
   peerDependencies:
-    "@typescript-eslint/eslint-plugin": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    "@typescript-eslint/eslint-plugin":
-      optional: true
-    jest:
-      optional: true
-  checksum: 10/6ef994dc4c336e04d6ae3dbc83e526b4b889286c996ebb9bc3c71bb3d40957693fcda94198ae0dc516afc3799a97b5769f2f10ab1b4b9e0b7e735262ea22a5ff
+    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+  checksum: 10/6b76bd009ac2db0615d9019699d18e2a51a86cb8c1d0855a35fb1b418be23b40239e6debdc6e8c92c59f1468ed0ea8d7b85c817117a113d5cc225be8a02ad31c
   languageName: node
   linkType: hard
 
@@ -8177,21 +8019,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "eslint-plugin-prettier@npm:4.2.1"
-  dependencies:
-    prettier-linter-helpers: "npm:^1.0.0"
-  peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
-  peerDependenciesMeta:
-    eslint-config-prettier:
-      optional: true
-  checksum: 10/d387f85dd1bfcb6bc6b794845fee6afb9ebb2375653de6bcde6e615892fb97f85121a7c012a4651b181fc09953bdf54c9bc70cab7ad297019d89ae87dd007e28
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-prettier@npm:^5.0.0, eslint-plugin-prettier@npm:^5.1.3":
   version: 5.2.1
   resolution: "eslint-plugin-prettier@npm:5.2.1"
@@ -8221,27 +8048,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-native-globals@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "eslint-plugin-react-native-globals@npm:0.1.2"
-  checksum: 10/ab91e8ecbb51718fb0763f29226b1c2d402251ab2c4730a8bf85f38b805e32d4243da46d07ccdb12cb9dcce9e7514364a1706142cf970f58dcc9a820bcf4b732
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-react-native@npm:^4.0.0":
-  version: 4.1.0
-  resolution: "eslint-plugin-react-native@npm:4.1.0"
+"eslint-plugin-react@npm:^7.32.2":
+  version: 7.36.1
+  resolution: "eslint-plugin-react@npm:7.36.1"
   dependencies:
-    eslint-plugin-react-native-globals: "npm:^0.1.1"
+    array-includes: "npm:^3.1.8"
+    array.prototype.findlast: "npm:^1.2.5"
+    array.prototype.flatmap: "npm:^1.3.2"
+    array.prototype.tosorted: "npm:^1.1.4"
+    doctrine: "npm:^2.1.0"
+    es-iterator-helpers: "npm:^1.0.19"
+    estraverse: "npm:^5.3.0"
+    hasown: "npm:^2.0.2"
+    jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
+    minimatch: "npm:^3.1.2"
+    object.entries: "npm:^1.1.8"
+    object.fromentries: "npm:^2.0.8"
+    object.values: "npm:^1.2.0"
+    prop-types: "npm:^15.8.1"
+    resolve: "npm:^2.0.0-next.5"
+    semver: "npm:^6.3.1"
+    string.prototype.matchall: "npm:^4.0.11"
+    string.prototype.repeat: "npm:^1.0.0"
   peerDependencies:
-    eslint: ^3.17.0 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 10/fb2d65a3faca9bf775a0fa430eb7e86b7c27d0b256916d4f79a94def9ad353c8a10605f1f0dc9a5fb10e446b003341d53af9d8cbca4dd7ba394350355efa30c6
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  checksum: 10/bca154b446c35af4859a92fd043dcfe5c74851eb27652234020548570bb81d37cc9f1eb1795b3c9e7514de6c9b48f42fcc00153062eca879dab45ab84e49d0b1
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.30.1, eslint-plugin-react@npm:^7.32.2, eslint-plugin-react@npm:^7.34.1":
-  version: 7.36.1
-  resolution: "eslint-plugin-react@npm:7.36.1"
+"eslint-plugin-react@npm:^7.34.1":
+  version: 7.37.1
+  resolution: "eslint-plugin-react@npm:7.37.1"
   dependencies:
     array-includes: "npm:^3.1.8"
     array.prototype.findlast: "npm:^1.2.5"
@@ -8263,11 +8100,11 @@ __metadata:
     string.prototype.repeat: "npm:^1.0.0"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-  checksum: 10/bca154b446c35af4859a92fd043dcfe5c74851eb27652234020548570bb81d37cc9f1eb1795b3c9e7514de6c9b48f42fcc00153062eca879dab45ab84e49d0b1
+  checksum: 10/a7b9cf2c43255844ad0c9d4e3758a8c2b687a2ce9a09f4161ab245581d5d2d91b37742e541c88aa9ce368ec6c860e23dc78c15117f3fc1cdc433847038e8346b
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
+"eslint-scope@npm:5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
   dependencies:
@@ -8317,15 +8154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.57.0":
-  version: 8.57.0
-  resolution: "eslint@npm:8.57.0"
+"eslint@npm:^8.57.1":
+  version: 8.57.1
+  resolution: "eslint@npm:8.57.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
     "@eslint-community/regexpp": "npm:^4.6.1"
     "@eslint/eslintrc": "npm:^2.1.4"
-    "@eslint/js": "npm:8.57.0"
-    "@humanwhocodes/config-array": "npm:^0.11.14"
+    "@eslint/js": "npm:8.57.1"
+    "@humanwhocodes/config-array": "npm:^0.13.0"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@nodelib/fs.walk": "npm:^1.2.8"
     "@ungap/structured-clone": "npm:^1.2.0"
@@ -8361,7 +8198,7 @@ __metadata:
     text-table: "npm:^0.2.0"
   bin:
     eslint: bin/eslint.js
-  checksum: 10/00496e218b23747a7a9817bf58b522276d0dc1f2e546dceb4eea49f9871574088f72f1f069a6b560ef537efa3a75261b8ef70e51ef19033da1cc4c86a755ef15
+  checksum: 10/5504fa24879afdd9f9929b2fbfc2ee9b9441a3d464efd9790fbda5f05738858530182029f13323add68d19fec749d3ab4a70320ded091ca4432b1e9cc4ed104c
   languageName: node
   linkType: hard
 
@@ -10037,7 +9874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+"ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
@@ -13705,13 +13542,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"natural-compare-lite@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "natural-compare-lite@npm:1.4.0"
-  checksum: 10/5222ac3986a2b78dd6069ac62cbb52a7bf8ffc90d972ab76dfe7b01892485d229530ed20d0c62e79a6b363a663b273db3bde195a1358ce9e5f779d4453887225
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -15992,7 +15822,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.3, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
+"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.3, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -16592,13 +16422,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-natural-compare@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "string-natural-compare@npm:3.0.1"
-  checksum: 10/bc1fd0ee196466489e121bbe11844094ddcdee5a687dca9dbb18ba2ace73b1f6c96c9b448df2dfed0879b781b6b12e329ca1c1fc0a86d70b00c7823b76109b1e
-  languageName: node
-  linkType: hard
-
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -17304,13 +17127,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1":
-  version: 1.14.1
-  resolution: "tslib@npm:1.14.1"
-  checksum: 10/7dbf34e6f55c6492637adb81b555af5e3b4f9cc6b998fb440dac82d3b42bdc91560a35a5fb75e20e24a076c651438234da6743d139e4feabf0783f3cdfe1dddb
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.5.3, tslib@npm:^2.6.2":
   version: 2.7.0
   resolution: "tslib@npm:2.7.0"
@@ -17318,17 +17134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsutils@npm:^3.21.0":
-  version: 3.21.0
-  resolution: "tsutils@npm:3.21.0"
-  dependencies:
-    tslib: "npm:^1.8.1"
-  peerDependencies:
-    typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-  checksum: 10/ea036bec1dd024e309939ffd49fda7a351c0e87a1b8eb049570dd119d447250e2c56e0e6c00554e8205760e7417793fdebff752a46e573fbe07d4f375502a5b2
-  languageName: node
-  linkType: hard
-
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"

From 32ee78263b11e9342b9f8ba96986bee564271519 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 16:27:00 +0200
Subject: [PATCH 03/13] style: apply formatting via lint:fix

---
 __tests__/__mocks__/react-native.mock.js      |  12 +-
 __tests__/components/BackgroundLayer.test.js  |  44 +-
 __tests__/components/Callout.test.js          |  78 ++--
 __tests__/components/Camera.test.js           | 220 +++++-----
 __tests__/components/CircleLayer.test.js      |  46 +-
 __tests__/components/HeatmapLayer.test.js     |  42 +-
 __tests__/components/Light.test.js            |  32 +-
 __tests__/components/MapView.test.js          |  14 +-
 __tests__/components/Style.test.js            | 170 ++++----
 __tests__/components/SymbolLayer.test.js      |  40 +-
 __tests__/components/UserLocation.test.js     |  96 ++---
 __tests__/interface.test.js                   | 140 +++---
 .../modules/location/locationManager.test.js  |  82 ++--
 .../offline/OfflineCreatePackOptions.test.js  |  22 +-
 __tests__/modules/offline/OfflinePack.test.js |  22 +-
 .../modules/offline/offlineManager.test.js    |  74 ++--
 .../modules/snapshot/SnapshotOptions.test.js  |  22 +-
 .../modules/snapshot/snapshotManager.test.js  |  10 +-
 __tests__/utils/BridgeValue.test.js           | 136 +++---
 .../animated/AnimatedCoordinatesArray.test.js |  48 +--
 __tests__/utils/filterUtils.test.js           |  58 +--
 app.plugin.js                                 |   2 +-
 babel.config.js                               |   6 +-
 .../src/examples/Animations/AnimatedLine.js   |  72 ++--
 .../src/examples/Animations/DriveTheLine.js   |  63 +--
 .../src/examples/Annotations/Heatmap.js       |  31 +-
 .../src/examples/Annotations/MarkerView.js    |  42 +-
 .../Annotations/PointAnnotationAnchors.js     |  56 +--
 .../Annotations/ShowPointAnnotation.js        |  67 +--
 .../examples/src/examples/BugReportPage.js    |  52 +--
 .../examples/src/examples/CacheManagement.js  |  65 +--
 .../src/examples/Camera/CompassView.js        |  11 +-
 packages/examples/src/examples/Camera/Fit.js  | 146 ++++---
 .../examples/src/examples/Camera/FlyTo.js     |  29 +-
 .../examples/src/examples/Camera/GetCenter.js |  27 +-
 .../examples/src/examples/Camera/GetZoom.js   |  19 +-
 .../src/examples/Camera/RestrictMapBounds.js  |  21 +-
 .../src/examples/Camera/SetHeading.js         |  26 +-
 .../examples/src/examples/Camera/SetPitch.js  |  19 +-
 .../examples/Camera/SetUserTrackingModes.js   |  60 +--
 .../src/examples/Camera/TakeSnapshot.js       |  16 +-
 .../examples/Camera/TakeSnapshotWithMap.js    |  33 +-
 packages/examples/src/examples/Camera/YoYo.js |  17 +-
 .../ChoroplethLayerByZoomLevel.js             |  67 ++-
 .../FillRasterLayer/CustomVectorSource.js     |  37 +-
 .../examples/FillRasterLayer/GeoJSONSource.js |  19 +-
 .../examples/FillRasterLayer/ImageOverlay.js  |  41 +-
 .../FillRasterLayer/IndoorBuilding.js         |  40 +-
 .../examples/FillRasterLayer/QueryAtPoint.js  |  34 +-
 .../examples/FillRasterLayer/QueryWithRect.js |  40 +-
 .../FillRasterLayer/WatercolorRasterTiles.js  |  30 +-
 .../src/examples/LineLayer/GradientLine.js    |  41 +-
 .../src/examples/Map/ChangeLayerColor.js      |  25 +-
 .../src/examples/Map/PointInMapView.js        |  23 +-
 .../src/examples/Map/ShowAndHideLayer.js      |  23 +-
 .../examples/src/examples/Map/ShowClick.js    |  20 +-
 .../src/examples/Map/ShowRegionDidChange.js   |  56 +--
 .../src/examples/Map/SourceLayerVisibility.js |  21 +-
 .../examples/src/examples/Map/StyleJson.js    |  19 +-
 .../examples/src/examples/Map/TwoByTwo.js     |  23 +-
 .../examples/SymbolCircleLayer/CustomIcon.js  |  30 +-
 .../DataDrivenCircleColors.js                 |  42 +-
 .../examples/SymbolCircleLayer/EarthQuakes.js | 118 ++---
 .../SymbolCircleLayer/ShapeSourceIcon.js      |  67 +--
 .../examples/UserLocation/SetDisplacement.js  |  23 +-
 .../src/examples/UserLocation/SetTintColor.js |  24 +-
 .../UserLocation/SetUserLocationRenderMode.js |  67 +--
 .../SetUserLocationVerticalAlignment.js       |  18 +-
 .../UserLocation/UserLocationChange.js        |  16 +-
 .../examples/src/examples/common/Bubble.js    |  14 +-
 .../examples/src/examples/common/MapHeader.js |  16 +-
 .../src/examples/common/PulseCircleLayer.js   |  27 +-
 .../src/examples/common/TabBarPage.js         |  21 +-
 packages/examples/src/examples/index.js       | 102 ++---
 packages/examples/src/index.js                |   8 +-
 packages/examples/src/scenes/Examples.js      | 229 ++++++----
 packages/examples/src/styles/colors.js        |  68 +--
 packages/examples/src/styles/sheet.js         |   2 +-
 packages/examples/src/utils/RouteSimulator.js |  10 +-
 packages/examples/src/utils/index.js          |   4 +-
 packages/expo-app/App.js                      |  26 +-
 packages/expo-app/babel.config.js             |   8 +-
 packages/expo-app/metro.config.js             |  23 +-
 packages/react-native-app/babel.config.js     |  22 +-
 packages/react-native-app/e2e/jest.config.js  |  12 +-
 packages/react-native-app/index.js            |   6 +-
 packages/react-native-app/metro.config.js     |  35 +-
 .../react-native-app/scripts/fix_nvm_issue.js |  12 +-
 packages/react-native-app/src/App.js          |  26 +-
 plugin/jest.config.js                         |   2 +-
 plugin/src/__tests__/tsconfig.eslint.json     |   7 +-
 react-native.config.js                        |   2 +-
 scripts/autogenHelpers/DocJSONBuilder.js      | 139 +++---
 scripts/autogenHelpers/JSDocNodeTree.js       |  63 +--
 scripts/autogenHelpers/MarkdownBuilder.js     |  32 +-
 scripts/autogenHelpers/globals.js             | 405 +++++++++---------
 scripts/autogenerate.js                       | 276 ++++++------
 setup-jest.js                                 | 116 ++---
 98 files changed, 2567 insertions(+), 2398 deletions(-)

diff --git a/__tests__/__mocks__/react-native.mock.js b/__tests__/__mocks__/react-native.mock.js
index bf83e302b..cdb8edaad 100644
--- a/__tests__/__mocks__/react-native.mock.js
+++ b/__tests__/__mocks__/react-native.mock.js
@@ -1,14 +1,16 @@
-jest.mock('react-native/Libraries/Image/resolveAssetSource', () => {
-  return () => ({uri: 'asset://test.png'});
+jest.mock("react-native/Libraries/Image/resolveAssetSource", () => {
+  return () => ({ uri: "asset://test.png" });
 });
 
-jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
+jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter", () => {
   function MockEventEmitter() {}
-  MockEventEmitter.prototype.addListener = jest.fn(() => ({remove: jest.fn()}));
+  MockEventEmitter.prototype.addListener = jest.fn(() => ({
+    remove: jest.fn(),
+  }));
   return {
     __esModule: true,
     default: MockEventEmitter,
   };
 });
 
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
diff --git a/__tests__/components/BackgroundLayer.test.js b/__tests__/components/BackgroundLayer.test.js
index febd9912c..2c5dfa3b1 100644
--- a/__tests__/components/BackgroundLayer.test.js
+++ b/__tests__/components/BackgroundLayer.test.js
@@ -1,37 +1,37 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import BackgroundLayer from '../../javascript/components/BackgroundLayer';
+import BackgroundLayer from "../../javascript/components/BackgroundLayer";
 
-describe('BackgroundLayer', () => {
-  test('renders correctly with default props', () => {
-    const {queryByTestId} = render(
+describe("BackgroundLayer", () => {
+  test("renders correctly with default props", () => {
+    const { queryByTestId } = render(
       <BackgroundLayer id="requiredBackgroundLayerID" />,
     );
 
-    const backgroundLayer = queryByTestId('rctmlnBackgroundLayer');
-    const {props} = backgroundLayer;
+    const backgroundLayer = queryByTestId("rctmlnBackgroundLayer");
+    const { props } = backgroundLayer;
 
-    expect(props.sourceID).toStrictEqual('DefaultSourceID');
+    expect(props.sourceID).toStrictEqual("DefaultSourceID");
   });
 
-  test('renders correctly with custom props', () => {
+  test("renders correctly with custom props", () => {
     const testProps = {
-      id: 'customId',
-      sourceID: 'customSourceId',
-      sourceLayerID: 'customSourceLayerId',
-      aboveLayerID: 'customAboveLayerId',
-      belowLayerID: 'customBelowLayerId',
+      id: "customId",
+      sourceID: "customSourceId",
+      sourceLayerID: "customSourceLayerId",
+      aboveLayerID: "customAboveLayerId",
+      belowLayerID: "customBelowLayerId",
       layerIndex: 0,
-      filter: ['==', 'arbitraryFilter', true],
+      filter: ["==", "arbitraryFilter", true],
       minZoomLevel: 3,
       maxZoomLevel: 8,
-      style: {visibility: 'none'},
+      style: { visibility: "none" },
     };
 
-    const {queryByTestId} = render(<BackgroundLayer {...testProps} />);
-    const backgroundLayer = queryByTestId('rctmlnBackgroundLayer');
-    const {props} = backgroundLayer;
+    const { queryByTestId } = render(<BackgroundLayer {...testProps} />);
+    const backgroundLayer = queryByTestId("rctmlnBackgroundLayer");
+    const { props } = backgroundLayer;
 
     expect(props.id).toStrictEqual(testProps.id);
     expect(props.sourceID).toStrictEqual(testProps.sourceID);
@@ -44,8 +44,8 @@ describe('BackgroundLayer', () => {
     expect(props.maxZoomLevel).toStrictEqual(testProps.maxZoomLevel);
     expect(props.reactStyle).toStrictEqual({
       visibility: {
-        styletype: 'constant',
-        stylevalue: {type: 'string', value: testProps.style.visibility},
+        styletype: "constant",
+        stylevalue: { type: "string", value: testProps.style.visibility },
       },
     });
   });
diff --git a/__tests__/components/Callout.test.js b/__tests__/components/Callout.test.js
index fa756eedb..ca1a55df7 100644
--- a/__tests__/components/Callout.test.js
+++ b/__tests__/components/Callout.test.js
@@ -1,41 +1,41 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
-import {View} from 'react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { View } from "react-native";
 
-import Callout from '../../javascript/components/Callout';
+import Callout from "../../javascript/components/Callout";
 
-describe('Callout', () => {
-  test('renders with custom title', () => {
-    const testTitle = 'test title';
-    const {getByText} = render(<Callout {...{title: testTitle}} />);
+describe("Callout", () => {
+  test("renders with custom title", () => {
+    const testTitle = "test title";
+    const { getByText } = render(<Callout {...{ title: testTitle }} />);
 
     expect(getByText(testTitle)).toBeDefined();
   });
 
-  describe('_renderDefaultCallout', () => {
-    test('renders default children', () => {
-      const {getByTestId} = render(<Callout />);
+  describe("_renderDefaultCallout", () => {
+    test("renders default children", () => {
+      const { getByTestId } = render(<Callout />);
 
-      expect(getByTestId('callout')).toBeDefined();
-      expect(getByTestId('title')).toBeDefined();
-      expect(getByTestId('container')).toBeDefined();
+      expect(getByTestId("callout")).toBeDefined();
+      expect(getByTestId("title")).toBeDefined();
+      expect(getByTestId("container")).toBeDefined();
     });
 
-    test('renders with custom styles', () => {
+    test("renders with custom styles", () => {
       const testProps = {
-        style: {height: 1},
-        containerStyle: {height: 2},
-        contentStyle: {height: 3},
-        tipStyle: {height: 4},
-        textStyle: {height: 5},
+        style: { height: 1 },
+        containerStyle: { height: 2 },
+        contentStyle: { height: 3 },
+        tipStyle: { height: 4 },
+        textStyle: { height: 5 },
       };
-      const {getByTestId} = render(<Callout {...testProps} />);
+      const { getByTestId } = render(<Callout {...testProps} />);
 
-      const callout = getByTestId('callout');
-      const container = getByTestId('container');
-      const wrapper = getByTestId('wrapper');
-      const tip = getByTestId('tip');
-      const title = getByTestId('title');
+      const callout = getByTestId("callout");
+      const container = getByTestId("container");
+      const wrapper = getByTestId("wrapper");
+      const tip = getByTestId("tip");
+      const title = getByTestId("title");
 
       const calloutWrapperTestStyle = callout.props.style[0].height;
       const animatedViewTestStyle = container.props.style.height;
@@ -53,30 +53,30 @@ describe('Callout', () => {
     });
   });
 
-  describe('_renderCustomCallout', () => {
-    test('renders custom children', () => {
-      const {getByTestId, queryByTestId} = render(
+  describe("_renderCustomCallout", () => {
+    test("renders custom children", () => {
+      const { getByTestId, queryByTestId } = render(
         <Callout>
-          <View testID="TestChild">{'Foo Bar'}</View>
+          <View testID="TestChild">Foo Bar</View>
         </Callout>,
       );
 
-      expect(queryByTestId('title')).toBeNull();
-      expect(getByTestId('TestChild')).toBeDefined();
+      expect(queryByTestId("title")).toBeNull();
+      expect(getByTestId("TestChild")).toBeDefined();
     });
 
-    test('renders with custom styles', () => {
+    test("renders with custom styles", () => {
       const testProps = {
-        style: {width: 1},
-        containerStyle: {width: 2},
+        style: { width: 1 },
+        containerStyle: { width: 2 },
       };
-      const {getByTestId} = render(
+      const { getByTestId } = render(
         <Callout {...testProps}>
-          <View>{'Foo Bar'}</View>
+          <View>Foo Bar</View>
         </Callout>,
       );
-      const callout = getByTestId('callout');
-      const view = getByTestId('container');
+      const callout = getByTestId("callout");
+      const view = getByTestId("container");
 
       const calloutWrapperTestStyle = callout.props.style[0].width;
       const animatedViewTestStyle = view.props.style.width;
diff --git a/__tests__/components/Camera.test.js b/__tests__/components/Camera.test.js
index 8b761bd1c..d785d0342 100644
--- a/__tests__/components/Camera.test.js
+++ b/__tests__/components/Camera.test.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import Camera from '../../javascript/components/Camera';
+import Camera from "../../javascript/components/Camera";
 
 const mockCameraNativeRef = React.createRef();
-jest.mock('../../javascript/hooks/useNativeRef', () => ({
+jest.mock("../../javascript/hooks/useNativeRef", () => ({
   useNativeRef: () => {
     return mockCameraNativeRef;
   },
@@ -13,11 +13,11 @@ jest.mock('../../javascript/hooks/useNativeRef', () => ({
 function renderCamera(props = {}) {
   const cameraRef = React.createRef();
 
-  const {rerender} = render(<Camera {...props} ref={cameraRef} />);
+  const { rerender } = render(<Camera {...props} ref={cameraRef} />);
 
   const setNativePropsSpy = jest.spyOn(
     mockCameraNativeRef.current,
-    'setNativeProps',
+    "setNativeProps",
   );
 
   function rerenderCamera(newProps) {
@@ -31,31 +31,31 @@ function renderCamera(props = {}) {
   };
 }
 
-describe('Camera', () => {
+describe("Camera", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  describe('render', () => {
-    test('renders correctly', () => {
-      const {getByTestId} = render(<Camera />);
+  describe("render", () => {
+    test("renders correctly", () => {
+      const { getByTestId } = render(<Camera />);
 
-      expect(getByTestId('Camera')).toBeDefined();
+      expect(getByTestId("Camera")).toBeDefined();
     });
 
-    test('has proper default props', () => {
-      const {getByTestId} = render(<Camera />);
+    test("has proper default props", () => {
+      const { getByTestId } = render(<Camera />);
 
-      expect(getByTestId('Camera').props).toStrictEqual({
+      expect(getByTestId("Camera").props).toStrictEqual({
         children: undefined,
-        testID: 'Camera',
+        testID: "Camera",
         followUserLocation: undefined,
         followUserMode: undefined,
         followPitch: undefined,
         followHeading: undefined,
         followZoomLevel: undefined,
         stop: {
-          mode: 'Ease',
+          mode: "Ease",
           pitch: undefined,
           heading: undefined,
           duration: 2000,
@@ -74,29 +74,29 @@ describe('Camera', () => {
     });
   });
 
-  describe('updates', () => {
+  describe("updates", () => {
     test('updates when "followUserLocation" changes', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera({
+      const { rerenderCamera, setNativePropsSpy } = renderCamera({
         followUserLocation: false,
       });
 
-      rerenderCamera({followUserLocation: true});
+      rerenderCamera({ followUserLocation: true });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
         followUserLocation: true,
       });
 
       jest.resetAllMocks();
-      rerenderCamera({followUserLocation: false, allowUpdates: false});
+      rerenderCamera({ followUserLocation: false, allowUpdates: false });
 
       expect(setNativePropsSpy).toHaveBeenCalledTimes(0);
     });
 
-    test('updates when maxBounds change', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera();
+    test("updates when maxBounds change", () => {
+      const { rerenderCamera, setNativePropsSpy } = renderCamera();
 
       rerenderCamera({
-        maxBounds: {ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177]},
+        maxBounds: { ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177] },
       });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
@@ -117,44 +117,44 @@ describe('Camera', () => {
       expect(setNativePropsSpy).toHaveBeenCalledTimes(0);
     });
 
-    test('updates when minZoomLevel changes', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera();
-      rerenderCamera({minZoomLevel: 5});
+    test("updates when minZoomLevel changes", () => {
+      const { rerenderCamera, setNativePropsSpy } = renderCamera();
+      rerenderCamera({ minZoomLevel: 5 });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
         minZoomLevel: 5,
       });
 
       jest.resetAllMocks();
-      rerenderCamera({minZoomLevel: 3, allowUpdates: false});
+      rerenderCamera({ minZoomLevel: 3, allowUpdates: false });
       expect(setNativePropsSpy).toHaveBeenCalledTimes(0);
     });
 
-    test('updates when maxZoomLevel changes', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera();
-      rerenderCamera({maxZoomLevel: 5});
+    test("updates when maxZoomLevel changes", () => {
+      const { rerenderCamera, setNativePropsSpy } = renderCamera();
+      rerenderCamera({ maxZoomLevel: 5 });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
         maxZoomLevel: 5,
       });
 
       jest.resetAllMocks();
-      rerenderCamera({maxZoomLevel: 2, allowUpdates: false});
+      rerenderCamera({ maxZoomLevel: 2, allowUpdates: false });
       expect(setNativePropsSpy).toHaveBeenCalledTimes(0);
     });
 
-    test('updates when follow user props change', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera({
+    test("updates when follow user props change", () => {
+      const { rerenderCamera, setNativePropsSpy } = renderCamera({
         followUserLocation: true,
       });
 
       rerenderCamera({
         followUserLocation: true,
-        followUserMode: 'normal',
+        followUserMode: "normal",
       });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
-        followUserMode: 'normal',
+        followUserMode: "normal",
         followHeading: undefined,
         followPitch: undefined,
         followZoomLevel: undefined,
@@ -162,7 +162,7 @@ describe('Camera', () => {
 
       rerenderCamera({
         followUserLocation: false,
-        followUserMode: 'compass',
+        followUserMode: "compass",
       });
 
       // it only sends `followUserLocation` when it changes
@@ -171,17 +171,17 @@ describe('Camera', () => {
       });
     });
 
-    test('updates when cameraConfig changes', () => {
-      const {rerenderCamera, setNativePropsSpy} = renderCamera();
+    test("updates when cameraConfig changes", () => {
+      const { rerenderCamera, setNativePropsSpy } = renderCamera();
 
       jest.resetAllMocks();
-      rerenderCamera({animationMode: 'linear'});
+      rerenderCamera({ animationMode: "linear" });
 
       expect(setNativePropsSpy).toHaveBeenCalledWith({
         stop: {
           duration: 2000,
           heading: undefined,
-          mode: 'Ease',
+          mode: "Ease",
           paddingBottom: 0,
           paddingLeft: 0,
           paddingRight: 0,
@@ -192,26 +192,26 @@ describe('Camera', () => {
       });
 
       jest.resetAllMocks();
-      rerenderCamera({allowUpdates: false, animationMode: 'flight'});
+      rerenderCamera({ allowUpdates: false, animationMode: "flight" });
       expect(setNativePropsSpy).toHaveBeenCalledTimes(0);
     });
   });
 
-  describe('methods', () => {
-    describe('#fitBounds', () => {
+  describe("methods", () => {
+    describe("#fitBounds", () => {
       const ne = [-63.12641, 39.797968];
       const sw = [-74.143727, 40.772177];
 
       test('works without provided "padding" and/ or "animationDuration"', () => {
         // FIXME: animationDuration and padding of null lead to malformed setCamera config
 
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
 
         cameraRef.current.fitBounds(ne, sw, null, null);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 0,
@@ -230,7 +230,7 @@ describe('Camera', () => {
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 0,
@@ -249,7 +249,7 @@ describe('Camera', () => {
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 0,
@@ -269,12 +269,12 @@ describe('Camera', () => {
       test.skip('throws when "ne" or "sw" are missing', () => {});
 
       test('works with "padding" being a single number', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.fitBounds(ne, sw, 3, 500);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 500,
@@ -290,12 +290,12 @@ describe('Camera', () => {
       });
 
       test('works with "padding" being an array of two numbers', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.fitBounds(ne, sw, [3, 5], 500);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 500,
@@ -311,12 +311,12 @@ describe('Camera', () => {
       });
 
       test('works with "padding" being an array of four numbers', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.fitBounds(ne, sw, [3, 5, 8, 10], 500);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 500,
@@ -332,19 +332,19 @@ describe('Camera', () => {
       });
     });
 
-    describe('#flyTo', () => {
-      test.skip('throws when no coordinates are provided', () => {
+    describe("#flyTo", () => {
+      test.skip("throws when no coordinates are provided", () => {
         // TODO: Refactor #flyTo to throw when coordinates aren't provided
         // This is a public method and people will call it with all sorts of data
       });
 
       test('sets default "animationDuration" when called without it', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.flyTo([-111.8678, 40.2866]);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Flight',
+            mode: "Flight",
             pitch: undefined,
             heading: undefined,
             duration: 2000,
@@ -360,12 +360,12 @@ describe('Camera', () => {
       });
 
       test('calls "setCamera" with correct config', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.flyTo([-111.8678, 40.2866], 5000);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Flight',
+            mode: "Flight",
             pitch: undefined,
             heading: undefined,
             duration: 5000,
@@ -381,18 +381,18 @@ describe('Camera', () => {
       });
     });
 
-    describe('#moveTo', () => {
-      test.skip('throws when no coordinates are provided', () => {
+    describe("#moveTo", () => {
+      test.skip("throws when no coordinates are provided", () => {
         // TODO: Refactor #moveTo to throw when coordinates aren't provided
         // This is a public method and people will call it with all sorts of data
       });
 
       test('sets default "animationDuration" when called without it', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.moveTo([-111.8678, 40.2866]);
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 0,
@@ -407,12 +407,12 @@ describe('Camera', () => {
         });
       });
 
-      test('calls native camera with correct config', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+      test("calls native camera with correct config", () => {
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.moveTo([-111.8678, 40.2866], 5000);
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 5000,
@@ -428,19 +428,19 @@ describe('Camera', () => {
       });
     });
 
-    describe('#zoomTo', () => {
-      test.skip('throws when no zoomLevel is provided', () => {
+    describe("#zoomTo", () => {
+      test.skip("throws when no zoomLevel is provided", () => {
         // TODO: Refactor #moveTo to throw when coordinates aren't provided
         // This is a public method and people will call it with all sorts of data
       });
 
       test('sets default "animationDuration" when called without it', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.zoomTo(10);
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Flight',
+            mode: "Flight",
             pitch: undefined,
             heading: undefined,
             duration: 2000,
@@ -454,11 +454,11 @@ describe('Camera', () => {
       });
 
       test('calls "_setCamera" with correct config', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.zoomTo(10, 3000);
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Flight',
+            mode: "Flight",
             pitch: undefined,
             heading: undefined,
             duration: 3000,
@@ -472,14 +472,14 @@ describe('Camera', () => {
       });
     });
 
-    describe('#setCamera', () => {
+    describe("#setCamera", () => {
       test('sets default config when called without "config', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         cameraRef.current.setCamera({});
 
         expect(setNativePropsSpy).toHaveBeenCalledWith({
           stop: {
-            mode: 'Ease',
+            mode: "Ease",
             pitch: undefined,
             heading: undefined,
             duration: 0,
@@ -493,10 +493,10 @@ describe('Camera', () => {
       });
 
       test('passes stopConfig to "setNativeProps"', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         const config = {
           animationDuration: 500,
-          animationMode: 'easeTo',
+          animationMode: "easeTo",
           bounds: {
             ne: [-63.12641, 39.797968],
             paddingBottom: 8,
@@ -522,20 +522,20 @@ describe('Camera', () => {
             paddingTop: 3,
             duration: 500,
             heading: 100,
-            mode: 'Ease',
+            mode: "Ease",
             pitch: 45,
             zoom: 11,
           },
         });
       });
 
-      test('creates multiple stops when provided', () => {
-        const {setNativePropsSpy, cameraRef} = renderCamera();
+      test("creates multiple stops when provided", () => {
+        const { setNativePropsSpy, cameraRef } = renderCamera();
         const config = {
           stops: [
             {
               animationDuration: 50,
-              animationMode: 'easeTo',
+              animationMode: "easeTo",
               bounds: {
                 ne: [-63.12641, 39.797968],
                 paddingBottom: 2,
@@ -550,7 +550,7 @@ describe('Camera', () => {
             },
             {
               animationDuration: 3000,
-              animationMode: 'flyTo',
+              animationMode: "flyTo",
               bounds: {
                 ne: [-63.12641, 59.797968],
                 paddingBottom: 8,
@@ -565,7 +565,7 @@ describe('Camera', () => {
             },
             {
               animationDuration: 500,
-              animationMode: 'easeTo',
+              animationMode: "easeTo",
               bounds: {
                 ne: [-63.12641, 39.797968],
                 paddingBottom: 8,
@@ -595,7 +595,7 @@ describe('Camera', () => {
                 paddingTop: 2,
                 duration: 50,
                 heading: 20,
-                mode: 'Ease',
+                mode: "Ease",
                 pitch: 25,
                 zoom: 16,
               },
@@ -608,7 +608,7 @@ describe('Camera', () => {
                 paddingTop: 3,
                 duration: 3000,
                 heading: 40,
-                mode: 'Flight',
+                mode: "Flight",
                 pitch: 45,
                 zoom: 8,
               },
@@ -621,7 +621,7 @@ describe('Camera', () => {
                 paddingTop: 3,
                 duration: 500,
                 heading: 100,
-                mode: 'Ease',
+                mode: "Ease",
                 pitch: 45,
                 zoom: 11,
               },
@@ -631,7 +631,7 @@ describe('Camera', () => {
       });
     });
 
-    describe('#_createDefaultCamera', () => {
+    describe("#_createDefaultCamera", () => {
       test('returns null without "defaultSettings"', () => {
         const ref = React.createRef();
         render(<Camera ref={ref} />);
@@ -652,7 +652,7 @@ describe('Camera', () => {
             '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
           duration: 0,
           heading: undefined,
-          mode: 'None',
+          mode: "None",
           pitch: undefined,
           zoom: 16,
           paddingBottom: 0,
@@ -666,7 +666,7 @@ describe('Camera', () => {
       });
     });
 
-    describe('#_createStopConfig', () => {
+    describe("#_createStopConfig", () => {
       const configWithoutBounds = {
         animationDuration: 2000,
         pitch: 45,
@@ -676,7 +676,7 @@ describe('Camera', () => {
 
       const configWithBounds = {
         animationDuration: 500,
-        animationMode: 'easeTo',
+        animationMode: "easeTo",
         bounds: {
           ne: [-63.12641, 39.797968],
           paddingBottom: 8,
@@ -691,19 +691,19 @@ describe('Camera', () => {
       };
 
       test('returns null with "followUserLocation" prop and "!ignoreFollowUserLocation"', () => {
-        const {cameraRef} = renderCamera({followUserLocation: true});
+        const { cameraRef } = renderCamera({ followUserLocation: true });
         expect(cameraRef.current._createStopConfig()).toBe(null);
       });
 
       test('returns correct "stopConfig" without bounds', () => {
-        const {cameraRef} = renderCamera();
+        const { cameraRef } = renderCamera();
 
         expect(
           cameraRef.current._createStopConfig(configWithoutBounds, true),
         ).toStrictEqual({
           duration: 2000,
           heading: 110,
-          mode: 'Ease',
+          mode: "Ease",
           pitch: 45,
           zoom: 9,
           paddingBottom: 0,
@@ -715,7 +715,7 @@ describe('Camera', () => {
         // with centerCoordinate
         expect(
           cameraRef.current._createStopConfig(
-            {...configWithoutBounds, centerCoordinate: [-111.8678, 40.2866]},
+            { ...configWithoutBounds, centerCoordinate: [-111.8678, 40.2866] },
             true,
           ),
         ).toStrictEqual({
@@ -723,7 +723,7 @@ describe('Camera', () => {
             '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
           duration: 2000,
           heading: 110,
-          mode: 'Ease',
+          mode: "Ease",
           pitch: 45,
           zoom: 9,
           paddingBottom: 0,
@@ -734,7 +734,7 @@ describe('Camera', () => {
       });
 
       test('returns correct "stopConfig" with bounds', () => {
-        const {cameraRef} = renderCamera();
+        const { cameraRef } = renderCamera();
 
         expect(
           cameraRef.current._createStopConfig(configWithBounds, true),
@@ -747,7 +747,7 @@ describe('Camera', () => {
           paddingTop: 3,
           duration: 500,
           heading: 100,
-          mode: 'Ease',
+          mode: "Ease",
           pitch: 45,
           zoom: 11,
         });
@@ -755,7 +755,7 @@ describe('Camera', () => {
         // with centerCoordinate
         expect(
           cameraRef.current._createStopConfig(
-            {...configWithBounds, centerCoordinate: [-111.8678, 40.2866]},
+            { ...configWithBounds, centerCoordinate: [-111.8678, 40.2866] },
             true,
           ),
         ).toStrictEqual({
@@ -769,45 +769,45 @@ describe('Camera', () => {
             '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
           duration: 500,
           heading: 100,
-          mode: 'Ease',
+          mode: "Ease",
           pitch: 45,
           zoom: 11,
         });
       });
     });
 
-    describe('#_getNativeCameraMode', () => {
+    describe("#_getNativeCameraMode", () => {
       const ref = React.createRef();
       render(<Camera ref={ref} />);
       const camera = ref.current;
 
       test('returns "Flight" for "flyTo"', () => {
         expect(
-          camera._getNativeCameraMode({animationMode: 'flyTo'}),
-        ).toStrictEqual('Flight');
+          camera._getNativeCameraMode({ animationMode: "flyTo" }),
+        ).toStrictEqual("Flight");
       });
 
       test('returns "None" for "moveTo"', () => {
         expect(
-          camera._getNativeCameraMode({animationMode: 'moveTo'}),
-        ).toStrictEqual('None');
+          camera._getNativeCameraMode({ animationMode: "moveTo" }),
+        ).toStrictEqual("None");
       });
 
       test('returns "Ease" as default', () => {
-        expect(camera._getNativeCameraMode({})).toStrictEqual('Ease');
+        expect(camera._getNativeCameraMode({})).toStrictEqual("Ease");
       });
     });
 
-    describe('#_getMaxBounds', () => {
+    describe("#_getMaxBounds", () => {
       test('returns null if no "maxBounds"', () => {
-        const {cameraRef, rerenderCamera} = renderCamera();
+        const { cameraRef, rerenderCamera } = renderCamera();
 
         expect(cameraRef.current._getMaxBounds()).toStrictEqual(null);
 
-        rerenderCamera({maxBounds: {ne: [-74.12641, 40.797968]}});
+        rerenderCamera({ maxBounds: { ne: [-74.12641, 40.797968] } });
         expect(cameraRef.current._getMaxBounds()).toStrictEqual(null);
 
-        renderCamera({maxBounds: {sw: [-74.143727, 40.772177]}});
+        renderCamera({ maxBounds: { sw: [-74.143727, 40.772177] } });
         expect(cameraRef.current._getMaxBounds()).toStrictEqual(null);
       });
 
@@ -817,7 +817,7 @@ describe('Camera', () => {
           sw: [-74.143727, 40.772177],
         };
 
-        const {cameraRef} = renderCamera({maxBounds});
+        const { cameraRef } = renderCamera({ maxBounds });
 
         expect(cameraRef.current._getMaxBounds()).toStrictEqual(
           '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.12641,40.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
diff --git a/__tests__/components/CircleLayer.test.js b/__tests__/components/CircleLayer.test.js
index e63cd9b34..86746e7b1 100644
--- a/__tests__/components/CircleLayer.test.js
+++ b/__tests__/components/CircleLayer.test.js
@@ -1,34 +1,36 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import CircleLayer from '../../javascript/components/CircleLayer';
+import CircleLayer from "../../javascript/components/CircleLayer";
 
-describe('CircleLayer', () => {
-  test('renders correctly with default props', () => {
-    const {queryByTestId} = render(<CircleLayer id="requiredCircleLayerID" />);
-    const circleLayer = queryByTestId('rctmlnCircleLayer');
-    const {props} = circleLayer;
+describe("CircleLayer", () => {
+  test("renders correctly with default props", () => {
+    const { queryByTestId } = render(
+      <CircleLayer id="requiredCircleLayerID" />,
+    );
+    const circleLayer = queryByTestId("rctmlnCircleLayer");
+    const { props } = circleLayer;
 
-    expect(props.sourceID).toStrictEqual('DefaultSourceID');
+    expect(props.sourceID).toStrictEqual("DefaultSourceID");
   });
 
-  test('renders correctly with custom props', () => {
+  test("renders correctly with custom props", () => {
     const customProps = {
-      id: 'customId',
-      sourceID: 'customSourceId',
-      sourceLayerID: 'customSourceLayerId',
-      aboveLayerID: 'customAboveLayerId',
-      belowLayerID: 'customBelowLayerId',
+      id: "customId",
+      sourceID: "customSourceId",
+      sourceLayerID: "customSourceLayerId",
+      aboveLayerID: "customAboveLayerId",
+      belowLayerID: "customBelowLayerId",
       layerIndex: 0,
-      filter: ['==', 'arbitraryFilter', true],
+      filter: ["==", "arbitraryFilter", true],
       minZoomLevel: 3,
       maxZoomLevel: 8,
-      style: {visibility: 'none'},
+      style: { visibility: "none" },
     };
 
-    const {queryByTestId} = render(<CircleLayer {...customProps} />);
-    const circleLayer = queryByTestId('rctmlnCircleLayer');
-    const {props} = circleLayer;
+    const { queryByTestId } = render(<CircleLayer {...customProps} />);
+    const circleLayer = queryByTestId("rctmlnCircleLayer");
+    const { props } = circleLayer;
 
     expect(props.id).toStrictEqual(customProps.id);
     expect(props.sourceID).toStrictEqual(customProps.sourceID);
@@ -41,8 +43,8 @@ describe('CircleLayer', () => {
     expect(props.maxZoomLevel).toStrictEqual(customProps.maxZoomLevel);
     expect(props.reactStyle).toStrictEqual({
       visibility: {
-        styletype: 'constant',
-        stylevalue: {type: 'string', value: customProps.style.visibility},
+        styletype: "constant",
+        stylevalue: { type: "string", value: customProps.style.visibility },
       },
     });
   });
diff --git a/__tests__/components/HeatmapLayer.test.js b/__tests__/components/HeatmapLayer.test.js
index 799594268..7b3388ec9 100644
--- a/__tests__/components/HeatmapLayer.test.js
+++ b/__tests__/components/HeatmapLayer.test.js
@@ -1,33 +1,33 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import HeatmapLayer from '../../javascript/components/HeatmapLayer';
+import HeatmapLayer from "../../javascript/components/HeatmapLayer";
 
-describe('HeatmapLayer', () => {
-  test('renders correctly with default props', () => {
-    const {UNSAFE_getByType} = render(
+describe("HeatmapLayer", () => {
+  test("renders correctly with default props", () => {
+    const { UNSAFE_getByType } = render(
       <HeatmapLayer id="requiredHeatmapLayerID" />,
     );
-    const heatmapLayer = UNSAFE_getByType('RCTMLNHeatmapLayer');
-    const {props} = heatmapLayer;
-    expect(props.sourceID).toStrictEqual('DefaultSourceID');
+    const heatmapLayer = UNSAFE_getByType("RCTMLNHeatmapLayer");
+    const { props } = heatmapLayer;
+    expect(props.sourceID).toStrictEqual("DefaultSourceID");
   });
 
-  test('renders correctly with custom props', () => {
+  test("renders correctly with custom props", () => {
     const testProps = {
-      id: 'customId',
-      sourceID: 'customSourceId',
-      sourceLayerID: 'customSourceLayerId',
-      aboveLayerID: 'customAboveLayerId',
-      belowLayerID: 'customBelowLayerId',
+      id: "customId",
+      sourceID: "customSourceId",
+      sourceLayerID: "customSourceLayerId",
+      aboveLayerID: "customAboveLayerId",
+      belowLayerID: "customBelowLayerId",
       layerIndex: 0,
-      filter: ['==', 'arbitraryFilter', true],
+      filter: ["==", "arbitraryFilter", true],
       minZoomLevel: 3,
       maxZoomLevel: 8,
-      style: {visibility: 'none'},
+      style: { visibility: "none" },
     };
-    const {UNSAFE_getByType} = render(<HeatmapLayer {...testProps} />);
-    const {props} = UNSAFE_getByType('RCTMLNHeatmapLayer');
+    const { UNSAFE_getByType } = render(<HeatmapLayer {...testProps} />);
+    const { props } = UNSAFE_getByType("RCTMLNHeatmapLayer");
 
     expect(props.id).toStrictEqual(testProps.id);
     expect(props.sourceID).toStrictEqual(testProps.sourceID);
@@ -40,8 +40,8 @@ describe('HeatmapLayer', () => {
     expect(props.maxZoomLevel).toStrictEqual(testProps.maxZoomLevel);
     expect(props.reactStyle).toStrictEqual({
       visibility: {
-        styletype: 'constant',
-        stylevalue: {type: 'string', value: testProps.style.visibility},
+        styletype: "constant",
+        stylevalue: { type: "string", value: testProps.style.visibility },
       },
     });
   });
diff --git a/__tests__/components/Light.test.js b/__tests__/components/Light.test.js
index e75a3ce02..6e567a66b 100644
--- a/__tests__/components/Light.test.js
+++ b/__tests__/components/Light.test.js
@@ -1,31 +1,31 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import Light from '../../javascript/components/Light';
+import Light from "../../javascript/components/Light";
 
-describe('Light', () => {
-  test('renders correctly', () => {
-    const {queryByTestId} = render(<Light />);
-    const light = queryByTestId('rctmlnLight');
+describe("Light", () => {
+  test("renders correctly", () => {
+    const { queryByTestId } = render(<Light />);
+    const light = queryByTestId("rctmlnLight");
     expect(light).toBeDefined();
   });
 
-  test('renders correctly with custom styles', () => {
+  test("renders correctly with custom styles", () => {
     const testStyles = {
       position: [1234, 1234, 1234],
-      color: '#FA0000', // === ProcessedTestColor
-      anchor: 'map',
+      color: "#FA0000", // === ProcessedTestColor
+      anchor: "map",
       intensity: 1,
     };
     const processedTestColor = 4294574080;
 
-    const {queryByTestId} = render(<Light style={testStyles} />);
+    const { queryByTestId } = render(<Light style={testStyles} />);
 
-    const customStyles = queryByTestId('rctmlnLight').props.reactStyle;
-    const {anchor} = customStyles;
-    const {color} = customStyles;
-    const {position} = customStyles;
-    const {intensity} = customStyles;
+    const customStyles = queryByTestId("rctmlnLight").props.reactStyle;
+    const { anchor } = customStyles;
+    const { color } = customStyles;
+    const { position } = customStyles;
+    const { intensity } = customStyles;
 
     expect(anchor.stylevalue.value).toStrictEqual(testStyles.anchor);
     expect(color.stylevalue.value).toStrictEqual(processedTestColor);
diff --git a/__tests__/components/MapView.test.js b/__tests__/components/MapView.test.js
index 7e678ed91..0877e49e8 100644
--- a/__tests__/components/MapView.test.js
+++ b/__tests__/components/MapView.test.js
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import * as React from "react";
 
-import MapView from '../../javascript/components/MapView';
+import MapView from "../../javascript/components/MapView";
 
-describe('MapView', () => {
-  test('renders with testID', () => {
-    const expectedTestId = 'im used for identification in tests';
+describe("MapView", () => {
+  test("renders with testID", () => {
+    const expectedTestId = "im used for identification in tests";
 
-    const {getByTestId} = render(<MapView testID={expectedTestId} />);
+    const { getByTestId } = render(<MapView testID={expectedTestId} />);
 
     expect(() => {
       getByTestId(expectedTestId);
diff --git a/__tests__/components/Style.test.js b/__tests__/components/Style.test.js
index 31c771f64..fd204912d 100644
--- a/__tests__/components/Style.test.js
+++ b/__tests__/components/Style.test.js
@@ -1,30 +1,30 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
-import VectorSource from '../../javascript/components/VectorSource';
-import RasterSource from '../../javascript/components/RasterSource';
-import ImageSource from '../../javascript/components/ImageSource';
-import ShapeSource from '../../javascript/components/ShapeSource';
-import Style from '../../javascript/components/Style';
-import HeatmapLayer from '../../javascript/components/HeatmapLayer';
-import CircleLayer from '../../javascript/components/CircleLayer';
-import SymbolLayer from '../../javascript/components/SymbolLayer';
-import RasterLayer from '../../javascript/components/RasterLayer';
-import LineLayer from '../../javascript/components/LineLayer';
-import FillLayer from '../../javascript/components/FillLayer';
-import FillExtrusionLayer from '../../javascript/components/FillExtrusionLayer';
-import BackgroundLayer from '../../javascript/components/BackgroundLayer';
+import BackgroundLayer from "../../javascript/components/BackgroundLayer";
+import CircleLayer from "../../javascript/components/CircleLayer";
+import FillExtrusionLayer from "../../javascript/components/FillExtrusionLayer";
+import FillLayer from "../../javascript/components/FillLayer";
+import HeatmapLayer from "../../javascript/components/HeatmapLayer";
+import ImageSource from "../../javascript/components/ImageSource";
+import LineLayer from "../../javascript/components/LineLayer";
+import RasterLayer from "../../javascript/components/RasterLayer";
+import RasterSource from "../../javascript/components/RasterSource";
+import ShapeSource from "../../javascript/components/ShapeSource";
+import Style from "../../javascript/components/Style";
+import SymbolLayer from "../../javascript/components/SymbolLayer";
+import VectorSource from "../../javascript/components/VectorSource";
 
-describe('Style', () => {
-  test('renders vectory source correctly', () => {
+describe("Style", () => {
+  test("renders vectory source correctly", () => {
     const vectorSource = {
-      type: 'vector',
-      url: 'mapbox://mapbox.660ui7x6',
-      tiles: ['http://host1', 'http://host2'],
+      type: "vector",
+      url: "mapbox://mapbox.660ui7x6",
+      tiles: ["http://host1", "http://host2"],
       minzoom: 1,
       maxzoom: 22,
-      attribution: 'Copyright',
-      scheme: 'tms',
+      attribution: "Copyright",
+      scheme: "tms",
     };
 
     const json = {
@@ -34,9 +34,9 @@ describe('Style', () => {
       },
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const component = UNSAFE_getByType(VectorSource);
-    const {props} = component;
+    const { props } = component;
 
     expect(props.id).toStrictEqual(Object.keys(json.sources)[0]);
     expect(props.url).toStrictEqual(vectorSource.url);
@@ -47,15 +47,15 @@ describe('Style', () => {
     expect(props.tms).toBe(true);
   });
 
-  test('renders raster source correctly', () => {
+  test("renders raster source correctly", () => {
     const rasterSource = {
-      type: 'raster',
-      url: 'mapbox://mapbox.660ui7x6',
-      tiles: ['http://host1', 'http://host2'],
+      type: "raster",
+      url: "mapbox://mapbox.660ui7x6",
+      tiles: ["http://host1", "http://host2"],
       minzoom: 1,
       maxzoom: 22,
-      attribution: 'Copyright',
-      scheme: 'tms',
+      attribution: "Copyright",
+      scheme: "tms",
       tileSize: 256,
     };
 
@@ -66,9 +66,9 @@ describe('Style', () => {
       },
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const component = UNSAFE_getByType(RasterSource);
-    const {props} = component;
+    const { props } = component;
 
     expect(props.id).toStrictEqual(Object.keys(json.sources)[0]);
     expect(props.url).toStrictEqual(rasterSource.url);
@@ -80,10 +80,10 @@ describe('Style', () => {
     expect(props.tileSize).toStrictEqual(rasterSource.tileSize);
   });
 
-  test('renders image source correctly', () => {
+  test("renders image source correctly", () => {
     const imageSource = {
-      type: 'image',
-      url: 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
+      type: "image",
+      url: "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
       coordinates: [
         [-80.425, 46.437],
         [-71.516, 46.437],
@@ -99,19 +99,19 @@ describe('Style', () => {
       },
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const component = UNSAFE_getByType(ImageSource);
-    const {props} = component;
+    const { props } = component;
 
     expect(props.id).toStrictEqual(Object.keys(json.sources)[0]);
     expect(props.url).toStrictEqual(imageSource.url);
     expect(props.coordinates).toStrictEqual(imageSource.coordinates);
   });
 
-  test('renders shape source correctly', () => {
+  test("renders shape source correctly", () => {
     const shapeSource = {
-      type: 'geojson',
-      data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
+      type: "geojson",
+      data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
       cluster: true,
       clusterRadius: 80,
       clusterMaxZoom: 10,
@@ -128,9 +128,9 @@ describe('Style', () => {
       },
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const component = UNSAFE_getByType(ShapeSource);
-    const {props} = component;
+    const { props } = component;
 
     expect(props.id).toStrictEqual(Object.keys(json.sources)[0]);
     expect(props.url).toStrictEqual(shapeSource.data);
@@ -142,11 +142,11 @@ describe('Style', () => {
     expect(props.tolerance).toStrictEqual(shapeSource.tolerance);
   });
 
-  test('renders shape source with json data correctly', () => {
+  test("renders shape source with json data correctly", () => {
     const shapeSource = {
-      type: 'geojson',
+      type: "geojson",
       data: {
-        type: 'FeatureCollection',
+        type: "FeatureCollection",
         features: [],
       },
     };
@@ -158,54 +158,54 @@ describe('Style', () => {
       },
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const component = UNSAFE_getByType(ShapeSource);
-    const {props} = component;
+    const { props } = component;
 
     expect(props.id).toStrictEqual(Object.keys(json.sources)[0]);
     expect(props.shape).toStrictEqual(shapeSource.data);
     expect(props.url).toBeUndefined();
   });
 
-  test('renders supported layer types correctly', () => {
+  test("renders supported layer types correctly", () => {
     const json = {
       layers: [
         {
-          id: 'circle',
-          type: 'circle',
+          id: "circle",
+          type: "circle",
         },
         {
-          id: 'symbol',
-          type: 'symbol',
+          id: "symbol",
+          type: "symbol",
         },
         {
-          id: 'raster',
-          type: 'raster',
+          id: "raster",
+          type: "raster",
         },
         {
-          id: 'line',
-          type: 'line',
+          id: "line",
+          type: "line",
         },
         {
-          id: 'fill',
-          type: 'fill',
+          id: "fill",
+          type: "fill",
         },
         {
-          id: 'fill-extrusion',
-          type: 'fill-extrusion',
+          id: "fill-extrusion",
+          type: "fill-extrusion",
         },
         {
-          id: 'background',
-          type: 'background',
+          id: "background",
+          type: "background",
         },
         {
-          id: 'heatmap',
-          type: 'heatmap',
+          id: "heatmap",
+          type: "heatmap",
         },
       ],
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const circleLayer = UNSAFE_getByType(CircleLayer);
     const symbolLayer = UNSAFE_getByType(SymbolLayer);
     const rasterLayer = UNSAFE_getByType(RasterLayer);
@@ -215,46 +215,46 @@ describe('Style', () => {
     const backgroundLayer = UNSAFE_getByType(BackgroundLayer);
     const heatmapLayer = UNSAFE_getByType(HeatmapLayer);
 
-    expect(circleLayer.props.id).toStrictEqual('circle');
-    expect(symbolLayer.props.id).toStrictEqual('symbol');
-    expect(rasterLayer.props.id).toStrictEqual('raster');
-    expect(lineLayer.props.id).toStrictEqual('line');
-    expect(fillLayer.props.id).toStrictEqual('fill');
-    expect(fillExtrusionLayer.props.id).toStrictEqual('fill-extrusion');
-    expect(backgroundLayer.props.id).toStrictEqual('background');
-    expect(heatmapLayer.props.id).toStrictEqual('heatmap');
+    expect(circleLayer.props.id).toStrictEqual("circle");
+    expect(symbolLayer.props.id).toStrictEqual("symbol");
+    expect(rasterLayer.props.id).toStrictEqual("raster");
+    expect(lineLayer.props.id).toStrictEqual("line");
+    expect(fillLayer.props.id).toStrictEqual("fill");
+    expect(fillExtrusionLayer.props.id).toStrictEqual("fill-extrusion");
+    expect(backgroundLayer.props.id).toStrictEqual("background");
+    expect(heatmapLayer.props.id).toStrictEqual("heatmap");
   });
 
-  test('renders layer props correctly', () => {
+  test("renders layer props correctly", () => {
     const circleLayer = {
-      id: 'circle',
-      type: 'circle',
-      source: 'population',
-      'source-layer': 'state_county_population',
-      filter: ['==', 'isState', true],
+      id: "circle",
+      type: "circle",
+      source: "population",
+      "source-layer": "state_county_population",
+      filter: ["==", "isState", true],
       minzoom: 1,
       maxzoom: 22,
       paint: {
-        'circle-opacity': 0.75,
+        "circle-opacity": 0.75,
       },
       layout: {
-        visibility: 'visible',
+        visibility: "visible",
       },
     };
     const json = {
       layers: [circleLayer],
     };
 
-    const {UNSAFE_getByType} = render(<Style json={json} />);
+    const { UNSAFE_getByType } = render(<Style json={json} />);
     const layerComponent = UNSAFE_getByType(CircleLayer);
-    const {props} = layerComponent;
+    const { props } = layerComponent;
     expect(props.sourceID).toStrictEqual(circleLayer.source);
-    expect(props.sourceLayerID).toStrictEqual(circleLayer['source-layer']);
+    expect(props.sourceLayerID).toStrictEqual(circleLayer["source-layer"]);
     expect(props.filter).toStrictEqual(circleLayer.filter);
     expect(props.minZoomLevel).toStrictEqual(circleLayer.minzoom);
     expect(props.maxZoomLevel).toStrictEqual(circleLayer.maxzoom);
     expect(props.style.circleOpacity).toStrictEqual(
-      circleLayer.paint['circle-opacity'],
+      circleLayer.paint["circle-opacity"],
     );
     expect(props.style.visibility).toStrictEqual(circleLayer.layout.visibility);
   });
diff --git a/__tests__/components/SymbolLayer.test.js b/__tests__/components/SymbolLayer.test.js
index c3238cf37..b669fffc1 100644
--- a/__tests__/components/SymbolLayer.test.js
+++ b/__tests__/components/SymbolLayer.test.js
@@ -1,38 +1,38 @@
-import React from 'react';
-import {render} from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
+import React from "react";
 
 import SymbolLayer, {
   NATIVE_MODULE_NAME,
-} from '../../javascript/components/SymbolLayer';
+} from "../../javascript/components/SymbolLayer";
 
-describe('SymbolLayer', () => {
-  test('renders correctly with default props', () => {
-    const {UNSAFE_getByType} = render(
+describe("SymbolLayer", () => {
+  test("renders correctly with default props", () => {
+    const { UNSAFE_getByType } = render(
       <SymbolLayer id="requiredSymbolLayerID" />,
     );
     const symbolLayer = UNSAFE_getByType(NATIVE_MODULE_NAME);
-    const {props} = symbolLayer;
+    const { props } = symbolLayer;
 
-    expect(props.sourceID).toStrictEqual('DefaultSourceID');
+    expect(props.sourceID).toStrictEqual("DefaultSourceID");
   });
 
-  test('renders correctly with custom props', () => {
+  test("renders correctly with custom props", () => {
     const customProps = {
-      id: 'customId',
-      sourceID: 'customSourceId',
-      sourceLayerID: 'customSourceLayerId',
-      aboveLayerID: 'customAboveLayerId',
-      belowLayerID: 'customBelowLayerId',
+      id: "customId",
+      sourceID: "customSourceId",
+      sourceLayerID: "customSourceLayerId",
+      aboveLayerID: "customAboveLayerId",
+      belowLayerID: "customBelowLayerId",
       layerIndex: 0,
-      filter: ['==', 'arbitraryFilter', true],
+      filter: ["==", "arbitraryFilter", true],
       minZoomLevel: 3,
       maxZoomLevel: 8,
-      style: {visibility: 'none'},
+      style: { visibility: "none" },
     };
 
-    const {UNSAFE_getByType} = render(<SymbolLayer {...customProps} />);
+    const { UNSAFE_getByType } = render(<SymbolLayer {...customProps} />);
     const symbolLayer = UNSAFE_getByType(NATIVE_MODULE_NAME);
-    const {props} = symbolLayer;
+    const { props } = symbolLayer;
 
     expect(props.id).toStrictEqual(customProps.id);
     expect(props.sourceID).toStrictEqual(customProps.sourceID);
@@ -45,8 +45,8 @@ describe('SymbolLayer', () => {
     expect(props.maxZoomLevel).toStrictEqual(customProps.maxZoomLevel);
     expect(props.reactStyle).toStrictEqual({
       visibility: {
-        styletype: 'constant',
-        stylevalue: {type: 'string', value: customProps.style.visibility},
+        styletype: "constant",
+        stylevalue: { type: "string", value: customProps.style.visibility },
       },
     });
   });
diff --git a/__tests__/components/UserLocation.test.js b/__tests__/components/UserLocation.test.js
index 3767f3135..2cf9fd1b1 100644
--- a/__tests__/components/UserLocation.test.js
+++ b/__tests__/components/UserLocation.test.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import {render, fireEvent, waitFor} from '@testing-library/react-native';
+import { render, fireEvent, waitFor } from "@testing-library/react-native";
+import React from "react";
 
-import UserLocation from '../../javascript/components/UserLocation';
-import ShapeSource from '../../javascript/components/ShapeSource';
-import CircleLayer from '../../javascript/components/CircleLayer';
-import locationManager from '../../javascript/modules/location/locationManager';
+import CircleLayer from "../../javascript/components/CircleLayer";
+import ShapeSource from "../../javascript/components/ShapeSource";
+import UserLocation from "../../javascript/components/UserLocation";
+import locationManager from "../../javascript/modules/location/locationManager";
 
 const position = {
   coords: {
@@ -21,7 +21,7 @@ const position = {
 
 function renderUserLocation(props = {}) {
   const userLocationRef = React.createRef();
-  const {rerender, unmount} = render(
+  const { rerender, unmount } = render(
     <UserLocation {...props} ref={userLocationRef} />,
   );
 
@@ -29,26 +29,26 @@ function renderUserLocation(props = {}) {
     rerender(<UserLocation {...newProps} ref={userLocationRef} />);
   }
 
-  return {userLocationRef, reRenderUserLocation, unmount};
+  return { userLocationRef, reRenderUserLocation, unmount };
 }
 
-describe('UserLocation', () => {
-  describe('render', () => {
-    jest.spyOn(locationManager, 'start').mockImplementation(jest.fn());
+describe("UserLocation", () => {
+  describe("render", () => {
+    jest.spyOn(locationManager, "start").mockImplementation(jest.fn());
     jest
-      .spyOn(locationManager, 'getLastKnownLocation')
+      .spyOn(locationManager, "getLastKnownLocation")
       .mockImplementation(() => position);
 
-    jest.spyOn(locationManager, 'addListener');
+    jest.spyOn(locationManager, "addListener");
 
-    jest.spyOn(locationManager, 'removeListener');
+    jest.spyOn(locationManager, "removeListener");
 
     beforeEach(() => {
       jest.clearAllMocks();
     });
 
-    test('renders with CircleLayers by default', async () => {
-      const {UNSAFE_getAllByType} = await render(<UserLocation />);
+    test("renders with CircleLayers by default", async () => {
+      const { UNSAFE_getAllByType } = await render(<UserLocation />);
 
       const shapeSource = UNSAFE_getAllByType(ShapeSource);
       const circleLayer = UNSAFE_getAllByType(CircleLayer);
@@ -57,8 +57,8 @@ describe('UserLocation', () => {
       expect(circleLayer.length).toBe(3);
     });
 
-    test('does not render with visible set to false', async () => {
-      const {UNSAFE_queryByType} = await render(
+    test("does not render with visible set to false", async () => {
+      const { UNSAFE_queryByType } = await render(
         <UserLocation visible={false} />,
       );
 
@@ -69,19 +69,19 @@ describe('UserLocation', () => {
       expect(circleLayer).toEqual(null);
     });
 
-    test('renders with CustomChild when provided', async () => {
+    test("renders with CustomChild when provided", async () => {
       const circleLayerProps = {
-        key: 'testUserLocationCircle',
-        id: 'testUserLocationCircle',
+        key: "testUserLocationCircle",
+        id: "testUserLocationCircle",
         style: {
           circleRadius: 5,
-          circleColor: '#ccc',
+          circleColor: "#ccc",
           circleOpacity: 1,
-          circlePitchAlignment: 'map',
+          circlePitchAlignment: "map",
         },
       };
 
-      const {UNSAFE_queryByType, UNSAFE_queryAllByType} = await render(
+      const { UNSAFE_queryByType, UNSAFE_queryAllByType } = await render(
         <UserLocation>
           <CircleLayer {...circleLayerProps} />
         </UserLocation>,
@@ -97,7 +97,7 @@ describe('UserLocation', () => {
       expect(circleLayer[0].props.style).toEqual(circleLayerProps.style);
     });
 
-    test('calls onUpdate callback when new location is received', () => {
+    test("calls onUpdate callback when new location is received", () => {
       const onUpdateCallback = jest.fn();
 
       render(<UserLocation onUpdate={onUpdateCallback} />);
@@ -118,23 +118,23 @@ describe('UserLocation', () => {
       expect(onUpdateCallback).toHaveBeenCalled();
     });
 
-    test('calls onPress callback when location icon is pressed', () => {
+    test("calls onPress callback when location icon is pressed", () => {
       const onPressCallback = jest.fn();
 
-      const {UNSAFE_queryByType} = render(
+      const { UNSAFE_queryByType } = render(
         <UserLocation onPress={onPressCallback} />,
       );
 
       waitFor(() => {
         const shapeSource = UNSAFE_queryByType(ShapeSource);
-        fireEvent(shapeSource, 'onPress');
-        fireEvent(shapeSource, 'onPress');
+        fireEvent(shapeSource, "onPress");
+        fireEvent(shapeSource, "onPress");
         expect(onPressCallback).toHaveBeenCalledTimes(2);
       });
     });
 
-    test('correctly unmounts', async () => {
-      const {unmount} = renderUserLocation();
+    test("correctly unmounts", async () => {
+      const { unmount } = renderUserLocation();
 
       expect(locationManager.addListener).toHaveBeenCalledTimes(1);
       expect(locationManager.removeListener).not.toHaveBeenCalled();
@@ -145,12 +145,12 @@ describe('UserLocation', () => {
     });
   });
 
-  describe('methods', () => {
+  describe("methods", () => {
     beforeEach(() => {
-      jest.spyOn(locationManager, 'start').mockImplementation(jest.fn());
-      jest.spyOn(locationManager, 'stop').mockImplementation(jest.fn());
+      jest.spyOn(locationManager, "start").mockImplementation(jest.fn());
+      jest.spyOn(locationManager, "stop").mockImplementation(jest.fn());
       jest
-        .spyOn(locationManager, 'getLastKnownLocation')
+        .spyOn(locationManager, "getLastKnownLocation")
         .mockImplementation(() => position);
     });
 
@@ -158,18 +158,18 @@ describe('UserLocation', () => {
       jest.clearAllMocks();
     });
 
-    test('initial state is as expected', () => {
+    test("initial state is as expected", () => {
       renderUserLocation();
       expect(locationManager.start).toHaveBeenCalledTimes(1);
     });
 
     // TODO: replace object { running: boolean } argument with simple boolean
-    describe('#setLocationManager', () => {
+    describe("#setLocationManager", () => {
       test('called with "running" true', async () => {
         const onUpdate = jest.fn();
-        const {userLocationRef} = renderUserLocation({onUpdate});
+        const { userLocationRef } = renderUserLocation({ onUpdate });
 
-        await userLocationRef.current.setLocationManager({running: true});
+        await userLocationRef.current.setLocationManager({ running: true });
 
         expect(locationManager.start).toHaveBeenCalledTimes(1);
         expect(locationManager.getLastKnownLocation).toHaveBeenCalledTimes(1);
@@ -190,12 +190,12 @@ describe('UserLocation', () => {
       });
 
       test('called with "running" false', async () => {
-        const {userLocationRef} = renderUserLocation();
+        const { userLocationRef } = renderUserLocation();
 
-        await userLocationRef.current.setLocationManager({running: true});
+        await userLocationRef.current.setLocationManager({ running: true });
 
         // stop
-        await userLocationRef.current.setLocationManager({running: false});
+        await userLocationRef.current.setLocationManager({ running: false });
 
         // only once from start
         expect(locationManager.start).toHaveBeenCalledTimes(1);
@@ -204,9 +204,9 @@ describe('UserLocation', () => {
       });
     });
 
-    describe('#needsLocationManagerRunning', () => {
-      test('returns correct values', () => {
-        const {userLocationRef, reRenderUserLocation} = renderUserLocation();
+    describe("#needsLocationManagerRunning", () => {
+      test("returns correct values", () => {
+        const { userLocationRef, reRenderUserLocation } = renderUserLocation();
 
         // default props "onUpdate: undefined, visible: true"
         expect(
@@ -241,10 +241,10 @@ describe('UserLocation', () => {
       });
     });
 
-    describe('#_onLocationUpdate', () => {
-      test('works correctly', () => {
+    describe("#_onLocationUpdate", () => {
+      test("works correctly", () => {
         const onUpdate = jest.fn();
-        const {userLocationRef} = renderUserLocation({
+        const { userLocationRef } = renderUserLocation({
           onUpdate,
         });
 
diff --git a/__tests__/interface.test.js b/__tests__/interface.test.js
index eb2e47a93..e179547cc 100644
--- a/__tests__/interface.test.js
+++ b/__tests__/interface.test.js
@@ -1,96 +1,96 @@
-import MapLibreGL from '../javascript';
+import MapLibreGL from "../javascript";
 
 // Assert that all required Maplibre modules are accessible and exported
-describe('Public Interface', () => {
-  it('should contain all expected components and utils', () => {
+describe("Public Interface", () => {
+  it("should contain all expected components and utils", () => {
     const actualKeys = Object.keys(MapLibreGL);
     const expectedKeys = [
       // components
-      'MapView',
+      "MapView",
       // 'StyleSheet',
-      'Light',
-      'PointAnnotation',
-      'MarkerView',
-      'Annotation',
-      'Callout',
-      'Camera',
-      'UserLocation',
+      "Light",
+      "PointAnnotation",
+      "MarkerView",
+      "Annotation",
+      "Callout",
+      "Camera",
+      "UserLocation",
 
       // modules
-      'offlineManager',
-      'OfflineCreatePackOptions',
-      'OfflinePack',
-      'snapshotManager',
-      'locationManager',
+      "offlineManager",
+      "OfflineCreatePackOptions",
+      "OfflinePack",
+      "snapshotManager",
+      "locationManager",
 
       // layers
-      'FillLayer',
-      'FillExtrusionLayer',
-      'CircleLayer',
-      'HeatmapLayer',
-      'LineLayer',
-      'SymbolLayer',
-      'BackgroundLayer',
-      'RasterLayer',
+      "FillLayer",
+      "FillExtrusionLayer",
+      "CircleLayer",
+      "HeatmapLayer",
+      "LineLayer",
+      "SymbolLayer",
+      "BackgroundLayer",
+      "RasterLayer",
 
       // sources
-      'VectorSource',
-      'ShapeSource',
-      'RasterSource',
-      'ImageSource',
-      'Images',
+      "VectorSource",
+      "ShapeSource",
+      "RasterSource",
+      "ImageSource",
+      "Images",
 
       // constants
-      'UserTrackingMode',
-      'UserTrackingModes', // deprecated
-      'UserLocationRenderMode',
-      'StyleURL',
-      'EventTypes',
-      'CameraModes',
-      'StyleSource',
-      'InterpolationMode',
-      'LineJoin',
-      'LineCap',
-      'LineTranslateAnchor',
-      'CirclePitchScale',
-      'CircleTranslateAnchor',
+      "UserTrackingMode",
+      "UserTrackingModes", // deprecated
+      "UserLocationRenderMode",
+      "StyleURL",
+      "EventTypes",
+      "CameraModes",
+      "StyleSource",
+      "InterpolationMode",
+      "LineJoin",
+      "LineCap",
+      "LineTranslateAnchor",
+      "CirclePitchScale",
+      "CircleTranslateAnchor",
       // 'CirclePitchAlignment',
-      'FillExtrusionTranslateAnchor',
-      'FillTranslateAnchor',
-      'IconRotationAlignment',
-      'IconTextFit',
+      "FillExtrusionTranslateAnchor",
+      "FillTranslateAnchor",
+      "IconRotationAlignment",
+      "IconTextFit",
       // 'IconAnchor',
-      'IconTranslateAnchor',
+      "IconTranslateAnchor",
       // 'IconPitchAlignment',
-      'SymbolPlacement',
-      'TextAnchor',
-      'TextJustify',
-      'TextPitchAlignment',
-      'TextRotationAlignment',
-      'TextTransform',
-      'TextTranslateAnchor',
-      'LightAnchor',
-      'OfflinePackDownloadState',
-      'OfflineCallbackName',
+      "SymbolPlacement",
+      "TextAnchor",
+      "TextJustify",
+      "TextPitchAlignment",
+      "TextRotationAlignment",
+      "TextTransform",
+      "TextTranslateAnchor",
+      "LightAnchor",
+      "OfflinePackDownloadState",
+      "OfflineCallbackName",
 
       // methods
-      'setAccessToken',
-      'getAccessToken',
-      'setConnected',
-      'requestAndroidLocationPermissions',
+      "setAccessToken",
+      "getAccessToken",
+      "setConnected",
+      "requestAndroidLocationPermissions",
 
       // animated
-      'Animated',
+      "Animated",
 
       // helpers
-      'AnimatedPoint',
-      'AnimatedCoordinatesArray',
-      'AnimatedShape',
-      'AnimatedExtractCoordinateFromArray',
-      'AnimatedRouteCoordinatesArray',
-      'Logger',
-      'Style',
+      "AnimatedPoint",
+      "AnimatedCoordinatesArray",
+      "AnimatedShape",
+      "AnimatedExtractCoordinateFromArray",
+      "AnimatedRouteCoordinatesArray",
+      "Logger",
+      "Style",
     ];
-    actualKeys.forEach(key => expect(expectedKeys).toContain(key));
+    actualKeys.forEach((key) => expect(expectedKeys).toContain(key));
   });
 });
diff --git a/__tests__/modules/location/locationManager.test.js b/__tests__/modules/location/locationManager.test.js
index 3c491c0ba..f7395f76d 100644
--- a/__tests__/modules/location/locationManager.test.js
+++ b/__tests__/modules/location/locationManager.test.js
@@ -1,8 +1,8 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
 import LocationManager, {
   LocationModuleEventEmitter,
-} from '../../../javascript/modules/location/locationManager';
+} from "../../../javascript/modules/location/locationManager";
 
 const MapLibreGL = NativeModules.MLNModule;
 const MapLibreGLLocationManager = NativeModules.MLNLocationModule;
@@ -19,25 +19,25 @@ const location = {
   timestamp: 1573730357879,
 };
 
-describe('LocationManager', () => {
+describe("LocationManager", () => {
   const locationManager = LocationManager;
-  describe('constructor', () => {
-    test('initializes locationManager correctly', () => {
+  describe("constructor", () => {
+    test("initializes locationManager correctly", () => {
       expect(locationManager._listeners).toStrictEqual([]);
       expect(locationManager._lastKnownLocation).toStrictEqual(null);
       expect(locationManager._isListening).toStrictEqual(false);
     });
   });
 
-  describe('methods', () => {
+  describe("methods", () => {
     beforeEach(() => {
       jest.clearAllMocks();
     });
 
-    describe('#getLastKnownLocation', () => {
-      test('gets last known location from native locationManager if non available', async () => {
+    describe("#getLastKnownLocation", () => {
+      test("gets last known location from native locationManager if non available", async () => {
         jest
-          .spyOn(MapLibreGLLocationManager, 'getLastKnownLocation')
+          .spyOn(MapLibreGLLocationManager, "getLastKnownLocation")
           .mockImplementation(() => location);
 
         const lastKnownLocation = await locationManager.getLastKnownLocation();
@@ -51,7 +51,7 @@ describe('LocationManager', () => {
         locationManager._lastKnownLocation = null;
       });
 
-      test('returns cached location if available', async () => {
+      test("returns cached location if available", async () => {
         locationManager._lastKnownLocation = location;
 
         await locationManager.getLastKnownLocation();
@@ -67,21 +67,21 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#addListener', () => {
+    describe("#addListener", () => {
       const myListener = jest.fn();
-      MapLibreGL.LocationCallbackName = {Update: 'MapboxUserLocationUpdate'};
+      MapLibreGL.LocationCallbackName = { Update: "MapboxUserLocationUpdate" };
 
       afterEach(() => {
         locationManager._listeners = [];
       });
 
-      test('adds the listener', () => {
+      test("adds the listener", () => {
         expect(locationManager._listeners).toStrictEqual([]);
         locationManager.addListener(myListener);
         expect(locationManager._listeners).toStrictEqual([myListener]);
       });
 
-      test('does not re-add same listener', () => {
+      test("does not re-add same listener", () => {
         locationManager.addListener(myListener);
         expect(locationManager._listeners).toStrictEqual([myListener]);
         locationManager.addListener(myListener);
@@ -99,13 +99,13 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#removeListener', () => {
+    describe("#removeListener", () => {
       MapLibreGLLocationManager.stop = jest.fn();
 
-      test('removes selected listener', () => {
+      test("removes selected listener", () => {
         // just two different functions
-        const listenerA = jest.fn(() => 'listenerA');
-        const listenerB = () => 'listenerB';
+        const listenerA = jest.fn(() => "listenerA");
+        const listenerB = () => "listenerB";
 
         locationManager.addListener(listenerA);
         expect(locationManager._listeners).toStrictEqual([listenerA]);
@@ -128,11 +128,11 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#removeAllListeners', () => {
-      test('removes all listeners', () => {
+    describe("#removeAllListeners", () => {
+      test("removes all listeners", () => {
         // just two different functions
-        const listenerA = jest.fn(() => 'listenerA');
-        const listenerB = () => 'listenerB';
+        const listenerA = jest.fn(() => "listenerA");
+        const listenerB = () => "listenerB";
 
         locationManager.addListener(listenerA);
         expect(locationManager._listeners).toStrictEqual([listenerA]);
@@ -147,16 +147,18 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#start', () => {
-      jest.spyOn(MapLibreGLLocationManager, 'start');
-      jest.spyOn(LocationModuleEventEmitter, 'addListener');
+    describe("#start", () => {
+      jest.spyOn(MapLibreGLLocationManager, "start");
+      jest.spyOn(LocationModuleEventEmitter, "addListener");
 
       afterEach(() => {
         locationManager._isListening = false;
       });
 
-      test('starts native location manager and adds event emitter listener', () => {
-        MapLibreGL.LocationCallbackName = {Update: 'MapboxUserLocationUpdate'};
+      test("starts native location manager and adds event emitter listener", () => {
+        MapLibreGL.LocationCallbackName = {
+          Update: "MapboxUserLocationUpdate",
+        };
 
         expect(locationManager._isListening).toStrictEqual(false);
 
@@ -178,7 +180,7 @@ describe('LocationManager', () => {
         expect(MapLibreGLLocationManager.start).toHaveBeenCalledWith(5);
       });
 
-      test('does not start when already listening', () => {
+      test("does not start when already listening", () => {
         // we're already listening
         locationManager._isListening = true;
 
@@ -191,14 +193,16 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#stop', () => {
-      test('stops native location manager', () => {
+    describe("#stop", () => {
+      test("stops native location manager", () => {
         // set listening to true
         locationManager._isListening = true;
 
         // native location manager has no #stop exposed in tests?
         MapLibreGLLocationManager.stop = jest.fn();
-        MapLibreGL.LocationCallbackName = {Update: 'MapboxUserLocationUpdate'};
+        MapLibreGL.LocationCallbackName = {
+          Update: "MapboxUserLocationUpdate",
+        };
 
         expect(locationManager._isListening).toStrictEqual(true);
 
@@ -210,13 +214,15 @@ describe('LocationManager', () => {
         expect(locationManager._isListening).toStrictEqual(false);
       });
 
-      test('only removes event emitter listener when listening', () => {
+      test("only removes event emitter listener when listening", () => {
         // set listening to true
         locationManager._isListening = false;
 
         // native location manager has no #stop exposed in tests?
         MapLibreGLLocationManager.stop = jest.fn();
-        MapLibreGL.LocationCallbackName = {Update: 'MapboxUserLocationUpdate'};
+        MapLibreGL.LocationCallbackName = {
+          Update: "MapboxUserLocationUpdate",
+        };
 
         expect(locationManager._isListening).toStrictEqual(false);
 
@@ -227,7 +233,7 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#setMinDisplacement', () => {
+    describe("#setMinDisplacement", () => {
       test('calls native "setMinDisplacement"', () => {
         MapLibreGLLocationManager.setMinDisplacement = jest.fn();
         locationManager.setMinDisplacement(5);
@@ -237,7 +243,7 @@ describe('LocationManager', () => {
       });
     });
 
-    describe('#onUpdate', () => {
+    describe("#onUpdate", () => {
       beforeEach(() => {
         locationManager._lastKnownLocation = null;
       });
@@ -248,16 +254,16 @@ describe('LocationManager', () => {
         expect(locationManager._lastKnownLocation).toStrictEqual(location);
       });
 
-      test('calls listeners with location', () => {
+      test("calls listeners with location", () => {
         const listeners = [jest.fn(), jest.fn(), jest.fn()];
 
-        listeners.forEach(listener => {
+        listeners.forEach((listener) => {
           locationManager.addListener(listener);
         });
 
         locationManager.onUpdate(location);
 
-        listeners.forEach(listener => {
+        listeners.forEach((listener) => {
           expect(listener).toHaveBeenCalledTimes(1);
           expect(listener).toHaveBeenCalledWith(location);
         });
diff --git a/__tests__/modules/offline/OfflineCreatePackOptions.test.js b/__tests__/modules/offline/OfflineCreatePackOptions.test.js
index 3ce5a26c7..82c85fe0f 100644
--- a/__tests__/modules/offline/OfflineCreatePackOptions.test.js
+++ b/__tests__/modules/offline/OfflineCreatePackOptions.test.js
@@ -1,11 +1,11 @@
-import {featureCollection, point} from '@turf/helpers';
+import { featureCollection, point } from "@turf/helpers";
 
-import OfflineCreatePackOptions from '../../../javascript/modules/offline/OfflineCreatePackOptions';
+import OfflineCreatePackOptions from "../../../javascript/modules/offline/OfflineCreatePackOptions";
 
-describe('OfflineCreatePackOptions', () => {
+describe("OfflineCreatePackOptions", () => {
   const options = {
-    name: 'test',
-    styleURL: 'mapbox://fake-style-url',
+    name: "test",
+    styleURL: "mapbox://fake-style-url",
     bounds: [
       [0, 1],
       [2, 3],
@@ -13,11 +13,11 @@ describe('OfflineCreatePackOptions', () => {
     minZoom: 1,
     maxZoom: 22,
     metadata: {
-      customData: 'hiking',
+      customData: "hiking",
     },
   };
 
-  it('should create valid options', () => {
+  it("should create valid options", () => {
     const actualOptions = new OfflineCreatePackOptions(options);
     expect(actualOptions.name).toEqual(options.name);
     expect(actualOptions.styleURL).toEqual(options.styleURL);
@@ -41,28 +41,28 @@ describe('OfflineCreatePackOptions', () => {
     );
   });
 
-  it('should throw error without a styleURL', () => {
+  it("should throw error without a styleURL", () => {
     const invalidOptions = Object.assign({}, options, {
       styleURL: undefined,
     });
     verifyErrorThrown(invalidOptions);
   });
 
-  it('should throw error without a name', () => {
+  it("should throw error without a name", () => {
     const invalidOptions = Object.assign({}, options, {
       name: undefined,
     });
     verifyErrorThrown(invalidOptions);
   });
 
-  it('should throw error without bounds', () => {
+  it("should throw error without bounds", () => {
     const invalidOptions = Object.assign({}, options, {
       bounds: undefined,
     });
     verifyErrorThrown(invalidOptions);
   });
 
-  it('should throw error without options', () => {
+  it("should throw error without options", () => {
     verifyErrorThrown();
     verifyErrorThrown(null);
     verifyErrorThrown({});
diff --git a/__tests__/modules/offline/OfflinePack.test.js b/__tests__/modules/offline/OfflinePack.test.js
index fbcef77d4..5ebd9b59c 100644
--- a/__tests__/modules/offline/OfflinePack.test.js
+++ b/__tests__/modules/offline/OfflinePack.test.js
@@ -1,8 +1,8 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
-import OfflinePack from '../../../javascript/modules/offline/OfflinePack';
+import OfflinePack from "../../../javascript/modules/offline/OfflinePack";
 
-describe('OfflinePack', () => {
+describe("OfflinePack", () => {
   const fakeNativePack = {
     bounds: [
       [0, 1],
@@ -11,17 +11,17 @@ describe('OfflinePack', () => {
     metadata: '{"name":"test"}',
   };
 
-  it('should contain a valid pack', () => {
+  it("should contain a valid pack", () => {
     const offlinePack = new OfflinePack(fakeNativePack);
     expect(offlinePack.bounds).toEqual(fakeNativePack.bounds);
-    expect(offlinePack.name).toEqual('test');
+    expect(offlinePack.name).toEqual("test");
     expect(offlinePack.metadata).toEqual(JSON.parse(fakeNativePack.metadata));
   });
 
-  it('should resume pack download', () => {
+  it("should resume pack download", () => {
     const spy = jest.spyOn(
       NativeModules.MLNOfflineModule,
-      'resumePackDownload',
+      "resumePackDownload",
     );
     const offlinePack = new OfflinePack(fakeNativePack);
     offlinePack.resume();
@@ -29,16 +29,16 @@ describe('OfflinePack', () => {
     spy.mockRestore();
   });
 
-  it('should pause pack download', () => {
-    const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'pausePackDownload');
+  it("should pause pack download", () => {
+    const spy = jest.spyOn(NativeModules.MLNOfflineModule, "pausePackDownload");
     const offlinePack = new OfflinePack(fakeNativePack);
     offlinePack.pause();
     expect(spy).toHaveBeenCalled();
     spy.mockRestore();
   });
 
-  it('should get pack status', () => {
-    const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'getPackStatus');
+  it("should get pack status", () => {
+    const spy = jest.spyOn(NativeModules.MLNOfflineModule, "getPackStatus");
     const offlinePack = new OfflinePack(fakeNativePack);
     offlinePack.status();
     expect(spy).toHaveBeenCalled();
diff --git a/__tests__/modules/offline/offlineManager.test.js b/__tests__/modules/offline/offlineManager.test.js
index 6e03023c9..b13ca7087 100644
--- a/__tests__/modules/offline/offlineManager.test.js
+++ b/__tests__/modules/offline/offlineManager.test.js
@@ -1,12 +1,12 @@
-import {NativeModules, Platform} from 'react-native';
+import { NativeModules, Platform } from "react-native";
 
-import MapLibreGL from '../../../javascript';
-import {OfflineModuleEventEmitter} from '../../../javascript/modules/offline/offlineManager';
+import MapLibreGL from "../../../javascript";
+import { OfflineModuleEventEmitter } from "../../../javascript/modules/offline/offlineManager";
 
-describe('offlineManager', () => {
+describe("offlineManager", () => {
   const packOptions = {
-    name: 'test',
-    styleURL: 'mapbox://fake-style-url',
+    name: "test",
+    styleURL: "mapbox://fake-style-url",
     bounds: [
       [0, 1],
       [2, 3],
@@ -16,7 +16,7 @@ describe('offlineManager', () => {
   };
 
   const mockOnProgressEvent = {
-    type: 'offlinestatus',
+    type: "offlinestatus",
     payload: {
       name: packOptions.name,
       state: MapLibreGL.OfflinePackDownloadState.Active,
@@ -25,7 +25,7 @@ describe('offlineManager', () => {
   };
 
   const mockOnProgressCompleteEvent = {
-    type: 'offlinestatus',
+    type: "offlinestatus",
     payload: {
       name: packOptions.name,
       state: MapLibreGL.OfflinePackDownloadState.Complete,
@@ -34,10 +34,10 @@ describe('offlineManager', () => {
   };
 
   const mockErrorEvent = {
-    type: 'offlineerror',
+    type: "offlineerror",
     payload: {
       name: packOptions.name,
-      message: 'unit test error',
+      message: "unit test error",
     },
   };
 
@@ -50,7 +50,7 @@ describe('offlineManager', () => {
     jest.clearAllMocks();
   });
 
-  it('should create pack', async () => {
+  it("should create pack", async () => {
     let offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name);
     expect(offlinePack).toBeFalsy();
 
@@ -59,7 +59,7 @@ describe('offlineManager', () => {
     expect(offlinePack).toBeTruthy();
   });
 
-  it('should delete pack', async () => {
+  it("should delete pack", async () => {
     await MapLibreGL.offlineManager.createPack(packOptions);
     let offlinePack = await MapLibreGL.offlineManager.getPack(packOptions.name);
     expect(offlinePack).toBeTruthy();
@@ -69,35 +69,35 @@ describe('offlineManager', () => {
     expect(offlinePack).toBeFalsy();
   });
 
-  it('should set max tile count limit', () => {
+  it("should set max tile count limit", () => {
     const expectedLimit = 2000;
-    const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'setTileCountLimit');
+    const spy = jest.spyOn(NativeModules.MLNOfflineModule, "setTileCountLimit");
     MapLibreGL.offlineManager.setTileCountLimit(expectedLimit);
     expect(spy).toHaveBeenCalledWith(expectedLimit);
     spy.mockRestore();
   });
 
-  it('should set progress event throttle value', () => {
+  it("should set progress event throttle value", () => {
     const expectedThrottleValue = 500;
     const spy = jest.spyOn(
       NativeModules.MLNOfflineModule,
-      'setProgressEventThrottle',
+      "setProgressEventThrottle",
     );
     MapLibreGL.offlineManager.setProgressEventThrottle(expectedThrottleValue);
     expect(spy).toHaveBeenCalledWith(expectedThrottleValue);
     spy.mockRestore();
   });
 
-  describe('Events', () => {
-    it('should subscribe to native events', async () => {
-      const spy = jest.spyOn(OfflineModuleEventEmitter, 'addListener');
+  describe("Events", () => {
+    it("should subscribe to native events", async () => {
+      const spy = jest.spyOn(OfflineModuleEventEmitter, "addListener");
       const noop = () => {};
       await MapLibreGL.offlineManager.createPack(packOptions, noop, noop);
       expect(spy).toHaveBeenCalledTimes(2);
       spy.mockClear();
     });
 
-    it('should call progress listener', async () => {
+    it("should call progress listener", async () => {
       const listener = jest.fn();
       await MapLibreGL.offlineManager.createPack(packOptions, listener);
       const expectedOfflinePack = await MapLibreGL.offlineManager.getPack(
@@ -110,7 +110,7 @@ describe('offlineManager', () => {
       );
     });
 
-    it('should call error listener', async () => {
+    it("should call error listener", async () => {
       const listener = jest.fn();
       await MapLibreGL.offlineManager.createPack(packOptions, null, listener);
       const expectedOfflinePack = await MapLibreGL.offlineManager.getPack(
@@ -123,7 +123,7 @@ describe('offlineManager', () => {
       );
     });
 
-    it('should not call listeners after unsubscribe', async () => {
+    it("should not call listeners after unsubscribe", async () => {
       const listener = jest.fn();
       await MapLibreGL.offlineManager.createPack(
         packOptions,
@@ -136,7 +136,7 @@ describe('offlineManager', () => {
       expect(listener).not.toHaveBeenCalled();
     });
 
-    it('should unsubscribe from native events', async () => {
+    it("should unsubscribe from native events", async () => {
       const noop = () => {};
 
       await MapLibreGL.offlineManager.createPack(packOptions, noop, noop);
@@ -150,7 +150,7 @@ describe('offlineManager', () => {
       ).toHaveBeenCalledTimes(1);
     });
 
-    it('should unsubscribe event listeners once a pack download has completed', async () => {
+    it("should unsubscribe event listeners once a pack download has completed", async () => {
       const listener = jest.fn();
       await MapLibreGL.offlineManager.createPack(
         packOptions,
@@ -190,15 +190,15 @@ describe('offlineManager', () => {
     });
   });
 
-  describe('Android', () => {
-    beforeEach(() => (Platform.OS = 'android'));
+  describe("Android", () => {
+    beforeEach(() => (Platform.OS = "android"));
 
-    it('should set pack observer manually', async () => {
-      const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'setPackObserver');
+    it("should set pack observer manually", async () => {
+      const spy = jest.spyOn(NativeModules.MLNOfflineModule, "setPackObserver");
 
       const name = `test-${Date.now()}`;
       const noop = () => {};
-      const options = {...packOptions, name};
+      const options = { ...packOptions, name };
       await MapLibreGL.offlineManager.createPack(options);
       await MapLibreGL.offlineManager.subscribe(name, noop, noop);
 
@@ -206,12 +206,12 @@ describe('offlineManager', () => {
       spy.mockRestore();
     });
 
-    it('should not set pack observer manually during create flow', async () => {
-      const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'setPackObserver');
+    it("should not set pack observer manually during create flow", async () => {
+      const spy = jest.spyOn(NativeModules.MLNOfflineModule, "setPackObserver");
 
       const name = `test-${Date.now()}`;
       const noop = () => {};
-      const options = {...packOptions, name};
+      const options = { ...packOptions, name };
       await MapLibreGL.offlineManager.createPack(options, noop, noop);
 
       expect(spy).not.toHaveBeenCalled();
@@ -219,15 +219,15 @@ describe('offlineManager', () => {
     });
   });
 
-  describe('iOS', () => {
-    beforeEach(() => (Platform.OS = 'ios'));
+  describe("iOS", () => {
+    beforeEach(() => (Platform.OS = "ios"));
 
-    it('should not set pack observer manually', async () => {
-      const spy = jest.spyOn(NativeModules.MLNOfflineModule, 'setPackObserver');
+    it("should not set pack observer manually", async () => {
+      const spy = jest.spyOn(NativeModules.MLNOfflineModule, "setPackObserver");
 
       const name = `test-${Date.now()}`;
       const noop = () => {};
-      const options = {...packOptions, name};
+      const options = { ...packOptions, name };
       await MapLibreGL.offlineManager.createPack(options);
       await MapLibreGL.offlineManager.subscribe(name, noop, noop);
 
diff --git a/__tests__/modules/snapshot/SnapshotOptions.test.js b/__tests__/modules/snapshot/SnapshotOptions.test.js
index dd874682c..a7f679001 100644
--- a/__tests__/modules/snapshot/SnapshotOptions.test.js
+++ b/__tests__/modules/snapshot/SnapshotOptions.test.js
@@ -1,20 +1,20 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
-import SnapshotOptions from '../../../javascript/modules/snapshot/SnapshotOptions';
+import SnapshotOptions from "../../../javascript/modules/snapshot/SnapshotOptions";
 import {
   makePoint,
   makeFeatureCollection,
-} from '../../../javascript/utils/geoUtils';
+} from "../../../javascript/utils/geoUtils";
 
-describe('SnapshotOptions', () => {
-  it('should throw error if no centerCoordinate or bounds are provided', () => {
+describe("SnapshotOptions", () => {
+  it("should throw error if no centerCoordinate or bounds are provided", () => {
     expect(() => new SnapshotOptions()).toThrow();
-    expect(() => new SnapshotOptions({styleURL: 'test'})).toThrow();
+    expect(() => new SnapshotOptions({ styleURL: "test" })).toThrow();
   });
 
-  it('should create options with valid defaults', () => {
+  it("should create options with valid defaults", () => {
     const centerCoordinate = [1, 2];
-    const options = new SnapshotOptions({centerCoordinate});
+    const options = new SnapshotOptions({ centerCoordinate });
 
     expect(options.toJSON()).toEqual({
       styleURL: NativeModules.MLNModule.StyleURL.Default,
@@ -29,7 +29,7 @@ describe('SnapshotOptions', () => {
     });
   });
 
-  it('should create options with centerCoordinate', () => {
+  it("should create options with centerCoordinate", () => {
     const expectedOptions = {
       centerCoordinate: [1, 2],
       heading: 60.0,
@@ -51,7 +51,7 @@ describe('SnapshotOptions', () => {
     });
   });
 
-  it('should create options with bounds', () => {
+  it("should create options with bounds", () => {
     const expectedOptions = {
       bounds: [
         [1, 2],
@@ -65,7 +65,7 @@ describe('SnapshotOptions', () => {
     };
 
     const geoJSONBounds = JSON.stringify(
-      makeFeatureCollection(expectedOptions.bounds.map(c => makePoint(c))),
+      makeFeatureCollection(expectedOptions.bounds.map((c) => makePoint(c))),
     );
 
     const options = new SnapshotOptions(expectedOptions);
diff --git a/__tests__/modules/snapshot/snapshotManager.test.js b/__tests__/modules/snapshot/snapshotManager.test.js
index d0bb73335..6b95f7cd9 100644
--- a/__tests__/modules/snapshot/snapshotManager.test.js
+++ b/__tests__/modules/snapshot/snapshotManager.test.js
@@ -1,9 +1,9 @@
-import MapLibreGL from '../../../javascript';
+import MapLibreGL from "../../../javascript";
 
-describe('snapshotManager', () => {
-  it('should resolve uri', async () => {
-    const options = {centerCoordinate: [1, 2]};
+describe("snapshotManager", () => {
+  it("should resolve uri", async () => {
+    const options = { centerCoordinate: [1, 2] };
     const uri = await MapLibreGL.snapshotManager.takeSnap(options);
-    expect(uri).toEqual('file://test.png');
+    expect(uri).toEqual("file://test.png");
   });
 });
diff --git a/__tests__/utils/BridgeValue.test.js b/__tests__/utils/BridgeValue.test.js
index be002e4eb..63b88ead1 100644
--- a/__tests__/utils/BridgeValue.test.js
+++ b/__tests__/utils/BridgeValue.test.js
@@ -1,72 +1,72 @@
-import BridgeValue from '../../javascript/utils/BridgeValue';
+import BridgeValue from "../../javascript/utils/BridgeValue";
 
-describe('BridgeValue', () => {
-  it('should convert to array of numbers', () => {
+describe("BridgeValue", () => {
+  it("should convert to array of numbers", () => {
     const bridgeValue = new BridgeValue([1, 2]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
-        {type: 'number', value: 1},
-        {type: 'number', value: 2},
+        { type: "number", value: 1 },
+        { type: "number", value: 2 },
       ],
     });
   });
 
-  it('should convert to array of string', () => {
-    const bridgeValue = new BridgeValue(['hello', 'world']);
+  it("should convert to array of string", () => {
+    const bridgeValue = new BridgeValue(["hello", "world"]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
-        {type: 'string', value: 'hello'},
-        {type: 'string', value: 'world'},
+        { type: "string", value: "hello" },
+        { type: "string", value: "world" },
       ],
     });
   });
 
-  it('should convert to array of booleans', () => {
+  it("should convert to array of booleans", () => {
     const bridgeValue = new BridgeValue([true, false]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
-        {type: 'boolean', value: true},
-        {type: 'boolean', value: false},
+        { type: "boolean", value: true },
+        { type: "boolean", value: false },
       ],
     });
   });
 
-  it('should convert to array of hashmaps', () => {
+  it("should convert to array of hashmaps", () => {
     const bridgeValue = new BridgeValue([
-      {prop1: 1},
-      {prop2: 'value'},
-      {prop3: false},
+      { prop1: 1 },
+      { prop2: "value" },
+      { prop3: false },
     ]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
         {
-          type: 'hashmap',
+          type: "hashmap",
           value: [
             [
-              {type: 'string', value: 'prop1'},
-              {type: 'number', value: 1},
+              { type: "string", value: "prop1" },
+              { type: "number", value: 1 },
             ],
           ],
         },
         {
-          type: 'hashmap',
+          type: "hashmap",
           value: [
             [
-              {type: 'string', value: 'prop2'},
-              {type: 'string', value: 'value'},
+              { type: "string", value: "prop2" },
+              { type: "string", value: "value" },
             ],
           ],
         },
         {
-          type: 'hashmap',
+          type: "hashmap",
           value: [
             [
-              {type: 'string', value: 'prop3'},
-              {type: 'boolean', value: false},
+              { type: "string", value: "prop3" },
+              { type: "boolean", value: false },
             ],
           ],
         },
@@ -74,59 +74,59 @@ describe('BridgeValue', () => {
     });
   });
 
-  it('should convert complex expression', () => {
+  it("should convert complex expression", () => {
     const bridgeValue = new BridgeValue([
-      'all',
-      ['foo', 'bar'],
-      ['baz', 'bao'],
+      "all",
+      ["foo", "bar"],
+      ["baz", "bao"],
     ]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
         {
-          type: 'string',
-          value: 'all',
+          type: "string",
+          value: "all",
         },
         {
-          type: 'array',
+          type: "array",
           value: [
-            {type: 'string', value: 'foo'},
-            {type: 'string', value: 'bar'},
+            { type: "string", value: "foo" },
+            { type: "string", value: "bar" },
           ],
         },
         {
-          type: 'array',
+          type: "array",
           value: [
-            {type: 'string', value: 'baz'},
-            {type: 'string', value: 'bao'},
+            { type: "string", value: "baz" },
+            { type: "string", value: "bao" },
           ],
         },
       ],
     });
   });
 
-  it('should convert to array of arrays', () => {
+  it("should convert to array of arrays", () => {
     const bridgeValue = new BridgeValue([
       [1],
-      ['value'],
+      ["value"],
       [true],
-      [{prop: 'value'}],
+      [{ prop: "value" }],
     ]);
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'array',
+      type: "array",
       value: [
-        {type: 'array', value: [{type: 'number', value: 1}]},
-        {type: 'array', value: [{type: 'string', value: 'value'}]},
-        {type: 'array', value: [{type: 'boolean', value: true}]},
+        { type: "array", value: [{ type: "number", value: 1 }] },
+        { type: "array", value: [{ type: "string", value: "value" }] },
+        { type: "array", value: [{ type: "boolean", value: true }] },
         {
-          type: 'array',
+          type: "array",
           value: [
             {
-              type: 'hashmap',
+              type: "hashmap",
               value: [
                 [
-                  {type: 'string', value: 'prop'},
-                  {type: 'string', value: 'value'},
+                  { type: "string", value: "prop" },
+                  { type: "string", value: "value" },
                 ],
               ],
             },
@@ -136,37 +136,37 @@ describe('BridgeValue', () => {
     });
   });
 
-  it('should convert to number', () => {
+  it("should convert to number", () => {
     const bridgeValue = new BridgeValue(1);
-    expect(bridgeValue.toJSON()).toEqual({type: 'number', value: 1});
+    expect(bridgeValue.toJSON()).toEqual({ type: "number", value: 1 });
   });
 
-  it('should convert to string', () => {
-    const bridgeValue = new BridgeValue('value');
-    expect(bridgeValue.toJSON()).toEqual({type: 'string', value: 'value'});
+  it("should convert to string", () => {
+    const bridgeValue = new BridgeValue("value");
+    expect(bridgeValue.toJSON()).toEqual({ type: "string", value: "value" });
   });
 
-  it('should convert to boolean', () => {
+  it("should convert to boolean", () => {
     const bridgeValue = new BridgeValue(true);
-    expect(bridgeValue.toJSON()).toEqual({type: 'boolean', value: true});
+    expect(bridgeValue.toJSON()).toEqual({ type: "boolean", value: true });
   });
 
-  it('should convert to hashmap', () => {
-    const bridgeValue = new BridgeValue({prop1: 'value1', prop2: 2});
+  it("should convert to hashmap", () => {
+    const bridgeValue = new BridgeValue({ prop1: "value1", prop2: 2 });
     expect(bridgeValue.toJSON()).toEqual({
-      type: 'hashmap',
+      type: "hashmap",
       value: [
         [
-          {type: 'string', value: 'prop1'},
-          {type: 'string', value: 'value1'},
+          { type: "string", value: "prop1" },
+          { type: "string", value: "value1" },
         ],
         [
-          {type: 'string', value: 'prop2'},
-          {type: 'number', value: 2},
+          { type: "string", value: "prop2" },
+          { type: "number", value: 2 },
         ],
       ],
     });
   });
 
-  it('should throw error', () => {});
+  it("should throw error", () => {});
 });
diff --git a/__tests__/utils/animated/AnimatedCoordinatesArray.test.js b/__tests__/utils/animated/AnimatedCoordinatesArray.test.js
index faf8712b4..1a28a0e9d 100644
--- a/__tests__/utils/animated/AnimatedCoordinatesArray.test.js
+++ b/__tests__/utils/animated/AnimatedCoordinatesArray.test.js
@@ -1,13 +1,11 @@
-/* eslint-disable fp/no-mutating-methods */
+import FakeTimers from "@sinonjs/fake-timers";
+import React from "react";
+import { Animated, Easing } from "react-native";
+import TestRenderer from "react-test-renderer";
 
-import FakeTimers from '@sinonjs/fake-timers';
-import {Animated, Easing} from 'react-native';
-import TestRenderer from 'react-test-renderer';
-import React from 'react';
-
-import AnimatedCoordinatesArray from '../../../javascript/utils/animated/AnimatedCoordinatesArray';
-import AnimatedShape from '../../../javascript/utils/animated/AnimatedShape';
-import ShapeSource from '../../../javascript/components/ShapeSource';
+import ShapeSource from "../../../javascript/components/ShapeSource";
+import AnimatedCoordinatesArray from "../../../javascript/utils/animated/AnimatedCoordinatesArray";
+import AnimatedShape from "../../../javascript/utils/animated/AnimatedShape";
 
 let clock = null;
 let oldNodeEnv = null;
@@ -15,19 +13,19 @@ let oldNodeEnv = null;
 beforeAll(() => {
   clock = FakeTimers.install();
   clock._requestedAnimationFrames = [];
-  clock.requestAnimationFrame = callback => {
+  clock.requestAnimationFrame = (callback) => {
     clock._requestedAnimationFrames.push(callback);
   };
   clock.fireRequestAnimationFrames = () => {
     const oldRAF = clock._requestedAnimationFrames;
     clock._requestedAnimationFrames = [];
-    oldRAF.forEach(cb => cb(Date.now()));
+    oldRAF.forEach((cb) => cb(Date.now()));
   };
 
   // animated will not call nativeProps in test mode
   // https://github.com/facebook/react-native/blob/34d3373bb0f7ee405292bf993163f29759ba5205/Libraries/Animated/createAnimatedComponent.js#L150-L156
   oldNodeEnv = process.env.NODE_ENV;
-  process.env.NODE_ENV = 'dev';
+  process.env.NODE_ENV = "dev";
 });
 
 afterAll(() => {
@@ -41,8 +39,8 @@ function _nativeRef(ref) {
   return ref._nativeRef;
 }
 
-describe('AnimatedShapeSource', () => {
-  test('testSetNativeProps', () => {
+describe("AnimatedShapeSource", () => {
+  test("testSetNativeProps", () => {
     AnimatedShapeSource.__skipSetNativeProps_FOR_TESTS_ONLY = false;
     const coordinates = new AnimatedCoordinatesArray([
       [1, 1],
@@ -53,8 +51,8 @@ describe('AnimatedShapeSource', () => {
     // eslint-disable-next-line no-unused-vars
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
-        shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        shape={new AnimatedShape({ type: "LineString", coordinates })}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
@@ -80,7 +78,7 @@ describe('AnimatedShapeSource', () => {
       expect(setNativeProps).toHaveBeenCalledTimes(i + 1);
       expect(setNativeProps).toHaveBeenCalledWith({
         shape: JSON.stringify({
-          type: 'LineString',
+          type: "LineString",
           coordinates: [
             [1 + (i + 1) * 4, 1 + (i + 1) * 4],
             [10 + (i + 1) * 4, 10 + (i + 1) * 4],
@@ -91,7 +89,7 @@ describe('AnimatedShapeSource', () => {
     // process.env.NODE_ENV = 'TEST';
   });
 
-  test('testAddingCoords', () => {
+  test("testAddingCoords", () => {
     AnimatedShapeSource.__skipSetNativeProps_FOR_TESTS_ONLY = false;
     const coordinates = new AnimatedCoordinatesArray([
       [1, 1],
@@ -102,8 +100,8 @@ describe('AnimatedShapeSource', () => {
     // eslint-disable-next-line no-unused-vars
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
-        shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        shape={new AnimatedShape({ type: "LineString", coordinates })}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
@@ -130,7 +128,7 @@ describe('AnimatedShapeSource', () => {
       expect(setNativeProps).toHaveBeenCalledTimes(i + 1);
       expect(setNativeProps).toHaveBeenCalledWith({
         shape: JSON.stringify({
-          type: 'LineString',
+          type: "LineString",
           coordinates: [
             [1 + (i + 1) * 4, 1 + (i + 1) * 4],
             [10 + (i + 1) * 4, 10 + (i + 1) * 4],
@@ -142,7 +140,7 @@ describe('AnimatedShapeSource', () => {
     // process.env.NODE_ENV = 'TEST';
   });
 
-  test('testRemovingCoords', () => {
+  test("testRemovingCoords", () => {
     AnimatedShapeSource.__skipSetNativeProps_FOR_TESTS_ONLY = false;
     const coordinates = new AnimatedCoordinatesArray([
       [1, 1],
@@ -154,8 +152,8 @@ describe('AnimatedShapeSource', () => {
     // eslint-disable-next-line no-unused-vars
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
-        shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        shape={new AnimatedShape({ type: "LineString", coordinates })}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
@@ -181,7 +179,7 @@ describe('AnimatedShapeSource', () => {
       expect(setNativeProps).toHaveBeenCalledTimes(i + 1);
       expect(setNativeProps).toHaveBeenCalledWith({
         shape: JSON.stringify({
-          type: 'LineString',
+          type: "LineString",
           coordinates: [
             [1 + (i + 1) * 4, 1 + (i + 1) * 4],
             [10 + (i + 1) * 4, 10 + (i + 1) * 4],
diff --git a/__tests__/utils/filterUtils.test.js b/__tests__/utils/filterUtils.test.js
index 36422a308..c00301da1 100644
--- a/__tests__/utils/filterUtils.test.js
+++ b/__tests__/utils/filterUtils.test.js
@@ -1,54 +1,54 @@
-import {getFilter} from '../../javascript/utils/filterUtils';
-import BridgeValue from '../../javascript/utils/BridgeValue';
+import BridgeValue from "../../javascript/utils/BridgeValue";
+import { getFilter } from "../../javascript/utils/filterUtils";
 
 const FilterItem = BridgeValue;
 
-describe('filterUtils', () => {
-  it('should parse flat filter', () => {
-    const filter = ['==', 'rating', 10];
-    expect(getFilter(filter)).toEqual(['==', 'rating', 10]);
+describe("filterUtils", () => {
+  it("should parse flat filter", () => {
+    const filter = ["==", "rating", 10];
+    expect(getFilter(filter)).toEqual(["==", "rating", 10]);
   });
 
-  it('should parse filter with array', () => {
+  it("should parse filter with array", () => {
     const filter = [
-      'all',
-      ['==', 'class', 'street_limited'],
-      ['>=', 'admin_level', 3],
-      ['==', 'enabled', true],
+      "all",
+      ["==", "class", "street_limited"],
+      [">=", "admin_level", 3],
+      ["==", "enabled", true],
     ];
     expect(getFilter(filter)).toEqual([
-      'all',
-      ['==', 'class', 'street_limited'],
-      ['>=', 'admin_level', 3],
-      ['==', 'enabled', true],
+      "all",
+      ["==", "class", "street_limited"],
+      [">=", "admin_level", 3],
+      ["==", "enabled", true],
     ]);
   });
 
-  it('should return empty array if filter type passed in is not an array', () => {
+  it("should return empty array if filter type passed in is not an array", () => {
     expect(getFilter()).toEqual([]);
     expect(getFilter(null)).toEqual([]);
     expect(getFilter({})).toEqual([]);
   });
 
-  it('should create boolean filter item', () => {
-    verifyFilterItem(new FilterItem(true), 'boolean', true);
-    verifyFilterItem(new FilterItem(false), 'boolean', false);
+  it("should create boolean filter item", () => {
+    verifyFilterItem(new FilterItem(true), "boolean", true);
+    verifyFilterItem(new FilterItem(false), "boolean", false);
   });
 
-  it('should create number filter item', () => {
-    verifyFilterItem(new FilterItem(0), 'number', 0);
-    verifyFilterItem(new FilterItem(1), 'number', 1);
-    verifyFilterItem(new FilterItem(100), 'number', 100);
+  it("should create number filter item", () => {
+    verifyFilterItem(new FilterItem(0), "number", 0);
+    verifyFilterItem(new FilterItem(1), "number", 1);
+    verifyFilterItem(new FilterItem(100), "number", 100);
   });
 
-  it('should create string filter item', () => {
-    verifyFilterItem(new FilterItem('0'), 'string', '0');
-    verifyFilterItem(new FilterItem('test'), 'string', 'test');
-    verifyFilterItem(new FilterItem('true'), 'string', 'true');
-    verifyFilterItem(new FilterItem('false'), 'string', 'false');
+  it("should create string filter item", () => {
+    verifyFilterItem(new FilterItem("0"), "string", "0");
+    verifyFilterItem(new FilterItem("test"), "string", "test");
+    verifyFilterItem(new FilterItem("true"), "string", "true");
+    verifyFilterItem(new FilterItem("false"), "string", "false");
   });
 
-  it('should throw error if the filter item is not a primitive', () => {
+  it("should throw error if the filter item is not a primitive", () => {
     verifyErrorFilterItem(undefined);
     verifyErrorFilterItem(null);
   });
diff --git a/app.plugin.js b/app.plugin.js
index e4c20f84e..f7ce2b554 100644
--- a/app.plugin.js
+++ b/app.plugin.js
@@ -1 +1 @@
-module.exports = require('./plugin/build/withMapLibre');
+module.exports = require("./plugin/build/withMapLibre");
diff --git a/babel.config.js b/babel.config.js
index 95dd5a64e..3930a81ef 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,9 +1,9 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],
+  presets: ["module:metro-react-native-babel-preset"],
+  plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
   env: {
     production: {
-      plugins: ['transform-remove-console'],
+      plugins: ["transform-remove-console"],
     },
   },
 };
diff --git a/packages/examples/src/examples/Animations/AnimatedLine.js b/packages/examples/src/examples/Animations/AnimatedLine.js
index 07af8dc19..408eacc70 100755
--- a/packages/examples/src/examples/Animations/AnimatedLine.js
+++ b/packages/examples/src/examples/Animations/AnimatedLine.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import {Easing, Button} from 'react-native';
-import {Animated, MapView, Camera} from '@maplibre/maplibre-react-native';
-import along from '@turf/along';
-import length from '@turf/length';
-import {point, lineString} from '@turf/helpers';
+import { Animated, MapView, Camera } from "@maplibre/maplibre-react-native";
+import along from "@turf/along";
+import { point, lineString } from "@turf/helpers";
+import length from "@turf/length";
+import React from "react";
+import { Easing, Button } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const blon = -73.99155;
 const blat = 40.73481;
@@ -20,21 +20,21 @@ const steps = 300;
 
 const styles = {
   lineLayerOne: {
-    lineCap: 'round',
+    lineCap: "round",
     lineWidth: 6,
     lineOpacity: 0.84,
-    lineColor: '#514ccd',
+    lineColor: "#514ccd",
   },
   circleLayer: {
     circleOpacity: 0.8,
-    circleColor: '#c62221',
+    circleColor: "#c62221",
     circleRadius: 20,
   },
   lineLayerTwo: {
-    lineCap: 'round',
+    lineCap: "round",
     lineWidth: 6,
     lineOpacity: 0.84,
-    lineColor: '#314ccd',
+    lineColor: "#314ccd",
   },
 };
 
@@ -50,7 +50,7 @@ class AnimatedLine extends React.Component {
     ]);
 
     this.state = {
-      backgroundColor: 'blue',
+      backgroundColor: "blue",
       coordinates: [[-73.99155, 40.73581]],
 
       shape: new Animated.CoordinatesArray(
@@ -60,7 +60,7 @@ class AnimatedLine extends React.Component {
         ]),
       ),
       targetPoint: {
-        type: 'FeatureCollection',
+        type: "FeatureCollection",
         features: [],
       },
       route,
@@ -175,25 +175,25 @@ class AnimatedLine extends React.Component {
   startAnimateRoute() {
     const vec = this.state.route.__getValue();
     const ls = {
-      type: 'LineString',
+      type: "LineString",
       coordinates: vec,
     };
-    const len = length(ls, {units: 'meters'});
+    const len = length(ls, { units: "meters" });
     let dest = len - 89.0;
     let pt;
     if (len === 0.0) {
-      const {originalRoute} = this.state.route;
-      dest = length(lineString(originalRoute), {units: 'meters'});
+      const { originalRoute } = this.state.route;
+      dest = length(lineString(originalRoute), { units: "meters" });
       pt = point(originalRoute[originalRoute.length - 1]);
     } else {
       if (dest < 0) {
         dest = 0;
       }
-      pt = along(ls, dest, {units: 'meters'});
+      pt = along(ls, dest, { units: "meters" });
     }
     this.state.route
       .timing({
-        toValue: {end: {point: pt}},
+        toValue: { end: { point: pt } },
         duration: 2000,
         easing: Easing.linear,
       })
@@ -204,31 +204,34 @@ class AnimatedLine extends React.Component {
     return (
       <Page>
         <MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           onDidFinishLoadingMap={this.onDidFinishLoadingMap}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <Camera zoomLevel={16} centerCoordinate={this.state.coordinates[0]} />
 
           <Animated.ShapeSource
-            id={'route'}
+            id="route"
             shape={
               new Animated.Shape({
-                type: 'LineString',
+                type: "LineString",
                 coordinates: this.state.route,
               })
-            }>
-            <Animated.LineLayer id={'lineroute'} style={styles.lineLayerOne} />
+            }
+          >
+            <Animated.LineLayer id="lineroute" style={styles.lineLayerOne} />
           </Animated.ShapeSource>
 
           <Animated.ShapeSource
             id="currentLocationSource"
             shape={
               new Animated.Shape({
-                type: 'Point',
+                type: "Point",
                 coordinates: this.state.actPoint,
               })
-            }>
+            }
+          >
             <Animated.CircleLayer
               id="currentLocationCircle"
               style={styles.circleLayer}
@@ -236,14 +239,15 @@ class AnimatedLine extends React.Component {
           </Animated.ShapeSource>
 
           <Animated.ShapeSource
-            id={'shape'}
+            id="shape"
             shape={
               new Animated.Shape({
-                type: 'LineString',
+                type: "LineString",
                 coordinates: this.state.shape,
               })
-            }>
-            <Animated.LineLayer id={'line'} style={styles.lineLayerTwo} />
+            }
+          >
+            <Animated.LineLayer id="line" style={styles.lineLayerTwo} />
           </Animated.ShapeSource>
         </MapView>
 
diff --git a/packages/examples/src/examples/Animations/DriveTheLine.js b/packages/examples/src/examples/Animations/DriveTheLine.js
index f8486cb42..850c1397e 100755
--- a/packages/examples/src/examples/Animations/DriveTheLine.js
+++ b/packages/examples/src/examples/Animations/DriveTheLine.js
@@ -1,30 +1,29 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {View, StyleSheet} from 'react-native';
-import {Button} from 'react-native-elements';
-import {lineString as makeLineString} from '@turf/helpers';
-import {point} from '@turf/helpers';
-
-import RouteSimulator from '../../utils/RouteSimulator';
-import sheet from '../../styles/sheet';
-import {SF_OFFICE_COORDINATE} from '../../utils';
-import Page from '../common/Page';
-import PulseCircleLayer from '../common/PulseCircleLayer';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import { lineString as makeLineString, point } from "@turf/helpers";
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Button } from "react-native-elements";
+
+import sheet from "../../styles/sheet";
+import { SF_OFFICE_COORDINATE } from "../../utils";
+import RouteSimulator from "../../utils/RouteSimulator";
+import Page from "../common/Page";
+import PulseCircleLayer from "../common/PulseCircleLayer";
 
 const SF_ZOO_COORDINATE = [-122.505412, 37.737463];
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: 'blue',
+    backgroundColor: "blue",
     borderRadius: 3,
   },
   buttonCnt: {
-    backgroundColor: 'transparent',
+    backgroundColor: "transparent",
     bottom: 16,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
+    flexDirection: "row",
+    justifyContent: "space-around",
     left: 0,
-    position: 'absolute',
+    position: "absolute",
     right: 0,
   },
 });
@@ -32,20 +31,20 @@ const styles = StyleSheet.create({
 const layerStyles = {
   origin: {
     circleRadius: 5,
-    circleColor: 'white',
+    circleColor: "white",
   },
   destination: {
     circleRadius: 5,
-    circleColor: 'white',
+    circleColor: "white",
   },
   route: {
-    lineColor: 'white',
+    lineColor: "white",
     lineCap: MapLibreGL.LineJoin.Round,
     lineWidth: 3,
     lineOpacity: 0.84,
   },
   progress: {
-    lineColor: '#314ccd',
+    lineColor: "#314ccd",
     lineWidth: 3,
   },
 };
@@ -65,9 +64,11 @@ class DriveTheLine extends React.Component {
 
   onStart() {
     const routeSimulator = new RouteSimulator(this.state.route);
-    routeSimulator.addListener(currentPoint => this.setState({currentPoint}));
+    routeSimulator.addListener((currentPoint) =>
+      this.setState({ currentPoint }),
+    );
     routeSimulator.start();
-    this.setState({routeSimulator});
+    this.setState({ routeSimulator });
   }
 
   async componentDidMount() {
@@ -129,7 +130,7 @@ class DriveTheLine extends React.Component {
       return null;
     }
 
-    const {nearestIndex} = this.state.currentPoint.properties;
+    const { nearestIndex } = this.state.currentPoint.properties;
     const coords = this.state.route.geometry.coordinates.filter(
       (c, i) => i <= nearestIndex,
     );
@@ -152,13 +153,13 @@ class DriveTheLine extends React.Component {
   }
 
   renderOrigin() {
-    let backgroundColor = 'white';
+    let backgroundColor = "white";
 
     if (this.state.currentPoint) {
-      backgroundColor = '#314ccd';
+      backgroundColor = "#314ccd";
     }
 
-    const style = [layerStyles.origin, {circleColor: backgroundColor}];
+    const style = [layerStyles.origin, { circleColor: backgroundColor }];
 
     return (
       <MapLibreGL.ShapeSource id="origin" shape={point(SF_OFFICE_COORDINATE)}>
@@ -188,9 +189,10 @@ class DriveTheLine extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           style={sheet.matchParent}
-          styleURL={MapLibreGL.StyleURL.Default}>
+          styleURL={MapLibreGL.StyleURL.Default}
+        >
           <MapLibreGL.Camera
             zoomLevel={11}
             centerCoordinate={[-122.452652, 37.762963]}
@@ -204,7 +206,8 @@ class DriveTheLine extends React.Component {
 
           <MapLibreGL.ShapeSource
             id="destination"
-            shape={point(SF_ZOO_COORDINATE)}>
+            shape={point(SF_ZOO_COORDINATE)}
+          >
             <MapLibreGL.CircleLayer
               id="destinationInnerCircle"
               style={layerStyles.destination}
diff --git a/packages/examples/src/examples/Annotations/Heatmap.js b/packages/examples/src/examples/Annotations/Heatmap.js
index c83b27d82..fe0336847 100644
--- a/packages/examples/src/examples/Annotations/Heatmap.js
+++ b/packages/examples/src/examples/Annotations/Heatmap.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import {SF_OFFICE_COORDINATE} from '../../utils';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import { SF_OFFICE_COORDINATE } from "../../utils";
+import Page from "../common/Page";
 
 function Heatmap() {
   return (
@@ -16,27 +16,28 @@ function Heatmap() {
 
         <MapLibreGL.ShapeSource
           id="earthquakes"
-          url="https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson">
+          url="https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+        >
           <MapLibreGL.HeatmapLayer
             id="earthquakes"
             sourceID="earthquakes"
             style={{
               heatmapColor: [
-                'interpolate',
-                ['linear'],
-                ['heatmap-density'],
+                "interpolate",
+                ["linear"],
+                ["heatmap-density"],
                 0,
-                'rgba(33,102,172,0)',
+                "rgba(33,102,172,0)",
                 0.2,
-                'rgb(103,169,207)',
+                "rgb(103,169,207)",
                 0.4,
-                'rgb(209,229,240)',
+                "rgb(209,229,240)",
                 0.6,
-                'rgb(253,219,199)',
+                "rgb(253,219,199)",
                 0.8,
-                'rgb(239,138,98)',
+                "rgb(239,138,98)",
                 1,
-                'rgb(178,24,43)',
+                "rgb(178,24,43)",
               ],
             }}
           />
diff --git a/packages/examples/src/examples/Annotations/MarkerView.js b/packages/examples/src/examples/Annotations/MarkerView.js
index a15eec908..e833918fe 100644
--- a/packages/examples/src/examples/Annotations/MarkerView.js
+++ b/packages/examples/src/examples/Annotations/MarkerView.js
@@ -1,29 +1,29 @@
-import React from 'react';
-import {View, Text, TouchableOpacity} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import PropTypes from 'prop-types';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import PropTypes from "prop-types";
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
-  touchableContainer: {borderColor: 'black', borderWidth: 1.0, width: 60},
+  touchableContainer: { borderColor: "black", borderWidth: 1.0, width: 60 },
   touchable: {
-    backgroundColor: 'blue',
+    backgroundColor: "blue",
     width: 40,
     height: 40,
     borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
   touchableText: {
-    color: 'white',
-    fontWeight: 'bold',
+    color: "white",
+    fontWeight: "bold",
   },
 };
 
-const AnnotationContent = ({title}) => (
+const AnnotationContent = ({ title }) => (
   <View style={styles.touchableContainer}>
     <Text>{title}</Text>
     <TouchableOpacity style={styles.touchable}>
@@ -40,7 +40,7 @@ class ShowMarkerView extends React.Component {
     super(props);
 
     this.state = {
-      backgroundColor: 'blue',
+      backgroundColor: "blue",
       coordinates: [
         [-73.99155, 40.73581],
         [-73.99155, 40.73681],
@@ -52,10 +52,11 @@ class ShowMarkerView extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           onDidFinishLoadingMap={this.onDidFinishLoadingMap}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera
             zoomLevel={16}
             centerCoordinate={this.state.coordinates[0]}
@@ -63,12 +64,13 @@ class ShowMarkerView extends React.Component {
 
           <MapLibreGL.PointAnnotation
             coordinate={this.state.coordinates[1]}
-            id="pt-ann">
-            <AnnotationContent title={'this is a point annotation'} />
+            id="pt-ann"
+          >
+            <AnnotationContent title="this is a point annotation" />
           </MapLibreGL.PointAnnotation>
 
           <MapLibreGL.MarkerView coordinate={this.state.coordinates[0]}>
-            <AnnotationContent title={'this is a marker view'} />
+            <AnnotationContent title="this is a marker view" />
           </MapLibreGL.MarkerView>
         </MapLibreGL.MapView>
 
diff --git a/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js b/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js
index 119614a49..21b3b82eb 100644
--- a/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js
+++ b/packages/examples/src/examples/Annotations/PointAnnotationAnchors.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {StyleSheet, Text, View} from 'react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const ANNOTATION_SIZE = 50;
 
@@ -15,62 +15,62 @@ const defaultCamera = {
 const corners = [
   {
     coordinate: [-73.980313714175, 40.75279456928388],
-    anchor: {x: 0, y: 1},
+    anchor: { x: 0, y: 1 },
   },
   {
     coordinate: [-73.9803415496257, 40.75275624885313],
-    anchor: {x: 0, y: 0},
+    anchor: { x: 0, y: 0 },
   },
   {
     coordinate: [-73.98048535932631, 40.752816154647235],
-    anchor: {x: 1, y: 0},
+    anchor: { x: 1, y: 0 },
   },
   {
     coordinate: [-73.98045541426053, 40.75285444197175],
-    anchor: {x: 1, y: 1},
+    anchor: { x: 1, y: 1 },
   },
 ];
 
 const sides = [
   {
     coordinate: [-73.97952569308393, 40.75274356459241],
-    anchor: {x: 1 / 3, y: 0},
+    anchor: { x: 1 / 3, y: 0 },
   },
   {
     coordinate: [-73.98082017858928, 40.75329086324669],
-    anchor: {x: 1 / 3, y: 1},
+    anchor: { x: 1 / 3, y: 1 },
   },
   {
     coordinate: [-73.97985980165191, 40.752286242917535],
-    anchor: {x: 0, y: 1 / 3},
-    containerStyle: {flexDirection: 'row'},
+    anchor: { x: 0, y: 1 / 3 },
+    containerStyle: { flexDirection: "row" },
   },
 ];
 
 const styles = StyleSheet.create({
   small: {
-    backgroundColor: 'blue',
+    backgroundColor: "blue",
     height: ANNOTATION_SIZE,
-    justifyContent: 'center',
+    justifyContent: "center",
     width: ANNOTATION_SIZE,
     flex: 1,
   },
   large: {
-    borderColor: 'blue',
-    backgroundColor: 'transparent',
+    borderColor: "blue",
+    backgroundColor: "transparent",
     borderWidth: StyleSheet.hairlineWidth,
     height: ANNOTATION_SIZE * 2,
-    justifyContent: 'center',
+    justifyContent: "center",
     width: ANNOTATION_SIZE * 2,
     flex: 1,
   },
   text: {
-    position: 'absolute',
+    position: "absolute",
     fontSize: 10,
   },
 });
 
-const PointAnnotationAnchors = props => {
+const PointAnnotationAnchors = (props) => {
   return (
     <Page {...props}>
       <MapLibreGL.MapView style={sheet.matchParent}>
@@ -80,16 +80,17 @@ const PointAnnotationAnchors = props => {
             key={`square-${i}`}
             id={`square-${i}`}
             coordinate={p.coordinate}
-            anchor={p.anchor}>
+            anchor={p.anchor}
+          >
             <View style={styles.small}>
-              <Text style={[styles.text, {color: 'white'}]}>
+              <Text style={[styles.text, { color: "white" }]}>
                 x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
               </Text>
             </View>
           </MapLibreGL.PointAnnotation>
         ))}
         {sides.map((p, i) => {
-          let {x, y} = p.anchor;
+          let { x, y } = p.anchor;
           if (x === 1) {
             x = 0;
           }
@@ -101,23 +102,24 @@ const PointAnnotationAnchors = props => {
               key={`triangle-${i}`}
               id={`triangle-${i}`}
               coordinate={p.coordinate}
-              anchor={p.anchor}>
+              anchor={p.anchor}
+            >
               <View style={[styles.large, p.containerStyle]}>
                 <View
                   style={{
                     height: ANNOTATION_SIZE * 2,
                     width: ANNOTATION_SIZE * 2 * x,
-                    backgroundColor: 'green',
+                    backgroundColor: "green",
                   }}
                 />
                 <View
                   style={{
                     height: ANNOTATION_SIZE * 2 * y,
                     width: ANNOTATION_SIZE * 2,
-                    backgroundColor: 'green',
+                    backgroundColor: "green",
                   }}
                 />
-                <Text style={[styles.text, {color: 'black'}]}>
+                <Text style={[styles.text, { color: "black" }]}>
                   x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
                 </Text>
               </View>
diff --git a/packages/examples/src/examples/Annotations/ShowPointAnnotation.js b/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
index fca3ab885..1d09dfe59 100755
--- a/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
+++ b/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
@@ -1,24 +1,24 @@
-import React from 'react';
-import {Animated, View, Text, StyleSheet, Image} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import PropTypes from 'prop-types';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import PropTypes from "prop-types";
+import React from "react";
+import { Animated, View, Text, StyleSheet, Image } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const ANNOTATION_SIZE = 45;
 
 const styles = StyleSheet.create({
   annotationContainer: {
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderColor: 'rgba(0, 0, 0, 0.45)',
+    alignItems: "center",
+    backgroundColor: "white",
+    borderColor: "rgba(0, 0, 0, 0.45)",
     borderRadius: ANNOTATION_SIZE / 2,
     borderWidth: StyleSheet.hairlineWidth,
     height: ANNOTATION_SIZE,
-    justifyContent: 'center',
-    overflow: 'hidden',
+    justifyContent: "center",
+    overflow: "hidden",
     width: ANNOTATION_SIZE,
   },
 });
@@ -27,27 +27,28 @@ class AnnotationWithRemoteImage extends React.Component {
   annotationRef = null;
 
   render() {
-    const {id, coordinate, title} = this.props;
+    const { id, coordinate, title } = this.props;
     return (
       <MapLibreGL.PointAnnotation
         id={id}
         coordinate={coordinate}
         title={title}
         draggable
-        onDrag={e =>
-          console.log('onDrag:', e.properties.id, e.geometry.coordinates)
+        onDrag={(e) =>
+          console.log("onDrag:", e.properties.id, e.geometry.coordinates)
         }
-        onDragStart={e =>
-          console.log('onDragStart:', e.properties.id, e.geometry.coordinates)
+        onDragStart={(e) =>
+          console.log("onDragStart:", e.properties.id, e.geometry.coordinates)
         }
-        onDragEnd={e =>
-          console.log('onDragEnd:', e.properties.id, e.geometry.coordinates)
+        onDragEnd={(e) =>
+          console.log("onDragEnd:", e.properties.id, e.geometry.coordinates)
         }
-        ref={ref => (this.annotationRef = ref)}>
+        ref={(ref) => (this.annotationRef = ref)}
+      >
         <View style={styles.annotationContainer}>
           <Image
-            source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
-            style={{width: ANNOTATION_SIZE, height: ANNOTATION_SIZE}}
+            source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
+            style={{ width: ANNOTATION_SIZE, height: ANNOTATION_SIZE }}
             onLoad={() => this.annotationRef.refresh()}
           />
         </View>
@@ -70,7 +71,7 @@ class ShowPointAnnotation extends React.Component {
       activeAnnotationIndex: -1,
       previousActiveAnnotationIndex: -1,
 
-      backgroundColor: 'blue',
+      backgroundColor: "blue",
       coordinates: [[-73.99155, 40.73581]],
     };
 
@@ -83,7 +84,7 @@ class ShowPointAnnotation extends React.Component {
   onPress(feature) {
     const coords = Object.assign([], this.state.coordinates);
     coords.push(feature.geometry.coordinates);
-    this.setState({coordinates: coords});
+    this.setState({ coordinates: coords });
   }
 
   onAnnotationSelected(activeIndex, feature) {
@@ -92,8 +93,8 @@ class ShowPointAnnotation extends React.Component {
     }
 
     this._scaleIn = new Animated.Value(0.6);
-    Animated.timing(this._scaleIn, {toValue: 1.0, duration: 200}).start();
-    this.setState({activeAnnotationIndex: activeIndex});
+    Animated.timing(this._scaleIn, { toValue: 1.0, duration: 200 }).start();
+    this.setState({ activeAnnotationIndex: activeIndex });
 
     if (this.state.previousActiveAnnotationIndex !== -1) {
       this._map.moveTo(feature.geometry.coordinates, 500);
@@ -108,7 +109,7 @@ class ShowPointAnnotation extends React.Component {
     }
 
     this._scaleOut = new Animated.Value(1);
-    Animated.timing(this._scaleOut, {toValue: 0.6, duration: 200}).start();
+    Animated.timing(this._scaleOut, { toValue: 0.6, duration: 200 }).start();
     nextState.previousActiveAnnotationIndex = deselectedIndex;
     this.setState(nextState);
   }
@@ -124,9 +125,9 @@ class ShowPointAnnotation extends React.Component {
 
       const animationStyle = {};
       if (i === this.state.activeAnnotationIndex) {
-        animationStyle.transform = [{scale: this._scaleIn}];
+        animationStyle.transform = [{ scale: this._scaleIn }];
       } else if (i === this.state.previousActiveAnnotationIndex) {
-        animationStyle.transform = [{scale: this._scaleOut}];
+        animationStyle.transform = [{ scale: this._scaleOut }];
       }
 
       if (i % 2 === 1) {
@@ -144,7 +145,8 @@ class ShowPointAnnotation extends React.Component {
             key={id}
             id={id}
             coordinate={coordinate}
-            title={title}>
+            title={title}
+          >
             <View style={styles.annotationContainer} />
             <MapLibreGL.Callout title="This is a sample with image" />
           </MapLibreGL.PointAnnotation>,
@@ -159,10 +161,11 @@ class ShowPointAnnotation extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           onDidFinishLoadingMap={this.onDidFinishLoadingMap}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera
             zoomLevel={16}
             centerCoordinate={this.state.coordinates[0]}
diff --git a/packages/examples/src/examples/BugReportPage.js b/packages/examples/src/examples/BugReportPage.js
index d0847a0f7..0a22e460a 100644
--- a/packages/examples/src/examples/BugReportPage.js
+++ b/packages/examples/src/examples/BugReportPage.js
@@ -1,57 +1,57 @@
-import React from 'react';
-import {Button} from 'react-native';
 import {
   MapView,
   ShapeSource,
   SymbolLayer,
   CircleLayer,
   Camera,
-} from '@maplibre/maplibre-react-native';
+} from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Button } from "react-native";
 
-import Page from './common/Page';
+import Page from "./common/Page";
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
   circleLayer: {
-    circleRadiusTransition: {duration: 5000, delay: 0},
-    circleColor: '#ff0000',
+    circleRadiusTransition: { duration: 5000, delay: 0 },
+    circleColor: "#ff0000",
   },
 };
 
 const features = {
-  type: 'FeatureCollection',
+  type: "FeatureCollection",
   features: [
     {
-      type: 'Feature',
-      id: 'a-feature',
+      type: "Feature",
+      id: "a-feature",
       properties: {
-        icon: 'example',
-        text: 'example-icon-and-label',
+        icon: "example",
+        text: "example-icon-and-label",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-74.00597, 40.71427],
       },
     },
     {
-      type: 'Feature',
-      id: 'b-feature',
+      type: "Feature",
+      id: "b-feature",
       properties: {
-        text: 'just-label',
+        text: "just-label",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-74.001097, 40.71527],
       },
     },
     {
-      type: 'Feature',
-      id: 'c-feature',
+      type: "Feature",
+      id: "c-feature",
       properties: {
-        icon: 'example',
+        icon: "example",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-74.00697, 40.72427],
       },
     },
@@ -66,23 +66,23 @@ class BugReportPage extends React.Component {
   render() {
     const circleLayerStyle = {
       ...styles.circleLayer,
-      ...{circleRadius: this.state.radius},
+      ...{ circleRadius: this.state.radius },
     };
 
     return (
       <Page>
         <Button
           title="Grow"
-          onPress={() => this.setState({radius: this.state.radius + 20})}
+          onPress={() => this.setState({ radius: this.state.radius + 20 })}
         />
         <MapView style={styles.mapView}>
           <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
-          <ShapeSource id={'shape-source-id-0'} shape={features}>
-            <CircleLayer id={'circle-layer'} style={circleLayerStyle} />
+          <ShapeSource id="shape-source-id-0" shape={features}>
+            <CircleLayer id="circle-layer" style={circleLayerStyle} />
             <SymbolLayer
               id="symbol-id"
               style={{
-                iconImage: ['get', 'icon'],
+                iconImage: ["get", "icon"],
               }}
             />
           </ShapeSource>
diff --git a/packages/examples/src/examples/CacheManagement.js b/packages/examples/src/examples/CacheManagement.js
index a01c8b43b..37b9ca95f 100755
--- a/packages/examples/src/examples/CacheManagement.js
+++ b/packages/examples/src/examples/CacheManagement.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import MapLibreGL, {MapView, Camera} from '@maplibre/maplibre-react-native';
+import MapLibreGL, { MapView, Camera } from "@maplibre/maplibre-react-native";
+import React from "react";
 import {
   Alert,
   StyleSheet,
@@ -7,64 +7,63 @@ import {
   TextInput,
   TouchableOpacity,
   Text,
-} from 'react-native';
+} from "react-native";
 
-import sheet from '../styles/sheet';
-import {DEFAULT_CENTER_COORDINATE} from '../utils';
-
-import Page from './common/Page';
+import sheet from "../styles/sheet";
+import { DEFAULT_CENTER_COORDINATE } from "../utils";
+import Page from "./common/Page";
 
 const styles = StyleSheet.create({
   button: {
-    alignItems: 'center',
-    backgroundColor: 'blue',
+    alignItems: "center",
+    backgroundColor: "blue",
     borderRadius: 3,
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 8,
-    width: '100%',
+    width: "100%",
   },
   buttonTxt: {
-    color: 'white',
-    textAlign: 'center',
+    color: "white",
+    textAlign: "center",
   },
   control: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     margin: 16,
     padding: 8,
-    width: '40%',
+    width: "40%",
   },
   controlsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
   },
   textInput: {
-    borderBottomColor: 'grey',
+    borderBottomColor: "grey",
     borderBottomWidth: 1,
     marginBottom: 8,
     padding: 8,
-    width: '100%',
+    width: "100%",
   },
 });
 
 class CacheManagement extends React.Component {
   state = {
-    cacheSize: '',
+    cacheSize: "",
   };
 
   invalidateAmbientCache = async () => {
     await MapLibreGL.offlineManager.invalidateAmbientCache();
-    Alert.alert('Ambient cache successfully invalidated');
+    Alert.alert("Ambient cache successfully invalidated");
   };
 
   resetDatabase = async () => {
     await MapLibreGL.offlineManager.resetDatabase();
-    Alert.alert('Database successfully reset');
+    Alert.alert("Database successfully reset");
   };
 
   clearAmbientCache = async () => {
     await MapLibreGL.offlineManager.clearAmbientCache();
-    Alert.alert('Ambient cache successfully cleared');
+    Alert.alert("Ambient cache successfully cleared");
   };
 
   setMaximumAmbientCacheSize = async () => {
@@ -73,15 +72,15 @@ class CacheManagement extends React.Component {
     Alert.alert(`Max cache size successfully set to ${newMaxSize} bytes`);
   };
 
-  validateCacheInputValue = value => !isNaN(parseInt(value, 10));
+  validateCacheInputValue = (value) => !isNaN(parseInt(value, 10));
 
-  onChangeCacheSize = cacheSize => this.setState({cacheSize});
+  onChangeCacheSize = (cacheSize) => this.setState({ cacheSize });
 
   render() {
     const validSizeValue = this.validateCacheInputValue(this.state.cacheSize);
     const buttonStyles = validSizeValue
       ? styles.button
-      : [styles.button, {backgroundColor: 'grey'}];
+      : [styles.button, { backgroundColor: "grey" }];
 
     return (
       <Page>
@@ -94,7 +93,8 @@ class CacheManagement extends React.Component {
             <View style={styles.control}>
               <TouchableOpacity
                 onPress={this.invalidateAmbientCache}
-                style={styles.button}>
+                style={styles.button}
+              >
                 <Text style={styles.buttonTxt}>Invalidate cache</Text>
               </TouchableOpacity>
             </View>
@@ -102,7 +102,8 @@ class CacheManagement extends React.Component {
             <View style={styles.control}>
               <TouchableOpacity
                 onPress={this.resetDatabase}
-                style={styles.button}>
+                style={styles.button}
+              >
                 <Text style={styles.buttonTxt}>Reset database</Text>
               </TouchableOpacity>
             </View>
@@ -118,7 +119,8 @@ class CacheManagement extends React.Component {
               <TouchableOpacity
                 onPress={this.setMaximumAmbientCacheSize}
                 style={buttonStyles}
-                disabled={!validSizeValue}>
+                disabled={!validSizeValue}
+              >
                 <Text style={styles.buttonTxt}>Set ambient max cache</Text>
               </TouchableOpacity>
             </View>
@@ -126,7 +128,8 @@ class CacheManagement extends React.Component {
             <View style={styles.control}>
               <TouchableOpacity
                 onPress={this.clearAmbientCache}
-                style={styles.button}>
+                style={styles.button}
+              >
                 <Text style={styles.buttonTxt}>Clear ambient cache</Text>
               </TouchableOpacity>
             </View>
diff --git a/packages/examples/src/examples/Camera/CompassView.js b/packages/examples/src/examples/Camera/CompassView.js
index 33acce3a0..ddb40f67f 100644
--- a/packages/examples/src/examples/Camera/CompassView.js
+++ b/packages/examples/src/examples/Camera/CompassView.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import {MapView, Camera} from '@maplibre/maplibre-react-native';
+import { MapView, Camera } from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 function CompassView() {
   return (
@@ -11,7 +11,8 @@ function CompassView() {
         style={sheet.matchParent}
         compassEnabled
         logoEnabled={false}
-        compassViewPosition={2}>
+        compassViewPosition={2}
+      >
         <Camera heading={21} />
       </MapView>
     </Page>
diff --git a/packages/examples/src/examples/Camera/Fit.js b/packages/examples/src/examples/Camera/Fit.js
index 70fa84a8c..7cf6312c2 100755
--- a/packages/examples/src/examples/Camera/Fit.js
+++ b/packages/examples/src/examples/Camera/Fit.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import {View, Text} from 'react-native';
-import {isEqual} from 'lodash';
-import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import { isEqual } from "lodash";
+import React from "react";
+import { View, Text } from "react-native";
+import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const buildPadding = ([top, right, bottom, left] = [0, 0, 0, 0]) => {
   return {
@@ -44,7 +44,7 @@ class Fit extends React.Component {
     super(props);
 
     this.state = {
-      locationType: 'houseCenter', // houseCenter | houseBounds | townCenter | townBounds
+      locationType: "houseCenter", // houseCenter | houseBounds | townCenter | townBounds
       zoomLevel: 16, // number
       followUserLocation: false,
       padding: paddingZero,
@@ -59,7 +59,7 @@ class Fit extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const changed = stateKey => {
+    const changed = (stateKey) => {
       // Checking if final state is `undefined` prevents another round of zeroing out in
       // second `componentDidUpdate` call.
       return (
@@ -68,7 +68,7 @@ class Fit extends React.Component {
       );
     };
 
-    if (changed('followUserLocation') && this.state.followUserLocation) {
+    if (changed("followUserLocation") && this.state.followUserLocation) {
       this.setState({
         locationType: undefined,
         zoomLevel: undefined,
@@ -78,12 +78,12 @@ class Fit extends React.Component {
       return;
     }
 
-    if (changed('locationType') || changed('zoomLevel') || changed('padding')) {
+    if (changed("locationType") || changed("zoomLevel") || changed("padding")) {
       this.setState({
         cachedFlyTo: undefined,
         cachedZoomLevel: undefined,
       });
-    } else if (changed('cachedFlyTo') || changed('cachedZoomLevel')) {
+    } else if (changed("cachedFlyTo") || changed("cachedZoomLevel")) {
       this.setState({
         locationType: undefined,
         zoomLevel: undefined,
@@ -94,27 +94,29 @@ class Fit extends React.Component {
 
   renderSection = (title, buttons, fade = false) => {
     return (
-      <View style={{paddingBottom: 5, opacity: fade ? 0.5 : 1}}>
+      <View style={{ paddingBottom: 5, opacity: fade ? 0.5 : 1 }}>
         <Text>{title}</Text>
         <ScrollView
-          horizontal={true}
+          horizontal
           style={{
             flex: 0,
-            flexDirection: 'row',
-            width: '100%',
+            flexDirection: "row",
+            width: "100%",
             paddingVertical: 10,
-          }}>
-          {buttons.map(button => (
+          }}
+        >
+          {buttons.map((button) => (
             <TouchableOpacity
               key={button.title}
               style={{
                 flex: 0,
                 padding: 5,
                 marginRight: 5,
-                backgroundColor: button.selected ? 'coral' : '#d8d8d8',
+                backgroundColor: button.selected ? "coral" : "#d8d8d8",
                 borderRadius: 5,
               }}
-              onPress={button.onPress}>
+              onPress={button.onPress}
+            >
               <Text>{button.title}</Text>
             </TouchableOpacity>
           ))}
@@ -132,7 +134,7 @@ class Fit extends React.Component {
       animationDuration,
     } = this.state;
 
-    let p = {
+    const p = {
       bounds: undefined,
       centerCoordinate: undefined,
       zoomLevel: undefined,
@@ -141,13 +143,13 @@ class Fit extends React.Component {
       animationDuration,
     };
 
-    if (locationType === 'houseCenter') {
+    if (locationType === "houseCenter") {
       p.centerCoordinate = houseCenter;
-    } else if (locationType === 'houseBounds') {
+    } else if (locationType === "houseBounds") {
       p.bounds = houseBounds;
-    } else if (locationType === 'townCenter') {
+    } else if (locationType === "townCenter") {
       p.centerCoordinate = townCenter;
-    } else if (locationType === 'townBounds') {
+    } else if (locationType === "townBounds") {
       p.bounds = townBounds;
     }
 
@@ -168,37 +170,39 @@ class Fit extends React.Component {
       cachedZoomLevel,
     } = this.state;
 
-    const centerIsSet = locationType?.toLowerCase().includes('center');
+    const centerIsSet = locationType?.toLowerCase().includes("center");
 
     const locationTypeButtons = [
-      ['House (center)', 'houseCenter'],
-      ['House (bounds)', 'houseBounds'],
-      ['Town (center)', 'townCenter'],
-      ['Town (bounds)', 'townBounds'],
-      ['undef', undefined],
-    ].map(o => {
+      ["House (center)", "houseCenter"],
+      ["House (bounds)", "houseBounds"],
+      ["Town (center)", "townCenter"],
+      ["Town (bounds)", "townBounds"],
+      ["undef", undefined],
+    ].map((o) => {
       return {
         title: `${o[0]}`,
         selected: locationType === o[1],
-        onPress: () => this.setState({locationType: o[1]}),
+        onPress: () => this.setState({ locationType: o[1] }),
       };
     });
 
-    const zoomConfigButtons = [14, 15, 16, 17, 18, 19, 20, undefined].map(n => {
-      return {
-        title: n ? `${n}` : 'undef',
-        selected: zoomLevel === n,
-        onPress: () => this.setState({zoomLevel: n}),
-      };
-    });
+    const zoomConfigButtons = [14, 15, 16, 17, 18, 19, 20, undefined].map(
+      (n) => {
+        return {
+          title: n ? `${n}` : "undef",
+          selected: zoomLevel === n,
+          onPress: () => this.setState({ zoomLevel: n }),
+        };
+      },
+    );
 
-    const zoomToButtons = [14, 15, 16, 17, 18, 19, 20].map(n => {
+    const zoomToButtons = [14, 15, 16, 17, 18, 19, 20].map((n) => {
       return {
         title: `${n}`,
         selected: cachedZoomLevel === n,
         onPress: () => {
           this.camera.zoomTo(n, 1000);
-          this.setState({cachedZoomLevel: n});
+          this.setState({ cachedZoomLevel: n });
         },
       };
     });
@@ -207,81 +211,83 @@ class Fit extends React.Component {
       <Page>
         <MapLibreGL.MapView
           styleURL={MapLibreGL.StyleURL.Default}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera
-            ref={ref => (this.camera = ref)}
+            ref={(ref) => (this.camera = ref)}
             {...this.cameraProps()}
           />
-          <View style={{flex: 1, ...padding}}>
-            <View style={{flex: 1, borderColor: 'white', borderWidth: 4}} />
+          <View style={{ flex: 1, ...padding }}>
+            <View style={{ flex: 1, borderColor: "white", borderWidth: 4 }} />
           </View>
         </MapLibreGL.MapView>
 
         <ScrollView
           style={{
             flex: 0,
-            width: '100%',
+            width: "100%",
             maxHeight: 350,
-            backgroundColor: 'white',
+            backgroundColor: "white",
           }}
           contentContainerStyle={{
             padding: 10,
             paddingBottom: 20,
-          }}>
-          {this.renderSection('Location type', locationTypeButtons)}
+          }}
+        >
+          {this.renderSection("Location type", locationTypeButtons)}
 
           {this.renderSection(
-            'Zoom' +
-              (centerIsSet ? '' : ' (only used if center coordinate is set)'),
+            "Zoom" +
+              (centerIsSet ? "" : " (only used if center coordinate is set)"),
             zoomConfigButtons,
             !centerIsSet,
           )}
 
-          {this.renderSection('Follow user location', [
+          {this.renderSection("Follow user location", [
             {
-              title: followUserLocation ? 'Enabled' : 'Disabled',
+              title: followUserLocation ? "Enabled" : "Disabled",
               selected: followUserLocation,
               onPress: () =>
-                this.setState({followUserLocation: !followUserLocation}),
+                this.setState({ followUserLocation: !followUserLocation }),
             },
           ])}
 
-          {this.renderSection('Fly to (imperative)', [
+          {this.renderSection("Fly to (imperative)", [
             {
-              title: 'House',
-              selected: cachedFlyTo === 'house',
+              title: "House",
+              selected: cachedFlyTo === "house",
               onPress: () => {
                 this.camera.flyTo(houseCenter);
-                this.setState({cachedFlyTo: 'house'});
+                this.setState({ cachedFlyTo: "house" });
               },
             },
             {
-              title: 'Town',
-              selected: cachedFlyTo === 'town',
+              title: "Town",
+              selected: cachedFlyTo === "town",
               onPress: () => {
                 this.camera.flyTo(townCenter);
-                this.setState({cachedFlyTo: 'town'});
+                this.setState({ cachedFlyTo: "town" });
               },
             },
           ])}
 
-          {this.renderSection('Zoom to (imperative)', zoomToButtons)}
+          {this.renderSection("Zoom to (imperative)", zoomToButtons)}
 
-          {this.renderSection('Padding', [
+          {this.renderSection("Padding", [
             {
-              title: 'None',
+              title: "None",
               selected: isEqual(padding, paddingZero),
-              onPress: () => this.setState({padding: paddingZero}),
+              onPress: () => this.setState({ padding: paddingZero }),
             },
             {
-              title: 'Top',
+              title: "Top",
               selected: isEqual(padding, paddingTop),
-              onPress: () => this.setState({padding: paddingTop}),
+              onPress: () => this.setState({ padding: paddingTop }),
             },
             {
-              title: 'Bottom',
+              title: "Bottom",
               selected: isEqual(padding, paddingBottom),
-              onPress: () => this.setState({padding: paddingBottom}),
+              onPress: () => this.setState({ padding: paddingBottom }),
             },
           ])}
         </ScrollView>
diff --git a/packages/examples/src/examples/Camera/FlyTo.js b/packages/examples/src/examples/Camera/FlyTo.js
index 7f1bbbce4..894b3312a 100755
--- a/packages/examples/src/examples/Camera/FlyTo.js
+++ b/packages/examples/src/examples/Camera/FlyTo.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import {Alert} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Alert } from "react-native";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
 class FlyTo extends React.Component {
   static SF_OFFICE_LOCATION = [-122.400021, 37.789085];
@@ -22,11 +22,11 @@ class FlyTo extends React.Component {
     };
 
     this._flyToOptions = [
-      {label: 'SF', data: FlyTo.SF_OFFICE_LOCATION},
-      {label: 'DC', data: FlyTo.DC_OFFICE_LOCATION},
-      {label: '0,0', data: FlyTo.ZERO_ZERO},
-      {label: '0,10', data: FlyTo.ZERO_TEN},
-      {label: '10,0', data: FlyTo.TEN_ZERO},
+      { label: "SF", data: FlyTo.SF_OFFICE_LOCATION },
+      { label: "DC", data: FlyTo.DC_OFFICE_LOCATION },
+      { label: "0,0", data: FlyTo.ZERO_ZERO },
+      { label: "0,10", data: FlyTo.ZERO_TEN },
+      { label: "10,0", data: FlyTo.TEN_ZERO },
     ];
 
     this.onFlyToPress = this.onFlyToPress.bind(this);
@@ -34,11 +34,11 @@ class FlyTo extends React.Component {
   }
 
   onFlyToPress(i) {
-    this.setState({location: this._flyToOptions[i].data});
+    this.setState({ location: this._flyToOptions[i].data });
   }
 
   onFlyToComplete() {
-    Alert.alert('Fly To Animation Completed', 'We did it!!!');
+    Alert.alert("Fly To Animation Completed", "We did it!!!");
   }
 
   render() {
@@ -46,11 +46,12 @@ class FlyTo extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._flyToOptions}
-        onOptionPress={this.onFlyToPress}>
+        onOptionPress={this.onFlyToPress}
+      >
         <MapLibreGL.MapView style={sheet.matchParent}>
           <MapLibreGL.Camera
             zoomLevel={6}
-            animationMode={'flyTo'}
+            animationMode="flyTo"
             animationDuration={6000}
             centerCoordinate={this.state.location}
           />
diff --git a/packages/examples/src/examples/Camera/GetCenter.js b/packages/examples/src/examples/Camera/GetCenter.js
index b74bf29cf..a27bb28ed 100755
--- a/packages/examples/src/examples/Camera/GetCenter.js
+++ b/packages/examples/src/examples/Camera/GetCenter.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class GetCenter extends React.Component {
@@ -24,17 +24,17 @@ class GetCenter extends React.Component {
 
   async onRegionDidChange() {
     const center = await this._map.getCenter();
-    this.setState({center});
+    this.setState({ center });
   }
 
   getLng() {
-    const {center} = this.state;
-    return center.length === 2 ? `Lng: ${center[0]}` : 'Not available';
+    const { center } = this.state;
+    return center.length === 2 ? `Lng: ${center[0]}` : "Not available";
   }
 
   getLat() {
-    const {center} = this.state;
-    return center.length === 2 ? `Lat: ${center[1]}` : 'Not available';
+    const { center } = this.state;
+    return center.length === 2 ? `Lat: ${center[1]}` : "Not available";
   }
 
   render() {
@@ -42,9 +42,10 @@ class GetCenter extends React.Component {
       <Page>
         <MapLibreGL.MapView
           onRegionDidChange={this.onRegionDidChange}
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
diff --git a/packages/examples/src/examples/Camera/GetZoom.js b/packages/examples/src/examples/Camera/GetZoom.js
index 1b1efdd9d..18429afaa 100755
--- a/packages/examples/src/examples/Camera/GetZoom.js
+++ b/packages/examples/src/examples/Camera/GetZoom.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class GetZoom extends React.Component {
@@ -22,7 +22,7 @@ class GetZoom extends React.Component {
 
   async onRegionDidChange() {
     const zoom = await this._map.getZoom();
-    this.setState({zoom});
+    this.setState({ zoom });
   }
 
   render() {
@@ -30,9 +30,10 @@ class GetZoom extends React.Component {
       <Page>
         <MapLibreGL.MapView
           onRegionDidChange={this.onRegionDidChange}
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
diff --git a/packages/examples/src/examples/Camera/RestrictMapBounds.js b/packages/examples/src/examples/Camera/RestrictMapBounds.js
index e2c0b3616..49ddfe4b4 100644
--- a/packages/examples/src/examples/Camera/RestrictMapBounds.js
+++ b/packages/examples/src/examples/Camera/RestrictMapBounds.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import bboxPolygon from '@turf/bbox-polygon';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import bboxPolygon from "@turf/bbox-polygon";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const boundsStyle = {
-  fillColor: 'rgba(255, 255, 255, 0.1)',
-  fillOutlineColor: 'white',
+  fillColor: "rgba(255, 255, 255, 0.1)",
+  fillOutlineColor: "white",
 };
 
 const bounds = {
@@ -15,14 +15,15 @@ const bounds = {
   sw: [-5.760365, 49.947256],
 };
 
-const {ne, sw} = bounds;
+const { ne, sw } = bounds;
 const polygon = bboxPolygon([sw[0], sw[1], ne[0], ne[1]]);
 
-const RestrictMapBounds = props => (
+const RestrictMapBounds = (props) => (
   <Page {...props}>
     <MapLibreGL.MapView
       style={sheet.matchParent}
-      styleURL={MapLibreGL.StyleURL.Default}>
+      styleURL={MapLibreGL.StyleURL.Default}
+    >
       <MapLibreGL.Camera
         maxBounds={bounds}
         zoomLevel={7}
diff --git a/packages/examples/src/examples/Camera/SetHeading.js b/packages/examples/src/examples/Camera/SetHeading.js
index 05831ccfd..f152605cb 100755
--- a/packages/examples/src/examples/Camera/SetHeading.js
+++ b/packages/examples/src/examples/Camera/SetHeading.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
 class SetHeading extends React.Component {
   constructor(props) {
@@ -16,9 +16,9 @@ class SetHeading extends React.Component {
     };
 
     this._bearingOptions = [
-      {label: '0', data: 0},
-      {label: '90', data: 90},
-      {label: '180', data: 180},
+      { label: "0", data: 0 },
+      { label: "90", data: 90 },
+      { label: "180", data: 180 },
     ];
 
     this.onHeadingChange = this.onHeadingChange.bind(this);
@@ -30,7 +30,7 @@ class SetHeading extends React.Component {
 
   componentDidUpdate() {
     if (this.state.followUserLocation) {
-      this.setState({followUserLocation: false});
+      this.setState({ followUserLocation: false });
     }
   }
 
@@ -39,7 +39,7 @@ class SetHeading extends React.Component {
   }
 
   onHeadingChange(index, heading) {
-    this.setState({heading});
+    this.setState({ heading });
   }
 
   render() {
@@ -47,10 +47,12 @@ class SetHeading extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._bearingOptions}
-        onOptionPress={this.onHeadingChange}>
+        onOptionPress={this.onHeadingChange}
+      >
         <MapLibreGL.MapView
-          ref={ref => (this.map = ref)}
-          style={sheet.matchParent}>
+          ref={(ref) => (this.map = ref)}
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera {...this.state} />
           <MapLibreGL.UserLocation />
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/Camera/SetPitch.js b/packages/examples/src/examples/Camera/SetPitch.js
index 8e87b7912..e50d6cc46 100755
--- a/packages/examples/src/examples/Camera/SetPitch.js
+++ b/packages/examples/src/examples/Camera/SetPitch.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
 class SetPitch extends React.Component {
   constructor(props) {
@@ -15,9 +15,9 @@ class SetPitch extends React.Component {
     };
 
     this._pitchOptions = [
-      {label: '15', data: 15},
-      {label: '45', data: 45},
-      {label: '60', data: 60},
+      { label: "15", data: 15 },
+      { label: "45", data: 45 },
+      { label: "60", data: 60 },
     ];
 
     this.onUpdatePitch = this.onUpdatePitch.bind(this);
@@ -32,7 +32,7 @@ class SetPitch extends React.Component {
   }
 
   onUpdatePitch(index, pitch) {
-    this.setState({followPitch: pitch});
+    this.setState({ followPitch: pitch });
   }
 
   render() {
@@ -40,7 +40,8 @@ class SetPitch extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._pitchOptions}
-        onOptionPress={this.onUpdatePitch}>
+        onOptionPress={this.onUpdatePitch}
+      >
         <MapLibreGL.MapView style={sheet.matchParent}>
           <MapLibreGL.Camera {...this.state} followUserLocation />
           <MapLibreGL.UserLocation />
diff --git a/packages/examples/src/examples/Camera/SetUserTrackingModes.js b/packages/examples/src/examples/Camera/SetUserTrackingModes.js
index e113fd5a7..704e5d20d 100755
--- a/packages/examples/src/examples/Camera/SetUserTrackingModes.js
+++ b/packages/examples/src/examples/Camera/SetUserTrackingModes.js
@@ -1,16 +1,16 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import {onSortOptions} from '../../utils';
-import TabBarPage from '../common/TabBarPage';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import { onSortOptions } from "../../utils";
+import Bubble from "../common/Bubble";
+import TabBarPage from "../common/TabBarPage";
 
 const styles = {
-  bubbleOne: {bottom: 80},
-  bubbleTwo: {bottom: 150},
-  bubbleThree: {bottom: 220},
+  bubbleOne: { bottom: 80 },
+  bubbleTwo: { bottom: 150 },
+  bubbleThree: { bottom: 220 },
 };
 
 class SetUserTrackingModes extends React.Component {
@@ -18,7 +18,7 @@ class SetUserTrackingModes extends React.Component {
     super(props);
 
     this._trackingOptions = Object.keys(MapLibreGL.UserTrackingModes)
-      .map(key => {
+      .map((key) => {
         return {
           label: key,
           data: MapLibreGL.UserTrackingModes[key],
@@ -26,8 +26,8 @@ class SetUserTrackingModes extends React.Component {
       })
       .concat([
         {
-          label: 'None',
-          data: 'none',
+          label: "None",
+          data: "none",
         },
       ])
       .sort(onSortOptions);
@@ -53,12 +53,12 @@ class SetUserTrackingModes extends React.Component {
   }
 
   onUserTrackingModeChange(e) {
-    const {followUserMode} = e.nativeEvent.payload;
-    this.setState({currentTrackingMode: followUserMode || 'none'});
+    const { followUserMode } = e.nativeEvent.payload;
+    this.setState({ currentTrackingMode: followUserMode || "none" });
   }
 
   onToggleUserLocation() {
-    this.setState({showUserLocation: !this.state.showUserLocation});
+    this.setState({ showUserLocation: !this.state.showUserLocation });
   }
 
   onToggleHeadingIndicator() {
@@ -70,13 +70,13 @@ class SetUserTrackingModes extends React.Component {
   get userTrackingModeText() {
     switch (this.state.currentTrackingMode) {
       case MapLibreGL.UserTrackingModes.Follow:
-        return 'Follow';
+        return "Follow";
       case MapLibreGL.UserTrackingModes.FollowWithCourse:
-        return 'FollowWithCourse';
+        return "FollowWithCourse";
       case MapLibreGL.UserTrackingModes.FollowWithHeading:
-        return 'FollowWithHeading';
+        return "FollowWithHeading";
       default:
-        return 'None';
+        return "None";
     }
   }
 
@@ -87,7 +87,8 @@ class SetUserTrackingModes extends React.Component {
         scrollable
         initialIndex={3}
         options={this._trackingOptions}
-        onOptionPress={this.onTrackingChange}>
+        onOptionPress={this.onTrackingChange}
+      >
         <MapLibreGL.MapView style={sheet.matchParent}>
           <MapLibreGL.UserLocation
             visible={this.state.showUserLocation}
@@ -100,12 +101,12 @@ class SetUserTrackingModes extends React.Component {
               zoomLevel: 0,
             }}
             followUserLocation={
-              this.state.userSelectedUserTrackingMode !== 'none'
+              this.state.userSelectedUserTrackingMode !== "none"
             }
             followUserMode={
-              this.state.userSelectedUserTrackingMode !== 'none'
+              this.state.userSelectedUserTrackingMode !== "none"
                 ? this.state.userSelectedUserTrackingMode
-                : 'normal'
+                : "normal"
             }
             onUserTrackingModeChange={this.onUserTrackingModeChange}
           />
@@ -117,17 +118,18 @@ class SetUserTrackingModes extends React.Component {
 
         <Bubble onPress={this.onToggleUserLocation} style={styles.bubbleTwo}>
           <Text>
-            Toggle User Location:{' '}
-            {this.state.showUserLocation ? 'true' : 'false'}
+            Toggle User Location:{" "}
+            {this.state.showUserLocation ? "true" : "false"}
           </Text>
         </Bubble>
 
         <Bubble
           onPress={this.onToggleHeadingIndicator}
-          style={styles.bubbleThree}>
+          style={styles.bubbleThree}
+        >
           <Text>
-            Toggle user heading indicator:{' '}
-            {this.state.showsUserHeadingIndicator ? 'true' : 'false'}
+            Toggle user heading indicator:{" "}
+            {this.state.showsUserHeadingIndicator ? "true" : "false"}
           </Text>
         </Bubble>
       </TabBarPage>
diff --git a/packages/examples/src/examples/Camera/TakeSnapshot.js b/packages/examples/src/examples/Camera/TakeSnapshot.js
index f65b34f30..0650d2e4d 100755
--- a/packages/examples/src/examples/Camera/TakeSnapshot.js
+++ b/packages/examples/src/examples/Camera/TakeSnapshot.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 import {
   View,
   Image,
@@ -7,9 +7,9 @@ import {
   Dimensions,
   Text,
   ActivityIndicator,
-} from 'react-native';
+} from "react-native";
 
-import Page from '../common/Page';
+import Page from "../common/Page";
 
 const styles = StyleSheet.create({
   container: {
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   snapshot: {
     flex: 1,
   },
-  spinnerContainer: {alignItems: 'center', flex: 1, justifyContent: 'center'},
+  spinnerContainer: { alignItems: "center", flex: 1, justifyContent: "center" },
 });
 
 class TakeSnapshot extends React.Component {
@@ -36,7 +36,7 @@ class TakeSnapshot extends React.Component {
   }
 
   async takeSnapshot() {
-    const {width, height} = Dimensions.get('window');
+    const { width, height } = Dimensions.get("window");
 
     const uri = await MapLibreGL.snapshotManager.takeSnap({
       centerCoordinate: [-74.12641, 40.797968],
@@ -49,7 +49,7 @@ class TakeSnapshot extends React.Component {
       writeToDisk: true,
     });
 
-    this.setState({snapshotURI: uri});
+    this.setState({ snapshotURI: uri });
   }
 
   render() {
@@ -66,7 +66,7 @@ class TakeSnapshot extends React.Component {
       childView = (
         <View style={styles.container}>
           <Image
-            source={{uri: this.state.snapshotURI}}
+            source={{ uri: this.state.snapshotURI }}
             resizeMode="contain"
             style={styles.snapshot}
           />
diff --git a/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js b/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js
index 1c65c8373..86c5491c7 100755
--- a/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js
+++ b/packages/examples/src/examples/Camera/TakeSnapshotWithMap.js
@@ -1,24 +1,24 @@
-import React from 'react';
-import {StyleSheet, View, Text, TouchableOpacity, Image} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { StyleSheet, View, Text, TouchableOpacity, Image } from "react-native";
 
-import sheet from '../../styles/sheet';
-import colors from '../../styles/colors';
-import Page from '../common/Page';
+import colors from "../../styles/colors";
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = StyleSheet.create({
   button: {
-    alignItems: 'center',
+    alignItems: "center",
     backgroundColor: colors.primary.blueLight,
     height: 60,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
-  buttonText: {color: 'white'},
-  imageContainer: {flex: 0.5},
+  buttonText: { color: "white" },
+  imageContainer: { flex: 0.5 },
   map: {
     flex: 0.5,
   },
-  mapContainer: {flex: 1},
+  mapContainer: { flex: 1 },
 });
 
 class TakeSnapshotWithMap extends React.Component {
@@ -26,20 +26,23 @@ class TakeSnapshotWithMap extends React.Component {
     super(props);
 
     this.state = {
-      uri: '',
+      uri: "",
     };
   }
 
   async onTakeSnapshot() {
     const uri = await this.map.takeSnap(false);
-    this.setState({uri});
+    this.setState({ uri });
   }
 
   render() {
     return (
       <Page>
         <View style={styles.mapContainer}>
-          <MapLibreGL.MapView ref={ref => (this.map = ref)} style={styles.map}>
+          <MapLibreGL.MapView
+            ref={(ref) => (this.map = ref)}
+            style={styles.map}
+          >
             <MapLibreGL.Camera
               zoomLevel={8}
               pitch={45}
@@ -52,7 +55,7 @@ class TakeSnapshotWithMap extends React.Component {
               <Image
                 resizeMode="contain"
                 style={sheet.matchParent}
-                source={{uri: this.state.uri}}
+                source={{ uri: this.state.uri }}
               />
             ) : null}
           </View>
diff --git a/packages/examples/src/examples/Camera/YoYo.js b/packages/examples/src/examples/Camera/YoYo.js
index 7b46c5ff4..291e29dab 100755
--- a/packages/examples/src/examples/Camera/YoYo.js
+++ b/packages/examples/src/examples/Camera/YoYo.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import {SF_OFFICE_COORDINATE} from '../../utils';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import { SF_OFFICE_COORDINATE } from "../../utils";
+import Page from "../common/Page";
 
 class YoYo extends React.Component {
   timeout = null;
@@ -29,7 +29,7 @@ class YoYo extends React.Component {
   cameraLoop() {
     requestAnimationFrame(async () => {
       const nextZoomLevel = this.state.zoomLevel === 6 ? 2 : 6;
-      this.setState({zoomLevel: nextZoomLevel});
+      this.setState({ zoomLevel: nextZoomLevel });
       this.timeout = setTimeout(() => this.cameraLoop(), 2000);
     });
   }
@@ -38,9 +38,10 @@ class YoYo extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={ref => (this.map = ref)}
+          ref={(ref) => (this.map = ref)}
           style={sheet.matchParent}
-          styleURL={MapLibreGL.StyleURL.Default}>
+          styleURL={MapLibreGL.StyleURL.Default}
+        >
           <MapLibreGL.Camera
             zoomLevel={this.state.zoomLevel}
             centerCoordinate={SF_OFFICE_COORDINATE}
diff --git a/packages/examples/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js b/packages/examples/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js
index d1b513ee7..0508a7fa6 100755
--- a/packages/examples/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js
+++ b/packages/examples/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js
@@ -1,33 +1,33 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = {
   statePopulation: {
     fillColor: [
-      'interpolate',
-      ['linear'],
-      ['get', 'population'],
+      "interpolate",
+      ["linear"],
+      ["get", "population"],
       0,
-      '#F2F12D',
+      "#F2F12D",
       500000,
-      '#EED322',
+      "#EED322",
       750000,
-      '#E6B71E',
+      "#E6B71E",
       1000000,
-      '#DA9C20',
+      "#DA9C20",
       2500000,
-      '#CA8323',
+      "#CA8323",
       5000000,
-      '#B86B25',
+      "#B86B25",
       7500000,
-      '#A25626',
+      "#A25626",
       10000000,
-      '#8B4225',
+      "#8B4225",
       25000000,
-      '#723122',
+      "#723122",
     ],
 
     fillOpacity: 0.75,
@@ -35,27 +35,27 @@ const styles = {
 
   countyPopulation: {
     fillColor: [
-      'interpolate',
-      ['linear'],
-      ['get', 'population'],
+      "interpolate",
+      ["linear"],
+      ["get", "population"],
       0,
-      '#F2F12D',
+      "#F2F12D",
       100,
-      '#EED322',
+      "#EED322",
       1000,
-      '#E6B71E',
+      "#E6B71E",
       5000,
-      '#DA9C20',
+      "#DA9C20",
       10000,
-      '#CA8323',
+      "#CA8323",
       50000,
-      '#B86B25',
+      "#B86B25",
       100000,
-      '#A25626',
+      "#A25626",
       500000,
-      '#8B4225',
+      "#8B4225",
       1000000,
-      '#723122',
+      "#723122",
     ],
 
     fillOpacity: 0.75,
@@ -67,21 +67,20 @@ function ChoroplethLayerByZoomLevel() {
     <Page>
       <MapLibreGL.MapView
         styleURL={MapLibreGL.StyleURL.Default}
-        style={sheet.matchParent}>
+        style={sheet.matchParent}
+      >
         <MapLibreGL.Camera
           centerCoordinate={[-98, 38.88]}
           zoomLevel={3}
           minZoomLevel={3}
         />
 
-        <MapLibreGL.VectorSource
-          id="population"
-          url={'mapbox://mapbox.660ui7x6'}>
+        <MapLibreGL.VectorSource id="population" url="mapbox://mapbox.660ui7x6">
           <MapLibreGL.FillLayer
             id="state-population"
             sourceLayerID="state_county_population_2014_cen"
             maxZoomLevel={4}
-            filter={['==', 'isState', true]}
+            filter={["==", "isState", true]}
             style={styles.statePopulation}
           />
 
@@ -89,7 +88,7 @@ function ChoroplethLayerByZoomLevel() {
             id="county-population"
             sourceLayerID="state_county_population_2014_cen"
             minZoomLevel={4}
-            filter={['==', 'isCounty', true]}
+            filter={["==", "isCounty", true]}
             style={styles.countyPopulation}
           />
         </MapLibreGL.VectorSource>
diff --git a/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.js b/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.js
index 1cb4cb308..42aa1ccb4 100755
--- a/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.js
+++ b/packages/examples/src/examples/FillRasterLayer/CustomVectorSource.js
@@ -1,21 +1,21 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {Text} from 'react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
   boxFill: {
     fillColor: [
-      'interpolate',
-      ['linear'],
-      ['get', 'box'],
+      "interpolate",
+      ["linear"],
+      ["get", "box"],
       0,
-      'green',
+      "green",
       1,
-      'blue',
+      "blue",
     ],
 
     fillAntialias: true,
@@ -23,7 +23,7 @@ const styles = {
 };
 
 const VECTOR_SOURCE_URL =
-  'mapbox://nickitaliano.cj94go8xl18fl2qp92v8bdivv-4kgl9';
+  "mapbox://nickitaliano.cj94go8xl18fl2qp92v8bdivv-4kgl9";
 
 class CustomVectorSource extends React.PureComponent {
   state = {
@@ -32,13 +32,13 @@ class CustomVectorSource extends React.PureComponent {
 
   queryFeatures = async () => {
     const features = await this._vectorSource.features([
-      'react-native-example',
+      "react-native-example",
     ]);
-    this.setState({featuresCount: features.features.length});
+    this.setState({ featuresCount: features.features.length });
   };
 
   render() {
-    const {featuresCount} = this.state;
+    const { featuresCount } = this.state;
     return (
       <Page>
         <MapLibreGL.MapView style={sheet.matchParent}>
@@ -50,12 +50,13 @@ class CustomVectorSource extends React.PureComponent {
           <MapLibreGL.VectorSource
             id="customSourceExample"
             url={VECTOR_SOURCE_URL}
-            ref={source => {
+            ref={(source) => {
               this._vectorSource = source;
             }}
-            onPress={e => {
+            onPress={(e) => {
               console.log(`VectorSource onPress: ${e.features}`, e.features);
-            }}>
+            }}
+          >
             <MapLibreGL.FillLayer
               id="customSourceFill"
               sourceLayerID="react-native-example"
diff --git a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
index 74b5204e8..35aee46fc 100755
--- a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
+++ b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
@@ -1,10 +1,10 @@
-import React, {useState} from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React, { useState } from "react";
 
-import sheet from '../../styles/sheet';
-import gridPattern from '../../assets/grid_pattern.png';
-import smileyFaceGeoJSON from '../../assets/smiley_face.json';
-import Page from '../common/Page';
+import gridPattern from "../../assets/grid_pattern.png";
+import smileyFaceGeoJSON from "../../assets/smiley_face.json";
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const layerStyles = {
   background: {
@@ -12,8 +12,8 @@ const layerStyles = {
   },
   smileyFace: {
     fillAntialias: true,
-    fillColor: 'white',
-    fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
+    fillColor: "white",
+    fillOutlineColor: "rgba(255, 255, 255, 0.84)",
   },
 };
 
@@ -24,7 +24,8 @@ function GeoJSONSource() {
       <MapLibreGL.MapView
         ref={setMapRef}
         style={sheet.matchParent}
-        styleURL={MapLibreGL.StyleURL.Default}>
+        styleURL={MapLibreGL.StyleURL.Default}
+      >
         <MapLibreGL.Camera
           zoomLevel={2}
           centerCoordinate={[-35.15165038, 40.6235728]}
diff --git a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
index b015c49ca..55a417ba6 100755
--- a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
+++ b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {Text} from 'react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Bubble from '../common/Bubble';
-import sheet from '../../styles/sheet';
-import radar0 from '../../assets/radar.png';
-import radar1 from '../../assets/radar1.png';
-import radar2 from '../../assets/radar2.png';
-import Page from '../common/Page';
+import radar0 from "../../assets/radar.png";
+import radar1 from "../../assets/radar1.png";
+import radar2 from "../../assets/radar2.png";
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
-  rasterLayer: {rasterOpacity: 0.6},
-  bubble: {bottom: 100},
+  rasterLayer: { rasterOpacity: 0.6 },
+  bubble: { bottom: 100 },
 };
 
 const frames = [radar0, radar1, radar2];
@@ -57,7 +57,7 @@ class ImageOverlay extends React.Component {
             coords: coordQuads[nextFrame],
           });
         } else {
-          this.setState({radarFrameIndex: nextFrame});
+          this.setState({ radarFrameIndex: nextFrame });
         }
         this.heartbeat();
       });
@@ -72,21 +72,23 @@ class ImageOverlay extends React.Component {
 
   render() {
     const bubbleText = this.state.dynamic
-      ? 'Static coordinates'
-      : 'Dynamic coordinates';
+      ? "Static coordinates"
+      : "Dynamic coordinates";
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={ref => (this.map = ref)}
+          ref={(ref) => (this.map = ref)}
           style={sheet.matchParent}
-          styleURL={MapLibreGL.StyleURL.Default}>
+          styleURL={MapLibreGL.StyleURL.Default}
+        >
           <MapLibreGL.Camera zoomLevel={4} centerCoordinate={[-79, 40]} />
 
           <MapLibreGL.Animated.ImageSource
             key="d"
             id="radarSource"
             coordinates={this.state.coords}
-            url={frames[this.state.radarFrameIndex]}>
+            url={frames[this.state.radarFrameIndex]}
+          >
             <MapLibreGL.RasterLayer
               id="radarLayer"
               style={styles.rasterLayer}
@@ -95,9 +97,10 @@ class ImageOverlay extends React.Component {
         </MapLibreGL.MapView>
         <Bubble
           onPress={() => {
-            this.setState({dynamic: !this.state.dynamic});
+            this.setState({ dynamic: !this.state.dynamic });
           }}
-          style={styles.bubble}>
+          style={styles.bubble}
+        >
           <Text>{bubbleText}</Text>
         </Bubble>
       </Page>
diff --git a/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.js b/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.js
index 8fcdc1bf8..520abce01 100755
--- a/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.js
+++ b/packages/examples/src/examples/FillRasterLayer/IndoorBuilding.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {Slider} from 'react-native-elements';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Slider } from "react-native-elements";
 
-import sheet from '../../styles/sheet';
-import colors from '../../styles/colors';
-import indoorMapGeoJSON from '../../assets/indoor_3d_map.json';
-import Page from '../common/Page';
+import indoorMapGeoJSON from "../../assets/indoor_3d_map.json";
+import colors from "../../styles/colors";
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = StyleSheet.create({
   slider: {
-    alignItems: 'stretch',
+    alignItems: "stretch",
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     maxHeight: 60,
     paddingHorizontal: 24,
   },
@@ -21,9 +21,9 @@ const styles = StyleSheet.create({
 const layerStyles = {
   building: {
     fillExtrusionOpacity: 0.5,
-    fillExtrusionHeight: ['get', 'height'],
-    fillExtrusionBase: ['get', 'base_height'],
-    fillExtrusionColor: ['get', 'color'],
+    fillExtrusionHeight: ["get", "height"],
+    fillExtrusionBase: ["get", "base_height"],
+    fillExtrusionColor: ["get", "color"],
     // fillExtrusionColorTransition: {duration: 2000, delay: 0},
   },
 };
@@ -40,15 +40,16 @@ class IndoorBuilding extends React.Component {
   }
 
   onSliderChange(value) {
-    this.setState({sliderValue: value});
+    this.setState({ sliderValue: value });
   }
 
   render() {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={ref => (this.map = ref)}
-          style={sheet.matchParent}>
+          ref={(ref) => (this.map = ref)}
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera
             zoomLevel={16}
             pitch={40}
@@ -57,12 +58,13 @@ class IndoorBuilding extends React.Component {
           />
 
           <MapLibreGL.Light
-            style={{position: [5, 90, this.state.sliderValue]}}
+            style={{ position: [5, 90, this.state.sliderValue] }}
           />
 
           <MapLibreGL.ShapeSource
             id="indoorBuildingSource"
-            shape={indoorMapGeoJSON}>
+            shape={indoorMapGeoJSON}
+          >
             <MapLibreGL.FillExtrusionLayer
               id="building3d"
               style={layerStyles.building}
@@ -77,7 +79,7 @@ class IndoorBuilding extends React.Component {
             thumbTintColor={colors.primary.blue}
             minimumValue={-180}
             maximumValue={180}
-            thumbTouchSize={{width: 44, height: 44}}
+            thumbTouchSize={{ width: 44, height: 44 }}
             maximumTrackTintColor={colors.secondary.purpleLight}
             minimumTrackTintColor={colors.secondary.purpleDark}
           />
diff --git a/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js b/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js
index 80f893e0b..65d2b9821 100755
--- a/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js
+++ b/packages/examples/src/examples/FillRasterLayer/QueryAtPoint.js
@@ -1,22 +1,22 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import nycJSON from '../../assets/nyc_geojson.json';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import nycJSON from "../../assets/nyc_geojson.json";
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
   neighborhoods: {
     fillAntialias: true,
-    fillColor: 'blue',
-    fillOutlineColor: 'black',
+    fillColor: "blue",
+    fillOutlineColor: "black",
     fillOpacity: 0.84,
   },
   selectedNeighborhood: {
     fillAntialias: true,
-    fillColor: 'green',
+    fillColor: "green",
     fillOpacity: 0.84,
   },
 };
@@ -29,16 +29,16 @@ class QueryAtPoint extends React.Component {
   }
 
   get emptyState() {
-    return {selectedGeoJSON: null, selectedCommunityDistrict: -1};
+    return { selectedGeoJSON: null, selectedCommunityDistrict: -1 };
   }
 
   async onPress(e) {
-    const {screenPointX, screenPointY} = e.properties;
+    const { screenPointX, screenPointY } = e.properties;
 
     const featureCollection = await this._map.queryRenderedFeaturesAtPoint(
       [screenPointX, screenPointY],
       null,
-      ['nycFill'],
+      ["nycFill"],
     );
 
     if (featureCollection.features.length) {
@@ -56,10 +56,11 @@ class QueryAtPoint extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           style={sheet.matchParent}
-          styleURL={MapLibreGL.StyleURL.Default}>
+          styleURL={MapLibreGL.StyleURL.Default}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
@@ -72,7 +73,8 @@ class QueryAtPoint extends React.Component {
           {this.state.selectedGeoJSON ? (
             <MapLibreGL.ShapeSource
               id="selectedNYC"
-              shape={this.state.selectedGeoJSON}>
+              shape={this.state.selectedGeoJSON}
+            >
               <MapLibreGL.FillLayer
                 id="selectedNYCFill"
                 style={styles.selectedNeighborhood}
diff --git a/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js b/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js
index b26237ae7..11023a625 100755
--- a/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js
+++ b/packages/examples/src/examples/FillRasterLayer/QueryWithRect.js
@@ -1,25 +1,25 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import nycJSON from '../../assets/nyc_geojson.json';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import nycJSON from "../../assets/nyc_geojson.json";
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
   neighborhoods: {
     fillAntialias: true,
-    fillColor: 'blue',
-    fillOutlineColor: 'black',
+    fillColor: "blue",
+    fillOutlineColor: "black",
     fillOpacity: 0.84,
   },
   selectedNeighborhoods: {
     fillAntialias: true,
-    fillColor: 'green',
+    fillColor: "green",
     fillOpacity: 0.84,
   },
-  bubbleText: {textAlign: 'center'},
+  bubbleText: { textAlign: "center" },
 };
 
 class QueryWithRect extends React.Component {
@@ -35,7 +35,7 @@ class QueryWithRect extends React.Component {
   }
 
   async onPress(e) {
-    const {screenPointX, screenPointY} = e.properties;
+    const { screenPointX, screenPointY } = e.properties;
 
     const screenCoords = Object.assign([], this.state.screenCoords);
     screenCoords.push([screenPointX, screenPointY]);
@@ -44,7 +44,7 @@ class QueryWithRect extends React.Component {
       const featureCollection = await this._map.queryRenderedFeaturesInRect(
         this.getBoundingBox(screenCoords),
         null,
-        ['nycFill'],
+        ["nycFill"],
       );
 
       this.setState({
@@ -54,7 +54,7 @@ class QueryWithRect extends React.Component {
           : null,
       });
     } else {
-      this.setState({screenCoords});
+      this.setState({ screenCoords });
     }
   }
 
@@ -68,19 +68,20 @@ class QueryWithRect extends React.Component {
 
   get message() {
     if (this.state.screenCoords.length === 1) {
-      return 'Press in one more location to close the rect';
+      return "Press in one more location to close the rect";
     }
-    return 'Press in two different locations to form a rect to query with';
+    return "Press in two different locations to form a rect to query with";
   }
 
   render() {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           style={sheet.matchParent}
-          styleURL={MapLibreGL.StyleURL.Default}>
+          styleURL={MapLibreGL.StyleURL.Default}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
@@ -93,7 +94,8 @@ class QueryWithRect extends React.Component {
           {this.state.selectedGeoJSON ? (
             <MapLibreGL.ShapeSource
               id="selectedNYC"
-              shape={this.state.selectedGeoJSON}>
+              shape={this.state.selectedGeoJSON}
+            >
               <MapLibreGL.FillLayer
                 id="selectedNYCFill"
                 style={styles.selectedNeighborhood}
diff --git a/packages/examples/src/examples/FillRasterLayer/WatercolorRasterTiles.js b/packages/examples/src/examples/FillRasterLayer/WatercolorRasterTiles.js
index 454f248b6..895825a59 100755
--- a/packages/examples/src/examples/FillRasterLayer/WatercolorRasterTiles.js
+++ b/packages/examples/src/examples/FillRasterLayer/WatercolorRasterTiles.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {Slider} from 'react-native-elements';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Slider } from "react-native-elements";
 
-import sheet from '../../styles/sheet';
-import colors from '../../styles/colors';
-import {SF_OFFICE_COORDINATE} from '../../utils';
-import Page from '../common/Page';
+import colors from "../../styles/colors";
+import sheet from "../../styles/sheet";
+import { SF_OFFICE_COORDINATE } from "../../utils";
+import Page from "../common/Page";
 
 const styles = StyleSheet.create({
   slider: {
-    alignItems: 'stretch',
+    alignItems: "stretch",
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     maxHeight: 60,
     paddingHorizontal: 24,
   },
@@ -30,14 +30,14 @@ class WatercolorRasterTiles extends React.Component {
   }
 
   onOpacityChange(value) {
-    this.setState({opacity: value});
+    this.setState({ opacity: value });
   }
 
   render() {
     const rasterSourceProps = {
-      id: 'stamenWatercolorSource',
+      id: "stamenWatercolorSource",
       tileUrlTemplates: [
-        'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
+        "https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",
       ],
       tileSize: 256,
     };
@@ -54,7 +54,7 @@ class WatercolorRasterTiles extends React.Component {
             <MapLibreGL.RasterLayer
               id="stamenWatercolorLayer"
               sourceID="stamenWatercolorSource"
-              style={{rasterOpacity: this.state.opacity}}
+              style={{ rasterOpacity: this.state.opacity }}
             />
           </MapLibreGL.RasterSource>
         </MapLibreGL.MapView>
@@ -64,7 +64,7 @@ class WatercolorRasterTiles extends React.Component {
             value={this.state.opacity}
             onValueChange={this.onOpacityChange}
             thumbTintColor={colors.primary.blue}
-            thumbTouchSize={{width: 44, height: 44}}
+            thumbTouchSize={{ width: 44, height: 44 }}
             maximumTrackTintColor={colors.secondary.purpleLight}
             minimumTrackTintColor={colors.secondary.purpleDark}
           />
diff --git a/packages/examples/src/examples/LineLayer/GradientLine.js b/packages/examples/src/examples/LineLayer/GradientLine.js
index 3e58b3a49..49f6a2831 100644
--- a/packages/examples/src/examples/LineLayer/GradientLine.js
+++ b/packages/examples/src/examples/LineLayer/GradientLine.js
@@ -1,31 +1,31 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = {
   lineLayer: {
-    lineColor: 'red',
-    lineCap: 'round',
-    lineJoin: 'round',
+    lineColor: "red",
+    lineCap: "round",
+    lineJoin: "round",
     lineWidth: 14,
     lineGradient: [
-      'interpolate',
-      ['linear'],
-      ['line-progress'],
+      "interpolate",
+      ["linear"],
+      ["line-progress"],
       0,
-      'blue',
+      "blue",
       0.1,
-      'royalblue',
+      "royalblue",
       0.3,
-      'cyan',
+      "cyan",
       0.5,
-      'lime',
+      "lime",
       0.7,
-      'yellow',
+      "yellow",
       1,
-      'red',
+      "red",
     ],
   },
 };
@@ -41,11 +41,11 @@ class GradientLine extends React.Component {
           />
           <MapLibreGL.ShapeSource
             id="source1"
-            lineMetrics={true}
+            lineMetrics
             shape={{
-              type: 'Feature',
+              type: "Feature",
               geometry: {
-                type: 'LineString',
+                type: "LineString",
                 coordinates: [
                   [-77.044211, 38.852924],
                   [-77.045659, 38.860158],
@@ -66,7 +66,8 @@ class GradientLine extends React.Component {
                   [-77.033643, 38.899926],
                 ],
               },
-            }}>
+            }}
+          >
             <MapLibreGL.LineLayer id="layer1" style={styles.lineLayer} />
           </MapLibreGL.ShapeSource>
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/Map/ChangeLayerColor.js b/packages/examples/src/examples/Map/ChangeLayerColor.js
index be7bd2fee..7dae7ea46 100644
--- a/packages/examples/src/examples/Map/ChangeLayerColor.js
+++ b/packages/examples/src/examples/Map/ChangeLayerColor.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const defaultCamera = {
   centerCoordinate: [12.338, 45.4385],
@@ -11,32 +11,33 @@ const defaultCamera = {
 };
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class ChangeLayerColor extends React.Component {
   state = {
-    backgroundColor: '',
+    backgroundColor: "",
   };
 
   onPress = () => {
     const backgroundColor = `#${Math.random().toString(16).substr(-6)}`;
-    this.setState({backgroundColor});
+    this.setState({ backgroundColor });
   };
 
   render() {
-    const {backgroundColor} = this.state;
+    const { backgroundColor } = this.state;
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera defaultSettings={defaultCamera} />
           {!!backgroundColor && (
             <MapLibreGL.BackgroundLayer
               id="background"
-              style={{backgroundColor}}
+              style={{ backgroundColor }}
             />
           )}
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/Map/PointInMapView.js b/packages/examples/src/examples/Map/PointInMapView.js
index b8c40d533..412d682a8 100755
--- a/packages/examples/src/examples/Map/PointInMapView.js
+++ b/packages/examples/src/examples/Map/PointInMapView.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class PointInMapView extends React.Component {
@@ -22,7 +22,7 @@ class PointInMapView extends React.Component {
 
   async onPress(e) {
     const pointInView = await this._map.getPointInView(e.geometry.coordinates);
-    this.setState({pointInView});
+    this.setState({ pointInView });
   }
 
   renderPointInView() {
@@ -31,8 +31,8 @@ class PointInMapView extends React.Component {
     }
 
     return [
-      <Text key={'x'}>x: {this.state.pointInView[0]}</Text>,
-      <Text key={'y'}>y: {this.state.pointInView[1]}</Text>,
+      <Text key="x">x: {this.state.pointInView[0]}</Text>,
+      <Text key="y">y: {this.state.pointInView[1]}</Text>,
     ];
   }
 
@@ -40,9 +40,10 @@ class PointInMapView extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
diff --git a/packages/examples/src/examples/Map/ShowAndHideLayer.js b/packages/examples/src/examples/Map/ShowAndHideLayer.js
index fa7e4503d..ef351113d 100644
--- a/packages/examples/src/examples/Map/ShowAndHideLayer.js
+++ b/packages/examples/src/examples/Map/ShowAndHideLayer.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const defaultCamera = {
   centerCoordinate: [-77.036532, 38.897318],
@@ -11,7 +11,7 @@ const defaultCamera = {
 };
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class ShowAndHideLayer extends React.Component {
@@ -26,19 +26,20 @@ class ShowAndHideLayer extends React.Component {
   };
 
   render() {
-    const visibility = this.state.show ? 'visible' : 'none';
+    const visibility = this.state.show ? "visible" : "none";
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera defaultSettings={defaultCamera} />
-          <MapLibreGL.FillLayer id="countries-label" style={{visibility}} />
+          <MapLibreGL.FillLayer id="countries-label" style={{ visibility }} />
         </MapLibreGL.MapView>
         <Bubble onPress={this.onPress}>
           <Text>
-            {this.state.show ? 'Hide Country Labels' : 'Show Country Labels'}
+            {this.state.show ? "Hide Country Labels" : "Show Country Labels"}
           </Text>
         </Bubble>
       </Page>
diff --git a/packages/examples/src/examples/Map/ShowClick.js b/packages/examples/src/examples/Map/ShowClick.js
index 6e6132e49..b292c36bd 100755
--- a/packages/examples/src/examples/Map/ShowClick.js
+++ b/packages/examples/src/examples/Map/ShowClick.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import {DEFAULT_CENTER_COORDINATE} from '../../utils';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import { DEFAULT_CENTER_COORDINATE } from "../../utils";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 class ShowClick extends React.Component {
   constructor(props) {
@@ -23,13 +23,13 @@ class ShowClick extends React.Component {
 
   get hasValidLastClick() {
     return (
-      typeof this.state.latitude === 'number' &&
-      typeof this.state.longitude === 'number'
+      typeof this.state.latitude === "number" &&
+      typeof this.state.longitude === "number"
     );
   }
 
   onPress(event) {
-    const {geometry, properties} = event;
+    const { geometry, properties } = event;
 
     this.setState({
       latitude: geometry.coordinates[1],
diff --git a/packages/examples/src/examples/Map/ShowRegionDidChange.js b/packages/examples/src/examples/Map/ShowRegionDidChange.js
index 2817aa1ab..c9ae9818d 100644
--- a/packages/examples/src/examples/Map/ShowRegionDidChange.js
+++ b/packages/examples/src/examples/Map/ShowRegionDidChange.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import {DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE} from '../../utils';
-import TabBarPage from '../common/TabBarPage';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import { DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE } from "../../utils";
+import Bubble from "../common/Bubble";
+import TabBarPage from "../common/TabBarPage";
 
 const styles = {
-  bubble: {marginBottom: 100},
+  bubble: { marginBottom: 100 },
 };
 
-const isValidCoordinate = geometry => {
+const isValidCoordinate = (geometry) => {
   if (!geometry) {
     return false;
   }
@@ -23,7 +23,7 @@ class ShowRegionDidChange extends React.Component {
     super(props);
 
     this.state = {
-      reason: '',
+      reason: "",
       cameraConfig: {
         centerCoordinate: DEFAULT_CENTER_COORDINATE,
         zoomLevel: 12,
@@ -32,12 +32,12 @@ class ShowRegionDidChange extends React.Component {
     };
 
     this._tabOptions = [
-      {label: 'Fly To', data: SF_OFFICE_COORDINATE},
+      { label: "Fly To", data: SF_OFFICE_COORDINATE },
       {
-        label: 'Fit Bounds',
-        data: {ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177]},
+        label: "Fit Bounds",
+        data: { ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177] },
       },
-      {label: 'Zoom To', data: 16},
+      { label: "Zoom To", data: 16 },
     ];
 
     this.onRegionDidChange = this.onRegionDidChange.bind(this);
@@ -74,15 +74,15 @@ class ShowRegionDidChange extends React.Component {
   }
 
   onRegionWillChange(regionFeature) {
-    this.setState({reason: 'will change', regionFeature});
+    this.setState({ reason: "will change", regionFeature });
   }
 
   onRegionDidChange(regionFeature) {
-    this.setState({reason: 'did change', regionFeature});
+    this.setState({ reason: "did change", regionFeature });
   }
 
   onRegionIsChanging(regionFeature) {
-    this.setState({reason: 'is changing', regionFeature});
+    this.setState({ reason: "is changing", regionFeature });
   }
 
   renderRegionChange() {
@@ -97,14 +97,14 @@ class ShowRegionDidChange extends React.Component {
       );
     }
 
-    const {geometry, properties} = this.state.regionFeature;
+    const { geometry, properties } = this.state.regionFeature;
 
     const neCoord = properties.visibleBounds[0]
-      .map(n => n.toPrecision(6))
-      .join(', ');
+      .map((n) => n.toPrecision(6))
+      .join(", ");
     const swCoord = properties.visibleBounds[1]
-      .map(n => n.toPrecision(6))
-      .join(', ');
+      .map((n) => n.toPrecision(6))
+      .join(", ");
 
     return (
       <Bubble style={styles.bubble}>
@@ -117,9 +117,9 @@ class ShowRegionDidChange extends React.Component {
         <Text>Heading: {properties.heading}</Text>
         <Text>Pitch: {properties.pitch}</Text>
         <Text>
-          Is User Interaction: {properties.isUserInteraction ? 'true' : 'false'}
+          Is User Interaction: {properties.isUserInteraction ? "true" : "false"}
         </Text>
-        <Text>Animated: {properties.animated ? 'true' : 'false'}</Text>
+        <Text>Animated: {properties.animated ? "true" : "false"}</Text>
       </Bubble>
     );
   }
@@ -129,13 +129,15 @@ class ShowRegionDidChange extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._tabOptions}
-        onOptionPress={this.onOptionPress}>
+        onOptionPress={this.onOptionPress}
+      >
         <MapLibreGL.MapView
-          ref={c => (this.map = c)}
+          ref={(c) => (this.map = c)}
           style={sheet.matchParent}
           onRegionWillChange={this.onRegionWillChange}
           onRegionIsChanging={this.onRegionIsChanging}
-          onRegionDidChange={this.onRegionDidChange}>
+          onRegionDidChange={this.onRegionDidChange}
+        >
           <MapLibreGL.Camera {...this.state.cameraConfig} />
         </MapLibreGL.MapView>
         {this.renderRegionChange()}
diff --git a/packages/examples/src/examples/Map/SourceLayerVisibility.js b/packages/examples/src/examples/Map/SourceLayerVisibility.js
index c50405e40..f2f7c05e2 100755
--- a/packages/examples/src/examples/Map/SourceLayerVisibility.js
+++ b/packages/examples/src/examples/Map/SourceLayerVisibility.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const defaultCamera = {
   centerCoordinate: [-74.005974, 40.712776],
@@ -11,7 +11,7 @@ const defaultCamera = {
 };
 
 const styles = {
-  mapView: {flex: 1},
+  mapView: { flex: 1 },
 };
 
 class SourceLayerVisibility extends React.Component {
@@ -25,7 +25,7 @@ class SourceLayerVisibility extends React.Component {
         show: !this.state.show,
       },
       () => {
-        this._map.setSourceVisibility(this.state.show, 'composite', 'road');
+        this._map.setSourceVisibility(this.state.show, "composite", "road");
       },
     );
   };
@@ -34,14 +34,15 @@ class SourceLayerVisibility extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={styles.mapView}>
+          style={styles.mapView}
+        >
           <MapLibreGL.Camera defaultSettings={defaultCamera} />
         </MapLibreGL.MapView>
         <Bubble onPress={this.onPress}>
           <Text>{`${
-            this.state.show ? 'Hide' : 'Show'
+            this.state.show ? "Hide" : "Show"
           } 'Roads' source layer`}</Text>
         </Bubble>
       </Page>
diff --git a/packages/examples/src/examples/Map/StyleJson.js b/packages/examples/src/examples/Map/StyleJson.js
index a3656c154..b25ebbffc 100755
--- a/packages/examples/src/examples/Map/StyleJson.js
+++ b/packages/examples/src/examples/Map/StyleJson.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text, StyleSheet } from "react-native";
 
-import StyleJsonExample from '../../assets/style-json-example.json';
-import StyleJsonExample2 from '../../assets/style-json-example2.json';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import StyleJsonExample from "../../assets/style-json-example.json";
+import StyleJsonExample2 from "../../assets/style-json-example2.json";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = StyleSheet.create({
   map: {
@@ -35,7 +35,8 @@ class StyleJson extends React.Component {
       <Page>
         <MapLibreGL.MapView
           styleURL={MapLibreGL.StyleURL.Default}
-          style={styles.map}>
+          style={styles.map}
+        >
           <MapLibreGL.Camera defaultSettings={defaultCamera} />
           <MapLibreGL.Style
             json={
@@ -44,7 +45,7 @@ class StyleJson extends React.Component {
           />
         </MapLibreGL.MapView>
         <Bubble onPress={this.onPress}>
-          <Text>{this.state.showAltStyle ? 'Style 2' : 'Style 1'}</Text>
+          <Text>{this.state.showAltStyle ? "Style 2" : "Style 1"}</Text>
         </Bubble>
       </Page>
     );
diff --git a/packages/examples/src/examples/Map/TwoByTwo.js b/packages/examples/src/examples/Map/TwoByTwo.js
index 1bf8d208f..367b53834 100755
--- a/packages/examples/src/examples/Map/TwoByTwo.js
+++ b/packages/examples/src/examples/Map/TwoByTwo.js
@@ -1,20 +1,20 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import smileyFaceGeoJSON from '../../assets/smiley_face.json';
-import Page from '../common/Page';
+import smileyFaceGeoJSON from "../../assets/smiley_face.json";
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const layerStyles = {
   smileyFaceLight: {
     fillAntialias: true,
-    fillColor: 'white',
-    fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
+    fillColor: "white",
+    fillOutlineColor: "rgba(255, 255, 255, 0.84)",
   },
   smileyFaceDark: {
     fillAntialias: true,
-    fillColor: 'black',
-    fillOutlineColor: 'rgba(0, 0, 0, 0.84)',
+    fillColor: "black",
+    fillOutlineColor: "rgba(0, 0, 0, 0.84)",
   },
 };
 
@@ -25,9 +25,10 @@ class TwoByTwo extends React.Component {
         zoomLevel={2}
         centerCoordinate={[-35.15165038, 40.6235728]}
         onSetCameraComplete={this.onUpdateZoomLevel}
-        ref={ref => (this.map = ref)}
+        ref={(ref) => (this.map = ref)}
         style={sheet.matchParent}
-        styleURL={styleURL}>
+        styleURL={styleURL}
+      >
         <MapLibreGL.ShapeSource id="smileyFaceSource" shape={smileyFaceGeoJSON}>
           <MapLibreGL.FillLayer id="smileyFaceFill" style={layerStyle} />
         </MapLibreGL.ShapeSource>
diff --git a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
index 5d67751e0..d9cc00c24 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {featureCollection, feature} from '@turf/helpers';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import { featureCollection, feature } from "@turf/helpers";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import exampleIcon from '../../assets/example.png';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import exampleIcon from "../../assets/example.png";
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 const styles = {
   icon: {
@@ -39,9 +39,9 @@ class CustomIcon extends React.Component {
     });
   }
 
-  onSourceLayerPress({features, coordinates, point}) {
+  onSourceLayerPress({ features, coordinates, point }) {
     console.log(
-      'You pressed a layer here are your features:',
+      "You pressed a layer here are your features:",
       features,
       coordinates,
       point,
@@ -52,9 +52,10 @@ class CustomIcon extends React.Component {
     return (
       <Page>
         <MapLibreGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
@@ -62,9 +63,10 @@ class CustomIcon extends React.Component {
 
           <MapLibreGL.ShapeSource
             id="symbolLocationSource"
-            hitbox={{width: 20, height: 20}}
+            hitbox={{ width: 20, height: 20 }}
             onPress={this.onSourceLayerPress}
-            shape={this.state.featureCollection}>
+            shape={this.state.featureCollection}
+          >
             <MapLibreGL.SymbolLayer
               id="symbolLocationSymbols"
               minZoomLevel={1}
diff --git a/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js b/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js
index ca77f8371..7be06c139 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/DataDrivenCircleColors.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = {
   circles: {
     circleRadius: [
-      'interpolate',
-      ['exponential', 1.75],
-      ['zoom'],
+      "interpolate",
+      ["exponential", 1.75],
+      ["zoom"],
       12,
       2,
       22,
@@ -17,17 +17,17 @@ const styles = {
     ],
 
     circleColor: [
-      'match',
-      ['get', 'ethnicity'],
-      'White',
-      '#fbb03b',
-      'Black',
-      '#223b53',
-      'Hispanic',
-      '#e55e5e',
-      'Asian',
-      '#3bb2d0',
-      /* other */ '#ccc',
+      "match",
+      ["get", "ethnicity"],
+      "White",
+      "#fbb03b",
+      "Black",
+      "#223b53",
+      "Hispanic",
+      "#e55e5e",
+      "Asian",
+      "#3bb2d0",
+      /* other */ "#ccc",
     ],
   },
 };
@@ -37,7 +37,8 @@ function DataDrivenCircleColors() {
     <Page>
       <MapLibreGL.MapView
         styleURL={MapLibreGL.StyleURL.Default}
-        style={sheet.matchParent}>
+        style={sheet.matchParent}
+      >
         <MapLibreGL.Camera
           zoomLevel={10}
           pitch={45}
@@ -46,7 +47,8 @@ function DataDrivenCircleColors() {
 
         <MapLibreGL.VectorSource
           id="population"
-          url={'mapbox://examples.8fgz4egr'}>
+          url="mapbox://examples.8fgz4egr"
+        >
           <MapLibreGL.CircleLayer
             id="sf2010CircleFill"
             sourceLayerID="sf2010"
diff --git a/packages/examples/src/examples/SymbolCircleLayer/EarthQuakes.js b/packages/examples/src/examples/SymbolCircleLayer/EarthQuakes.js
index 5f0851c3b..5617c9ebc 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/EarthQuakes.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/EarthQuakes.js
@@ -1,70 +1,70 @@
-import React from 'react';
-import {FlatList} from 'react-native';
-import {Overlay, ListItem, FAB, Icon} from 'react-native-elements';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import moment from 'moment';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import moment from "moment";
+import React from "react";
+import { FlatList } from "react-native";
+import { Overlay, ListItem, FAB, Icon } from "react-native-elements";
 
-import earthQuakesJSON from '../../assets/earthquakes.json';
-import sheet from '../../styles/sheet';
-import {SF_OFFICE_COORDINATE} from '../../utils';
-import Page from '../common/Page';
+import earthQuakesJSON from "../../assets/earthquakes.json";
+import sheet from "../../styles/sheet";
+import { SF_OFFICE_COORDINATE } from "../../utils";
+import Page from "../common/Page";
 
 const layerStyles = {
   singlePoint: {
-    circleColor: 'green',
+    circleColor: "green",
     circleOpacity: 0.84,
     circleStrokeWidth: 2,
-    circleStrokeColor: 'white',
+    circleStrokeColor: "white",
     circleRadius: 5,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
 
   clusteredPoints: {
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
 
     circleColor: [
-      'step',
-      ['get', 'point_count'],
-      '#51bbd6',
+      "step",
+      ["get", "point_count"],
+      "#51bbd6",
       100,
-      '#f1f075',
+      "#f1f075",
       750,
-      '#f28cb1',
+      "#f28cb1",
     ],
 
-    circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
+    circleRadius: ["step", ["get", "point_count"], 20, 100, 30, 750, 40],
 
     circleOpacity: 0.84,
     circleStrokeWidth: 2,
-    circleStrokeColor: 'white',
+    circleStrokeColor: "white",
   },
 
   clusterCount: {
     textField: [
-      'format',
-      ['concat', ['get', 'point_count'], '\n'],
+      "format",
+      ["concat", ["get", "point_count"], "\n"],
       {},
       [
-        'concat',
-        '>1: ',
+        "concat",
+        ">1: ",
         [
-          '+',
-          ['get', 'mag2'],
-          ['get', 'mag3'],
-          ['get', 'mag4'],
-          ['get', 'mag5'],
+          "+",
+          ["get", "mag2"],
+          ["get", "mag3"],
+          ["get", "mag4"],
+          ["get", "mag5"],
         ],
       ],
-      {'font-scale': 0.8},
+      { "font-scale": 0.8 },
     ],
     textSize: 12,
-    textPitchAlignment: 'map',
+    textPitchAlignment: "map",
   },
 };
 
 const styles = {
   fab: {
-    position: 'absolute',
+    position: "absolute",
     top: 10,
     right: 10,
     elevation: 9999,
@@ -72,11 +72,11 @@ const styles = {
   },
 };
 
-const mag1 = ['<', ['get', 'mag'], 2];
-const mag2 = ['all', ['>=', ['get', 'mag'], 2], ['<', ['get', 'mag'], 3]];
-const mag3 = ['all', ['>=', ['get', 'mag'], 3], ['<', ['get', 'mag'], 4]];
-const mag4 = ['all', ['>=', ['get', 'mag'], 4], ['<', ['get', 'mag'], 5]];
-const mag5 = ['>=', ['get', 'mag'], 5];
+const mag1 = ["<", ["get", "mag"], 2];
+const mag2 = ["all", [">=", ["get", "mag"], 2], ["<", ["get", "mag"], 3]];
+const mag3 = ["all", [">=", ["get", "mag"], 3], ["<", ["get", "mag"], 4]];
+const mag4 = ["all", [">=", ["get", "mag"], 4], ["<", ["get", "mag"], 5]];
+const mag5 = [">=", ["get", "mag"], 5];
 class EarthQuakes extends React.Component {
   state = {
     selectedCluster: null,
@@ -88,7 +88,7 @@ class EarthQuakes extends React.Component {
         <Overlay isVisible={!!this.state.selectedCluster} fullScreen>
           <FAB
             onPress={() => {
-              this.setState({selectedCluster: null});
+              this.setState({ selectedCluster: null });
             }}
             icon={<Icon name="close" />}
             size="large"
@@ -96,16 +96,16 @@ class EarthQuakes extends React.Component {
           />
           {this.state.selectedCluster && (
             <FlatList
-              keyExtractor={({properties: earthquakeInfo}) => {
+              keyExtractor={({ properties: earthquakeInfo }) => {
                 return earthquakeInfo.code;
               }}
               data={this.state.selectedCluster.features}
-              renderItem={({item: {properties: earthquakeInfo}}) => {
+              renderItem={({ item: { properties: earthquakeInfo } }) => {
                 const magnitude = `Magnitude: ${earthquakeInfo.mag}`;
                 const place = `Place: ${earthquakeInfo.place}`;
                 const code = `Code: ${earthquakeInfo.code}`;
                 const time = `Time: ${moment(earthquakeInfo.time).format(
-                  'MMMM Do YYYY, h:mm:ss a',
+                  "MMMM Do YYYY, h:mm:ss a",
                 )}`;
 
                 return (
@@ -126,7 +126,8 @@ class EarthQuakes extends React.Component {
         <Page {...this.props}>
           <MapLibreGL.MapView
             style={sheet.matchParent}
-            styleURL={MapLibreGL.StyleURL.Default}>
+            styleURL={MapLibreGL.StyleURL.Default}
+          >
             <MapLibreGL.Camera
               zoomLevel={6}
               pitch={45}
@@ -135,7 +136,7 @@ class EarthQuakes extends React.Component {
 
             <MapLibreGL.ShapeSource
               id="earthquakes"
-              onPress={async shape => {
+              onPress={async (shape) => {
                 const cluster = shape.features[0];
                 const collection = await this.shape.getClusterLeaves(
                   cluster,
@@ -143,35 +144,36 @@ class EarthQuakes extends React.Component {
                   0,
                 );
 
-                this.setState({selectedCluster: collection});
+                this.setState({ selectedCluster: collection });
               }}
-              ref={shape => (this.shape = shape)}
+              ref={(shape) => (this.shape = shape)}
               cluster
               clusterRadius={50}
               clusterMaxZoom={14}
               clusterProperties={{
                 mag1: [
-                  ['+', ['accumulated'], ['get', 'mag1']],
-                  ['case', mag1, 1, 0],
+                  ["+", ["accumulated"], ["get", "mag1"]],
+                  ["case", mag1, 1, 0],
                 ],
                 mag2: [
-                  ['+', ['accumulated'], ['get', 'mag2']],
-                  ['case', mag2, 1, 0],
+                  ["+", ["accumulated"], ["get", "mag2"]],
+                  ["case", mag2, 1, 0],
                 ],
                 mag3: [
-                  ['+', ['accumulated'], ['get', 'mag3']],
-                  ['case', mag3, 1, 0],
+                  ["+", ["accumulated"], ["get", "mag3"]],
+                  ["case", mag3, 1, 0],
                 ],
                 mag4: [
-                  ['+', ['accumulated'], ['get', 'mag4']],
-                  ['case', mag4, 1, 0],
+                  ["+", ["accumulated"], ["get", "mag4"]],
+                  ["case", mag4, 1, 0],
                 ],
                 mag5: [
-                  ['+', ['accumulated'], ['get', 'mag5']],
-                  ['case', mag5, 1, 0],
+                  ["+", ["accumulated"], ["get", "mag5"]],
+                  ["case", mag5, 1, 0],
                 ],
               }}
-              shape={earthQuakesJSON}>
+              shape={earthQuakesJSON}
+            >
               <MapLibreGL.SymbolLayer
                 id="pointCount"
                 style={layerStyles.clusterCount}
@@ -180,13 +182,13 @@ class EarthQuakes extends React.Component {
               <MapLibreGL.CircleLayer
                 id="clusteredPoints"
                 belowLayerID="pointCount"
-                filter={['has', 'point_count']}
+                filter={["has", "point_count"]}
                 style={layerStyles.clusteredPoints}
               />
 
               <MapLibreGL.CircleLayer
                 id="singlePoint"
-                filter={['!', ['has', 'point_count']]}
+                filter={["!", ["has", "point_count"]]}
                 style={layerStyles.singlePoint}
               />
             </MapLibreGL.ShapeSource>
diff --git a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
index fbcf4761b..609f65988 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
@@ -1,21 +1,21 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import exampleIcon from '../../assets/example.png';
-import pinIcon from '../../assets/pin.png';
-import Page from '../common/Page';
+import exampleIcon from "../../assets/example.png";
+import pinIcon from "../../assets/pin.png";
+import sheet from "../../styles/sheet";
+import Page from "../common/Page";
 
 const styles = {
   icon: {
-    iconImage: ['get', 'icon'],
+    iconImage: ["get", "icon"],
 
     iconSize: [
-      'match',
-      ['get', 'icon'],
-      'example',
+      "match",
+      ["get", "icon"],
+      "example",
       1.2,
-      'airport-15',
+      "airport-15",
       1.2,
       /* default */ 1,
     ],
@@ -23,49 +23,49 @@ const styles = {
 };
 
 const featureCollection = {
-  type: 'FeatureCollection',
+  type: "FeatureCollection",
   features: [
     {
-      type: 'Feature',
-      id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
+      type: "Feature",
+      id: "9d10456e-bdda-4aa9-9269-04c1667d4552",
       properties: {
-        icon: 'example',
+        icon: "example",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-117.20611157485, 52.180961084261],
       },
     },
     {
-      type: 'Feature',
-      id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
+      type: "Feature",
+      id: "9d10456e-bdda-4aa9-9269-04c1667d4552",
       properties: {
-        icon: 'airport-15',
+        icon: "airport-15",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-117.205908, 52.180843],
       },
     },
     {
-      type: 'Feature',
-      id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
+      type: "Feature",
+      id: "9d10456e-bdda-4aa9-9269-04c1667d4552",
       properties: {
-        icon: 'pin',
+        icon: "pin",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-117.206562, 52.180797],
       },
     },
     {
-      type: 'Feature',
-      id: '9d10456e-bdda-4aa9-9269-04c1667d4553',
+      type: "Feature",
+      id: "9d10456e-bdda-4aa9-9269-04c1667d4553",
       properties: {
-        icon: 'pin3',
+        icon: "pin3",
       },
       geometry: {
-        type: 'Point',
+        type: "Point",
         coordinates: [-117.206862, 52.180897],
       },
     },
@@ -80,7 +80,7 @@ class ShapeSourceIcon extends React.Component {
   };
 
   render() {
-    const {images} = this.state;
+    const { images } = this.state;
 
     return (
       <Page>
@@ -90,17 +90,18 @@ class ShapeSourceIcon extends React.Component {
             centerCoordinate={[-117.20611157485, 52.180961084261]}
           />
           <MapLibreGL.Images
-            nativeAssetImages={['pin']}
+            nativeAssetImages={["pin"]}
             images={images}
-            onImageMissing={imageKey =>
+            onImageMissing={(imageKey) =>
               this.setState({
-                images: {...this.state.images, [imageKey]: pinIcon},
+                images: { ...this.state.images, [imageKey]: pinIcon },
               })
             }
           />
           <MapLibreGL.ShapeSource
             id="exampleShapeSource"
-            shape={featureCollection}>
+            shape={featureCollection}
+          >
             <MapLibreGL.SymbolLayer id="exampleIconName" style={styles.icon} />
           </MapLibreGL.ShapeSource>
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/UserLocation/SetDisplacement.js b/packages/examples/src/examples/UserLocation/SetDisplacement.js
index 8be6d2556..c16e1652e 100644
--- a/packages/examples/src/examples/UserLocation/SetDisplacement.js
+++ b/packages/examples/src/examples/UserLocation/SetDisplacement.js
@@ -1,14 +1,18 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
 const DISPLACEMENT = [0, 5, 10];
-const OPTIONS = [{label: '0 meter'}, {label: '5 meter'}, {label: '10 meter'}];
+const OPTIONS = [
+  { label: "0 meter" },
+  { label: "5 meter" },
+  { label: "10 meter" },
+];
 
 class SetDisplacement extends React.Component {
-  state = {minDisplacement: DISPLACEMENT[0]};
+  state = { minDisplacement: DISPLACEMENT[0] };
 
   componentDidMount() {
     MapLibreGL.locationManager.start();
@@ -18,8 +22,8 @@ class SetDisplacement extends React.Component {
     MapLibreGL.locationManager.stop();
   }
 
-  onDisplacementChange = index => {
-    this.setState({minDisplacement: DISPLACEMENT[index]});
+  onDisplacementChange = (index) => {
+    this.setState({ minDisplacement: DISPLACEMENT[index] });
   };
 
   render() {
@@ -27,7 +31,8 @@ class SetDisplacement extends React.Component {
       <TabBarPage
         {...this.props}
         options={OPTIONS}
-        onOptionPress={this.onDisplacementChange}>
+        onOptionPress={this.onDisplacementChange}
+      >
         <MapLibreGL.MapView style={sheet.matchParent}>
           <MapLibreGL.Camera
             followZoomLevel={16}
diff --git a/packages/examples/src/examples/UserLocation/SetTintColor.js b/packages/examples/src/examples/UserLocation/SetTintColor.js
index 8ee5f5a62..1bb4cecc7 100644
--- a/packages/examples/src/examples/UserLocation/SetTintColor.js
+++ b/packages/examples/src/examples/UserLocation/SetTintColor.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
-const COLOR = ['red', 'yellow', 'green'];
-const OPTIONS = [{label: 'red'}, {label: 'yellow'}, {label: 'green'}];
+const COLOR = ["red", "yellow", "green"];
+const OPTIONS = [{ label: "red" }, { label: "yellow" }, { label: "green" }];
 
 class SetTintColor extends React.Component {
-  state = {tintColor: COLOR[0]};
+  state = { tintColor: COLOR[0] };
 
-  onTintColorChange = index => {
-    this.setState({tintColor: COLOR[index]});
+  onTintColorChange = (index) => {
+    this.setState({ tintColor: COLOR[index] });
   };
 
   render() {
@@ -19,10 +19,12 @@ class SetTintColor extends React.Component {
       <TabBarPage
         {...this.props}
         options={OPTIONS}
-        onOptionPress={this.onTintColorChange}>
+        onOptionPress={this.onTintColorChange}
+      >
         <MapLibreGL.MapView
           style={sheet.matchParent}
-          tintColor={this.state.tintColor}>
+          tintColor={this.state.tintColor}
+        >
           <MapLibreGL.Camera
             followZoomLevel={16}
             followUserMode="compass"
diff --git a/packages/examples/src/examples/UserLocation/SetUserLocationRenderMode.js b/packages/examples/src/examples/UserLocation/SetUserLocationRenderMode.js
index 200af52c0..80ab2a963 100755
--- a/packages/examples/src/examples/UserLocation/SetUserLocationRenderMode.js
+++ b/packages/examples/src/examples/UserLocation/SetUserLocationRenderMode.js
@@ -1,41 +1,41 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {Button, View} from 'react-native';
-import {ButtonGroup} from 'react-native-elements';
-import PropTypes from 'prop-types';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import PropTypes from "prop-types";
+import React from "react";
+import { Button, View } from "react-native";
+import { ButtonGroup } from "react-native-elements";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
-function SettingsPane({settings, onUpdateSettings}) {
-  const followModes = ['normal', 'compass', 'course'];
-  const renderModes = ['normal', 'compass', 'gps'];
-  let {
+function SettingsPane({ settings, onUpdateSettings }) {
+  const followModes = ["normal", "compass", "course"];
+  const renderModes = ["normal", "compass", "gps"];
+  const {
     followUserLocation,
     showsUserHeadingIndicator,
-    followUserMode = 'normal',
-    androidRenderMode = 'normal',
+    followUserMode = "normal",
+    androidRenderMode = "normal",
   } = settings;
-  const selectedModeIndex = followModes.findIndex(i => i === followUserMode);
-  const renderModeIndex = renderModes.findIndex(i => i === androidRenderMode);
+  const selectedModeIndex = followModes.findIndex((i) => i === followUserMode);
+  const renderModeIndex = renderModes.findIndex((i) => i === androidRenderMode);
 
   return (
     <View>
       <Button
         title={
           followUserLocation
-            ? 'Don`t follow User Location'
-            : 'Follow user location'
+            ? "Don`t follow User Location"
+            : "Follow user location"
         }
         onPress={() =>
-          onUpdateSettings({followUserLocation: !followUserLocation})
+          onUpdateSettings({ followUserLocation: !followUserLocation })
         }
       />
       <Button
         title={
           showsUserHeadingIndicator
-            ? 'Hide user heading indicator'
-            : 'Show user heading indicator'
+            ? "Hide user heading indicator"
+            : "Show user heading indicator"
         }
         onPress={() =>
           onUpdateSettings({
@@ -46,7 +46,7 @@ function SettingsPane({settings, onUpdateSettings}) {
       <ButtonGroup
         buttons={followModes}
         selectedIndex={selectedModeIndex}
-        onPress={i =>
+        onPress={(i) =>
           onUpdateSettings({
             followUserMode: followModes[i],
           })
@@ -55,7 +55,7 @@ function SettingsPane({settings, onUpdateSettings}) {
       <ButtonGroup
         buttons={renderModes}
         selectedIndex={renderModeIndex}
-        onPress={i =>
+        onPress={(i) =>
           onUpdateSettings({
             androidRenderMode: renderModes[i],
           })
@@ -81,16 +81,16 @@ class SetUserLocationRenderMode extends React.Component {
 
     this._renderModeOptions = [
       {
-        label: 'Normal',
-        data: 'normal',
+        label: "Normal",
+        data: "normal",
       },
       {
-        label: 'Native',
-        data: 'native',
+        label: "Native",
+        data: "native",
       },
       {
-        label: 'Hidden',
-        data: 'hidden',
+        label: "Hidden",
+        data: "hidden",
       },
     ];
 
@@ -104,7 +104,7 @@ class SetUserLocationRenderMode extends React.Component {
   }
 
   onRenderModeChange(index, renderMode) {
-    this.setState({renderMode});
+    this.setState({ renderMode });
   }
 
   render() {
@@ -118,17 +118,18 @@ class SetUserLocationRenderMode extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._renderModeOptions}
-        onOptionPress={this.onRenderModeChange}>
+        onOptionPress={this.onRenderModeChange}
+      >
         <SettingsPane
           settings={this.state}
-          onUpdateSettings={settings => this.setState(settings)}
+          onUpdateSettings={(settings) => this.setState(settings)}
         />
-        <MapLibreGL.MapView style={sheet.matchParent} tintColor={'red'}>
+        <MapLibreGL.MapView style={sheet.matchParent} tintColor="red">
           <MapLibreGL.Camera
             followUserLocation={followUserLocation}
             followUserMode={followUserMode}
           />
-          {this.state.renderMode !== 'hidden' && (
+          {this.state.renderMode !== "hidden" && (
             <MapLibreGL.UserLocation
               renderMode={this.state.renderMode}
               showsUserHeadingIndicator={showsUserHeadingIndicator}
diff --git a/packages/examples/src/examples/UserLocation/SetUserLocationVerticalAlignment.js b/packages/examples/src/examples/UserLocation/SetUserLocationVerticalAlignment.js
index fcca72bd2..e6b83d82f 100755
--- a/packages/examples/src/examples/UserLocation/SetUserLocationVerticalAlignment.js
+++ b/packages/examples/src/examples/UserLocation/SetUserLocationVerticalAlignment.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
 
-import sheet from '../../styles/sheet';
-import TabBarPage from '../common/TabBarPage';
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
 
 const Alignments = {
   Center: [0, 0, 0, 0],
@@ -14,8 +14,8 @@ class SetUserLocationVerticalAlignment extends React.Component {
   constructor(props) {
     super(props);
 
-    this._alignmentOptions = Object.keys(Alignments).map(key => {
-      console.log('key: ', key);
+    this._alignmentOptions = Object.keys(Alignments).map((key) => {
+      console.log("key: ", key);
 
       return {
         label: key,
@@ -41,10 +41,12 @@ class SetUserLocationVerticalAlignment extends React.Component {
       <TabBarPage
         {...this.props}
         options={this._alignmentOptions}
-        onOptionPress={this.onAlignmentChange}>
+        onOptionPress={this.onAlignmentChange}
+      >
         <MapLibreGL.MapView
           contentInset={this.state.currentAlignmentMode}
-          style={sheet.matchParent}>
+          style={sheet.matchParent}
+        >
           <MapLibreGL.Camera followUserLocation />
           <MapLibreGL.UserLocation />
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/UserLocation/UserLocationChange.js b/packages/examples/src/examples/UserLocation/UserLocationChange.js
index bbed49812..1d0b5fd25 100755
--- a/packages/examples/src/examples/UserLocation/UserLocationChange.js
+++ b/packages/examples/src/examples/UserLocation/UserLocationChange.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import {Text} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React from "react";
+import { Text } from "react-native";
 
-import sheet from '../../styles/sheet';
-import Page from '../common/Page';
-import Bubble from '../common/Bubble';
+import sheet from "../../styles/sheet";
+import Bubble from "../common/Bubble";
+import Page from "../common/Page";
 
 class UserLocationChange extends React.Component {
   constructor(props) {
@@ -57,12 +57,12 @@ class UserLocationChange extends React.Component {
       <Page>
         <MapLibreGL.MapView style={sheet.matchParent}>
           <MapLibreGL.UserLocation
-            visible={true}
+            visible
             onUpdate={this.onUserLocationUpdate}
           />
           <MapLibreGL.Camera
             zoomLevel={16}
-            followUserMode={'normal'}
+            followUserMode="normal"
             followUserLocation
           />
         </MapLibreGL.MapView>
diff --git a/packages/examples/src/examples/common/Bubble.js b/packages/examples/src/examples/common/Bubble.js
index b71864c24..4123a1477 100755
--- a/packages/examples/src/examples/common/Bubble.js
+++ b/packages/examples/src/examples/common/Bubble.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {View, StyleSheet, TouchableOpacity} from 'react-native';
+import PropTypes from "prop-types";
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    backgroundColor: 'white',
+    alignItems: "center",
+    backgroundColor: "white",
     borderRadius: 30,
     bottom: 16,
-    justifyContent: 'center',
+    justifyContent: "center",
     left: 48,
     minHeight: 60,
     paddingVertical: 16,
-    position: 'absolute',
+    position: "absolute",
     right: 48,
   },
 });
diff --git a/packages/examples/src/examples/common/MapHeader.js b/packages/examples/src/examples/common/MapHeader.js
index 41161b230..fda7b1872 100644
--- a/packages/examples/src/examples/common/MapHeader.js
+++ b/packages/examples/src/examples/common/MapHeader.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {StyleSheet} from 'react-native';
-import {Header} from 'react-native-elements';
+import PropTypes from "prop-types";
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Header } from "react-native-elements";
 
-import colors from '../../styles/colors';
+import colors from "../../styles/colors";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,7 +25,7 @@ class MapHeader extends React.PureComponent {
   };
 
   static defaultProps = {
-    statusBarTextTheme: 'light-content',
+    statusBarTextTheme: "light-content",
     statusBarColor: colors.primary.blueDark,
     backgroundColor: colors.primary.blue,
   };
@@ -43,12 +43,12 @@ class MapHeader extends React.PureComponent {
         statusBarProps={statusBarProps}
         containerStyle={styles.container}
         leftComponent={{
-          icon: this.props.onBack ? 'arrow-back' : '',
+          icon: this.props.onBack ? "arrow-back" : "",
           onPress: this.props.onBack,
           color: colors.secondary.white,
           underlayColor: this.props.backgroundColor,
         }}
-        centerComponent={{text: this.props.label, style: styles.label}}
+        centerComponent={{ text: this.props.label, style: styles.label }}
       />
     );
   }
diff --git a/packages/examples/src/examples/common/PulseCircleLayer.js b/packages/examples/src/examples/common/PulseCircleLayer.js
index e2affdcbb..c0cbd4eb6 100755
--- a/packages/examples/src/examples/common/PulseCircleLayer.js
+++ b/packages/examples/src/examples/common/PulseCircleLayer.js
@@ -1,22 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Animated} from 'react-native';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import PropTypes from "prop-types";
+import React from "react";
+import { Animated } from "react-native";
 
 const styles = {
   innerCircle: {
-    circleColor: 'white',
+    circleColor: "white",
     circleStrokeWidth: 1,
-    circleStrokeColor: '#c6d2e1',
+    circleStrokeColor: "#c6d2e1",
   },
   innerCirclePulse: {
-    circleColor: '#4264fb',
-    circleStrokeColor: '#c6d2e1',
+    circleColor: "#4264fb",
+    circleStrokeColor: "#c6d2e1",
     circleStrokeWidth: 1,
   },
   outerCircle: {
     circleOpacity: 0.4,
-    circleColor: '#c6d2e1',
+    circleColor: "#c6d2e1",
   },
 };
 
@@ -88,7 +88,7 @@ class PulseCircleLayer extends React.Component {
     );
 
     this._loopAnim.start(() => {
-      this.setState({pulseOpacity: 1});
+      this.setState({ pulseOpacity: 1 });
     });
   }
 
@@ -104,12 +104,12 @@ class PulseCircleLayer extends React.Component {
     const innerCircleStyle = [
       styles.innerCircle,
       this.props.innerCircleStyle,
-      {circleRadius: this.props.radius},
+      { circleRadius: this.props.radius },
     ];
 
     const innerCirclePulseStyle = [
       styles.innerCirclePulse,
-      {circleRadius: this.state.innerRadius},
+      { circleRadius: this.state.innerRadius },
     ];
 
     const outerCircleStyle = [
@@ -124,7 +124,8 @@ class PulseCircleLayer extends React.Component {
     return (
       <MapLibreGL.Animated.ShapeSource
         id="pulseCircleSource"
-        shape={this.props.shape}>
+        shape={this.props.shape}
+      >
         <MapLibreGL.Animated.CircleLayer
           id="pulseOuterCircle"
           style={outerCircleStyle}
diff --git a/packages/examples/src/examples/common/TabBarPage.js b/packages/examples/src/examples/common/TabBarPage.js
index a64cec4e0..73986cf52 100755
--- a/packages/examples/src/examples/common/TabBarPage.js
+++ b/packages/examples/src/examples/common/TabBarPage.js
@@ -1,11 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {StyleSheet, ScrollView} from 'react-native';
-import {ButtonGroup} from 'react-native-elements';
+import PropTypes from "prop-types";
+import React from "react";
+import { StyleSheet, ScrollView } from "react-native";
+import { ButtonGroup } from "react-native-elements";
 
-import colors from '../../styles/colors';
-
-import Page from './Page';
+import Page from "./Page";
+import colors from "../../styles/colors";
 
 const TAB_BAR_HEIGHT = 70;
 
@@ -53,9 +52,9 @@ class TabBarPage extends React.Component {
   }
 
   onOptionPress(index) {
-    this.setState({currentIndex: index});
+    this.setState({ currentIndex: index });
 
-    if (typeof this.props.onOptionPress === 'function') {
+    if (typeof this.props.onOptionPress === "function") {
       const option = this.props.options[index];
       this.props.onOptionPress(index, option.data);
     }
@@ -67,7 +66,7 @@ class TabBarPage extends React.Component {
       containerBorderRadius: 0,
       onPress: this.onOptionPress,
       selectedIndex: this.state.currentIndex,
-      buttons: this.props.options.map(o => o.label),
+      buttons: this.props.options.map((o) => o.label),
       containerStyle: styles.buttonGroup,
     };
 
@@ -76,7 +75,7 @@ class TabBarPage extends React.Component {
     }
 
     const view = this.props.scrollable ? (
-      <ScrollView horizontal style={{maxHeight: TAB_BAR_HEIGHT}}>
+      <ScrollView horizontal style={{ maxHeight: TAB_BAR_HEIGHT }}>
         <ButtonGroup {...buttonGroupProps} />
       </ScrollView>
     ) : (
diff --git a/packages/examples/src/examples/index.js b/packages/examples/src/examples/index.js
index 8a2412e2a..47faaac1e 100644
--- a/packages/examples/src/examples/index.js
+++ b/packages/examples/src/examples/index.js
@@ -1,60 +1,60 @@
 // ANIMATIONS
-export { default as AnimatedLine } from './Animations/AnimatedLine';
-export { default as DriveTheLine } from './Animations/DriveTheLine';
+export { default as AnimatedLine } from "./Animations/AnimatedLine";
+export { default as DriveTheLine } from "./Animations/DriveTheLine";
 // ANNOTATIONS
-export { default as CustomCallout } from './Annotations/CustomCallout';
-export { default as Heatmap } from './Annotations/Heatmap';
-export { default as MarkerView } from './Annotations/MarkerView';
-export { default as ShowPointAnnotation } from './Annotations/ShowPointAnnotation';
-export { default as PointAnnotationAnchors } from './Annotations/PointAnnotationAnchors';
+export { default as CustomCallout } from "./Annotations/CustomCallout";
+export { default as Heatmap } from "./Annotations/Heatmap";
+export { default as MarkerView } from "./Annotations/MarkerView";
+export { default as ShowPointAnnotation } from "./Annotations/ShowPointAnnotation";
+export { default as PointAnnotationAnchors } from "./Annotations/PointAnnotationAnchors";
 // CAMERA
-export { default as CompassView } from './Camera/CompassView';
-export { default as Fit } from './Camera/Fit';
-export { default as FlyTo } from './Camera/FlyTo';
-export { default as GetCenter } from './Camera/GetCenter';
-export { default as GetZoom } from './Camera/GetZoom';
-export { default as RestrictMapBounds } from './Camera/RestrictMapBounds';
-export { default as SetHeading } from './Camera/SetHeading';
-export { default as SetPitch } from './Camera/SetPitch';
-export { default as SetUserTrackingModes } from './Camera/SetUserTrackingModes';
-export { default as TakeSnapshot } from './Camera/TakeSnapshot';
-export { default as TakeSnapshotWithMap } from './Camera/TakeSnapshotWithMap';
-export { default as YoYo } from './Camera/YoYo';
+export { default as CompassView } from "./Camera/CompassView";
+export { default as Fit } from "./Camera/Fit";
+export { default as FlyTo } from "./Camera/FlyTo";
+export { default as GetCenter } from "./Camera/GetCenter";
+export { default as GetZoom } from "./Camera/GetZoom";
+export { default as RestrictMapBounds } from "./Camera/RestrictMapBounds";
+export { default as SetHeading } from "./Camera/SetHeading";
+export { default as SetPitch } from "./Camera/SetPitch";
+export { default as SetUserTrackingModes } from "./Camera/SetUserTrackingModes";
+export { default as TakeSnapshot } from "./Camera/TakeSnapshot";
+export { default as TakeSnapshotWithMap } from "./Camera/TakeSnapshotWithMap";
+export { default as YoYo } from "./Camera/YoYo";
 // FILLRASTERLAYER
-export { default as ChoroplethLayerByZoomLevel } from './FillRasterLayer/ChoroplethLayerByZoomLevel';
-export { default as CustomVectorSource } from './FillRasterLayer/CustomVectorSource';
-export { default as GeoJSONSource } from './FillRasterLayer/GeoJSONSource';
-export { default as ImageOverlay } from './FillRasterLayer/ImageOverlay';
-export { default as IndoorBuilding } from './FillRasterLayer/IndoorBuilding';
-export { default as QueryAtPoint } from './FillRasterLayer/QueryAtPoint';
-export { default as QueryWithRect } from './FillRasterLayer/QueryWithRect';
-export { default as WatercolorRasterTiles } from './FillRasterLayer/WatercolorRasterTiles';
+export { default as ChoroplethLayerByZoomLevel } from "./FillRasterLayer/ChoroplethLayerByZoomLevel";
+export { default as CustomVectorSource } from "./FillRasterLayer/CustomVectorSource";
+export { default as GeoJSONSource } from "./FillRasterLayer/GeoJSONSource";
+export { default as ImageOverlay } from "./FillRasterLayer/ImageOverlay";
+export { default as IndoorBuilding } from "./FillRasterLayer/IndoorBuilding";
+export { default as QueryAtPoint } from "./FillRasterLayer/QueryAtPoint";
+export { default as QueryWithRect } from "./FillRasterLayer/QueryWithRect";
+export { default as WatercolorRasterTiles } from "./FillRasterLayer/WatercolorRasterTiles";
 // LINE LAYER
-export { default as GradientLine } from './LineLayer/GradientLine';
+export { default as GradientLine } from "./LineLayer/GradientLine";
 // MAP
-export { default as ChangeLayerColor } from './Map/ChangeLayerColor';
-export { default as CreateOfflineRegion } from './Map/CreateOfflineRegion';
-export { default as PointInMapView } from './Map/PointInMapView';
-export { default as ShowAndHideLayer } from './Map/ShowAndHideLayer';
-export { default as ShowClick } from './Map/ShowClick';
-export { default as ShowMap } from './Map/ShowMap';
-export { default as ShowMapLocalStyle } from './Map/ShowMapLocalStyle';
-export { default as ShowRegionDidChange } from './Map/ShowRegionDidChange';
-export { default as SourceLayerVisibility } from './Map/SourceLayerVisibility';
-export { default as StyleJson } from './Map/StyleJson';
-export { default as TwoByTwo } from './Map/TwoByTwo';
+export { default as ChangeLayerColor } from "./Map/ChangeLayerColor";
+export { default as CreateOfflineRegion } from "./Map/CreateOfflineRegion";
+export { default as PointInMapView } from "./Map/PointInMapView";
+export { default as ShowAndHideLayer } from "./Map/ShowAndHideLayer";
+export { default as ShowClick } from "./Map/ShowClick";
+export { default as ShowMap } from "./Map/ShowMap";
+export { default as ShowMapLocalStyle } from "./Map/ShowMapLocalStyle";
+export { default as ShowRegionDidChange } from "./Map/ShowRegionDidChange";
+export { default as SourceLayerVisibility } from "./Map/SourceLayerVisibility";
+export { default as StyleJson } from "./Map/StyleJson";
+export { default as TwoByTwo } from "./Map/TwoByTwo";
 // SYMBOLCIRCLELAYER
-export { default as CustomIcon } from './SymbolCircleLayer/CustomIcon';
-export { default as DataDrivenCircleColors } from './SymbolCircleLayer/DataDrivenCircleColors';
-export { default as EarthQuakes } from './SymbolCircleLayer/EarthQuakes';
-export { default as ShapeSourceIcon } from './SymbolCircleLayer/ShapeSourceIcon';
+export { default as CustomIcon } from "./SymbolCircleLayer/CustomIcon";
+export { default as DataDrivenCircleColors } from "./SymbolCircleLayer/DataDrivenCircleColors";
+export { default as EarthQuakes } from "./SymbolCircleLayer/EarthQuakes";
+export { default as ShapeSourceIcon } from "./SymbolCircleLayer/ShapeSourceIcon";
 // USERLOCATION
-export { default as SetDisplacement } from './UserLocation/SetDisplacement';
-export { default as SetTintColor } from './UserLocation/SetTintColor';
-export { default as SetUserLocationRenderMode } from './UserLocation/SetUserLocationRenderMode';
-export { default as SetUserLocationVerticalAlignment } from './UserLocation/SetUserLocationVerticalAlignment';
-export { default as UserLocationChange } from './UserLocation/UserLocationChange';
-export { default as SetAndroidPreferredFramesPerSecond } from './UserLocation/SetAndroidPreferredFramesPerSecond';
+export { default as SetDisplacement } from "./UserLocation/SetDisplacement";
+export { default as SetTintColor } from "./UserLocation/SetTintColor";
+export { default as SetUserLocationRenderMode } from "./UserLocation/SetUserLocationRenderMode";
+export { default as SetUserLocationVerticalAlignment } from "./UserLocation/SetUserLocationVerticalAlignment";
+export { default as UserLocationChange } from "./UserLocation/UserLocationChange";
+export { default as SetAndroidPreferredFramesPerSecond } from "./UserLocation/SetAndroidPreferredFramesPerSecond";
 // MISC
-export { default as BugReportPage } from './BugReportPage';
-export { default as CacheManagement } from './CacheManagement';
\ No newline at end of file
+export { default as BugReportPage } from "./BugReportPage";
+export { default as CacheManagement } from "./CacheManagement";
diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js
index a9bdf13e1..8cacccb6a 100644
--- a/packages/examples/src/index.js
+++ b/packages/examples/src/index.js
@@ -1,4 +1,4 @@
-export * from './examples';
-export { default as sheet } from './styles/sheet';
-export { default as colors } from './styles/colors';
-export * from './utils';
\ No newline at end of file
+export * from "./examples";
+export { default as sheet } from "./styles/sheet";
+export { default as colors } from "./styles/colors";
+export * from "./utils";
diff --git a/packages/examples/src/scenes/Examples.js b/packages/examples/src/scenes/Examples.js
index e3c023b6c..4c4d0fc66 100644
--- a/packages/examples/src/scenes/Examples.js
+++ b/packages/examples/src/scenes/Examples.js
@@ -1,26 +1,35 @@
-import React from 'react';
-import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';
-import {Icon} from 'react-native-elements';
-import {NavigationContainer} from '@react-navigation/native';
-import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
-import PropTypes from 'prop-types';
+import { NavigationContainer } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from "@react-navigation/stack";
+import PropTypes from "prop-types";
+import React from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { Icon } from "react-native-elements";
 
-import * as MaplibreExamples from '../examples';
-import { default as MapHeader } from '../examples/common/MapHeader'
-import { default as sheet } from '../styles/sheet'
+import * as MaplibreExamples from "../examples";
+import { default as MapHeader } from "../examples/common/MapHeader";
+import { default as sheet } from "../styles/sheet";
 
 const styles = StyleSheet.create({
   exampleList: {
     flex: 1,
   },
   exampleListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    justifyContent: "space-between",
     paddingHorizontal: 16,
     paddingVertical: 32,
   },
   exampleListItemBorder: {
-    borderBottomColor: '#ccc',
+    borderBottomColor: "#ccc",
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   exampleListLabel: {
@@ -44,84 +53,141 @@ class ExampleGroup {
 }
 
 const Examples = new ExampleGroup(
-  'React Native Mapbox GL',
+  "React Native Mapbox GL",
   [
-    new ExampleItem('Bug Report Template', MaplibreExamples.BugReportPage),
-    new ExampleGroup('Map', [
-      new ExampleItem('Show Map', MaplibreExamples.ShowMap),
-      new ExampleItem('Show Map With Local Style.JSON', MaplibreExamples.ShowMapLocalStyle),
-      new ExampleItem('Show Click', MaplibreExamples.ShowClick),
-      new ExampleItem('Show Region Did Change', MaplibreExamples.ShowRegionDidChange),
-      new ExampleItem('Two Map Views', MaplibreExamples.TwoByTwo),
-      new ExampleItem('Create Offline Region', MaplibreExamples.CreateOfflineRegion),
-      new ExampleItem('Get Pixel Point in MapView', MaplibreExamples.PointInMapView),
-      new ExampleItem('Show and hide a layer', MaplibreExamples.ShowAndHideLayer),
-      new ExampleItem('Change Layer Color', MaplibreExamples.ChangeLayerColor),
-      new ExampleItem('Source Layer Visiblity', MaplibreExamples.SourceLayerVisibility),
-      new ExampleItem('Style JSON', MaplibreExamples.StyleJson),
-      new ExampleItem('Set Tint Color', MaplibreExamples.SetTintColor),
+    new ExampleItem("Bug Report Template", MaplibreExamples.BugReportPage),
+    new ExampleGroup("Map", [
+      new ExampleItem("Show Map", MaplibreExamples.ShowMap),
+      new ExampleItem(
+        "Show Map With Local Style.JSON",
+        MaplibreExamples.ShowMapLocalStyle,
+      ),
+      new ExampleItem("Show Click", MaplibreExamples.ShowClick),
+      new ExampleItem(
+        "Show Region Did Change",
+        MaplibreExamples.ShowRegionDidChange,
+      ),
+      new ExampleItem("Two Map Views", MaplibreExamples.TwoByTwo),
+      new ExampleItem(
+        "Create Offline Region",
+        MaplibreExamples.CreateOfflineRegion,
+      ),
+      new ExampleItem(
+        "Get Pixel Point in MapView",
+        MaplibreExamples.PointInMapView,
+      ),
+      new ExampleItem(
+        "Show and hide a layer",
+        MaplibreExamples.ShowAndHideLayer,
+      ),
+      new ExampleItem("Change Layer Color", MaplibreExamples.ChangeLayerColor),
+      new ExampleItem(
+        "Source Layer Visiblity",
+        MaplibreExamples.SourceLayerVisibility,
+      ),
+      new ExampleItem("Style JSON", MaplibreExamples.StyleJson),
+      new ExampleItem("Set Tint Color", MaplibreExamples.SetTintColor),
     ]),
-    new ExampleGroup('Camera', [
-      new ExampleItem('Fit (Bounds, Center/Zoom, Padding)', MaplibreExamples.Fit),
-      new ExampleItem('Set Pitch', MaplibreExamples.SetPitch),
-      new ExampleItem('Set Heading', MaplibreExamples.SetHeading),
-      new ExampleItem('Fly To', MaplibreExamples.FlyTo),
-      new ExampleItem('Restrict Bounds', MaplibreExamples.RestrictMapBounds),
-      new ExampleItem('Set User Tracking Modes', MaplibreExamples.SetUserTrackingModes),
-      new ExampleItem('Yo Yo Camera', MaplibreExamples.YoYo),
-      new ExampleItem('Take Snapshot Without Map', MaplibreExamples.TakeSnapshot),
-      new ExampleItem('Take Snapshot With Map', MaplibreExamples.TakeSnapshotWithMap),
-      new ExampleItem('Get Current Zoom', MaplibreExamples.GetZoom),
-      new ExampleItem('Get Center', MaplibreExamples.GetCenter),
-      new ExampleItem('Compass View', MaplibreExamples.CompassView),
+    new ExampleGroup("Camera", [
+      new ExampleItem(
+        "Fit (Bounds, Center/Zoom, Padding)",
+        MaplibreExamples.Fit,
+      ),
+      new ExampleItem("Set Pitch", MaplibreExamples.SetPitch),
+      new ExampleItem("Set Heading", MaplibreExamples.SetHeading),
+      new ExampleItem("Fly To", MaplibreExamples.FlyTo),
+      new ExampleItem("Restrict Bounds", MaplibreExamples.RestrictMapBounds),
+      new ExampleItem(
+        "Set User Tracking Modes",
+        MaplibreExamples.SetUserTrackingModes,
+      ),
+      new ExampleItem("Yo Yo Camera", MaplibreExamples.YoYo),
+      new ExampleItem(
+        "Take Snapshot Without Map",
+        MaplibreExamples.TakeSnapshot,
+      ),
+      new ExampleItem(
+        "Take Snapshot With Map",
+        MaplibreExamples.TakeSnapshotWithMap,
+      ),
+      new ExampleItem("Get Current Zoom", MaplibreExamples.GetZoom),
+      new ExampleItem("Get Center", MaplibreExamples.GetCenter),
+      new ExampleItem("Compass View", MaplibreExamples.CompassView),
     ]),
-    new ExampleGroup('User Location', [
+    new ExampleGroup("User Location", [
       new ExampleItem(
-        'Set User Location Vertical Alignment',
+        "Set User Location Vertical Alignment",
         MaplibreExamples.SetUserLocationVerticalAlignment,
       ),
-      new ExampleItem('User Location Updates', MaplibreExamples.UserLocationChange),
-      new ExampleItem('Set Displacement', MaplibreExamples.SetDisplacement),
       new ExampleItem(
-        'Set User Location Render Mode',
+        "User Location Updates",
+        MaplibreExamples.UserLocationChange,
+      ),
+      new ExampleItem("Set Displacement", MaplibreExamples.SetDisplacement),
+      new ExampleItem(
+        "Set User Location Render Mode",
         MaplibreExamples.SetUserLocationRenderMode,
       ),
-      new ExampleItem('Set Preferred Frames Per Second (Android only)', MaplibreExamples.SetAndroidPreferredFramesPerSecond),
+      new ExampleItem(
+        "Set Preferred Frames Per Second (Android only)",
+        MaplibreExamples.SetAndroidPreferredFramesPerSecond,
+      ),
     ]),
-    new ExampleGroup('Symbol/CircleLayer', [
-      new ExampleItem('Custom Icon', MaplibreExamples.CustomIcon),
-      new ExampleItem('Clustering Earthquakes', MaplibreExamples.EarthQuakes),
-      new ExampleItem('Shape Source From Icon', MaplibreExamples.ShapeSourceIcon),
-      new ExampleItem('Data Driven Circle Colors', MaplibreExamples.DataDrivenCircleColors),
+    new ExampleGroup("Symbol/CircleLayer", [
+      new ExampleItem("Custom Icon", MaplibreExamples.CustomIcon),
+      new ExampleItem("Clustering Earthquakes", MaplibreExamples.EarthQuakes),
+      new ExampleItem(
+        "Shape Source From Icon",
+        MaplibreExamples.ShapeSourceIcon,
+      ),
+      new ExampleItem(
+        "Data Driven Circle Colors",
+        MaplibreExamples.DataDrivenCircleColors,
+      ),
     ]),
-    new ExampleGroup('Fill/RasterLayer', [
-      new ExampleItem('GeoJSON Source', MaplibreExamples.GeoJSONSource),
-      new ExampleItem('Watercolor Raster Tiles', MaplibreExamples.WatercolorRasterTiles),
-      new ExampleItem('Indoor Building Map', MaplibreExamples.IndoorBuilding),
-      new ExampleItem('Query Feature Point', MaplibreExamples.QueryAtPoint),
-      new ExampleItem('Query Features Bounding Box', MaplibreExamples.QueryWithRect),
-      new ExampleItem('Custom Vector Source', MaplibreExamples.CustomVectorSource),
-      new ExampleItem('Image Overlay', MaplibreExamples.ImageOverlay),
-      new ExampleItem(
-        'Choropleth Layer By Zoom Level',
+    new ExampleGroup("Fill/RasterLayer", [
+      new ExampleItem("GeoJSON Source", MaplibreExamples.GeoJSONSource),
+      new ExampleItem(
+        "Watercolor Raster Tiles",
+        MaplibreExamples.WatercolorRasterTiles,
+      ),
+      new ExampleItem("Indoor Building Map", MaplibreExamples.IndoorBuilding),
+      new ExampleItem("Query Feature Point", MaplibreExamples.QueryAtPoint),
+      new ExampleItem(
+        "Query Features Bounding Box",
+        MaplibreExamples.QueryWithRect,
+      ),
+      new ExampleItem(
+        "Custom Vector Source",
+        MaplibreExamples.CustomVectorSource,
+      ),
+      new ExampleItem("Image Overlay", MaplibreExamples.ImageOverlay),
+      new ExampleItem(
+        "Choropleth Layer By Zoom Level",
         MaplibreExamples.ChoroplethLayerByZoomLevel,
       ),
     ]),
-    new ExampleGroup('LineLayer', [
-      new ExampleItem('GradientLine', MaplibreExamples.GradientLine),
+    new ExampleGroup("LineLayer", [
+      new ExampleItem("GradientLine", MaplibreExamples.GradientLine),
     ]),
-    new ExampleGroup('Annotations', [
-      new ExampleItem('Show Point Annotation', MaplibreExamples.ShowPointAnnotation),
-      new ExampleItem('Point Annotation Anchors', MaplibreExamples.PointAnnotationAnchors),
-      new ExampleItem('Marker View', MaplibreExamples.MarkerView),
-      new ExampleItem('Heatmap', MaplibreExamples.Heatmap),
-      new ExampleItem('Custom Callout', MaplibreExamples.CustomCallout),
+    new ExampleGroup("Annotations", [
+      new ExampleItem(
+        "Show Point Annotation",
+        MaplibreExamples.ShowPointAnnotation,
+      ),
+      new ExampleItem(
+        "Point Annotation Anchors",
+        MaplibreExamples.PointAnnotationAnchors,
+      ),
+      new ExampleItem("Marker View", MaplibreExamples.MarkerView),
+      new ExampleItem("Heatmap", MaplibreExamples.Heatmap),
+      new ExampleItem("Custom Callout", MaplibreExamples.CustomCallout),
     ]),
-    new ExampleGroup('Animations', [
-      new ExampleItem('Animated Line', MaplibreExamples.AnimatedLine),
-      new ExampleItem('Animation Along a Line', MaplibreExamples.DriveTheLine),
+    new ExampleGroup("Animations", [
+      new ExampleItem("Animated Line", MaplibreExamples.AnimatedLine),
+      new ExampleItem("Animation Along a Line", MaplibreExamples.DriveTheLine),
     ]),
-    new ExampleItem('Cache management', MaplibreExamples.CacheManagement),
+    new ExampleItem("Cache management", MaplibreExamples.CacheManagement),
   ],
   true,
 );
@@ -130,7 +196,7 @@ function FlatMapExamples(example, flattenedExamples = []) {
   if (example instanceof ExampleGroup) {
     return [
       ...flattenedExamples,
-      ...example.items.flatMap(e => FlatMapExamples(e)),
+      ...example.items.flatMap((e) => FlatMapExamples(e)),
       example,
     ];
   }
@@ -139,9 +205,9 @@ function FlatMapExamples(example, flattenedExamples = []) {
 
 const FlatExamples = FlatMapExamples(Examples);
 
-function ExampleList({route, navigation}) {
-  const {name} = route;
-  const example = FlatExamples.find(e => e.label === name) || Examples;
+function ExampleList({ route, navigation }) {
+  const { name } = route;
+  const example = FlatExamples.find((e) => e.label === name) || Examples;
 
   const back = !example.root
     ? {
@@ -155,7 +221,7 @@ function ExampleList({route, navigation}) {
     navigation.navigate(item.label);
   }
 
-  function renderItem({item}) {
+  function renderItem({ item }) {
     return (
       <View style={styles.exampleListItemBorder}>
         <TouchableOpacity onPress={() => itemPress(item)}>
@@ -175,7 +241,7 @@ function ExampleList({route, navigation}) {
         <FlatList
           style={styles.exampleList}
           data={example.items}
-          keyExtractor={item => item.label}
+          keyExtractor={(item) => item.label}
           renderItem={renderItem}
         />
       </View>
@@ -216,8 +282,9 @@ function Home() {
         screenOptions={{
           headerShown: false,
           transitionSpec: TransitionPresets.SlideFromRightIOS.transitionSpec,
-        }}>
-        {FlatExamples.map(example => buildNavigationScreens(example, Stack))}
+        }}
+      >
+        {FlatExamples.map((example) => buildNavigationScreens(example, Stack))}
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/packages/examples/src/styles/colors.js b/packages/examples/src/styles/colors.js
index 07aa4f2cd..c60f0b6bf 100755
--- a/packages/examples/src/styles/colors.js
+++ b/packages/examples/src/styles/colors.js
@@ -1,47 +1,47 @@
 const colors = {
   primary: {
-    blueDark: '#314ccd',
-    blue: '#4264fb',
-    blueLight: '#aab7ef',
-    blueFaint: '#edf0fd',
-    grayDark: '#273d56',
-    gray: '#607d9c',
-    grayLight: '#c6d2e1',
-    grayFaint: '#f4f7fb',
-    pinkDark: '#b43b71',
-    pink: '#ee4e8b',
-    pinkLight: '#f8c8da',
-    pinkFaint: '#fbe5ee',
+    blueDark: "#314ccd",
+    blue: "#4264fb",
+    blueLight: "#aab7ef",
+    blueFaint: "#edf0fd",
+    grayDark: "#273d56",
+    gray: "#607d9c",
+    grayLight: "#c6d2e1",
+    grayFaint: "#f4f7fb",
+    pinkDark: "#b43b71",
+    pink: "#ee4e8b",
+    pinkLight: "#f8c8da",
+    pinkFaint: "#fbe5ee",
   },
 
   secondary: {
-    purpleDark: '#5a3fc0',
-    purple: '#7753eb',
-    purpleLight: '#c5b9eb',
-    purpleFaint: '#f2effa',
+    purpleDark: "#5a3fc0",
+    purple: "#7753eb",
+    purpleLight: "#c5b9eb",
+    purpleFaint: "#f2effa",
 
-    orangeDark: '#ba7334',
-    orange: '#f79640',
-    orangeLight: '#fbcea6',
-    orangeFaint: '#feefe2',
+    orangeDark: "#ba7334",
+    orange: "#f79640",
+    orangeLight: "#fbcea6",
+    orangeFaint: "#feefe2",
 
-    greenDark: '#269561',
-    green: '#33c377',
-    greenLight: '#afdec5',
-    greenFaint: '#e8f5ee',
+    greenDark: "#269561",
+    green: "#33c377",
+    greenLight: "#afdec5",
+    greenFaint: "#e8f5ee",
 
-    yellowDark: '#a4a62d',
-    yellow: '#d9d838',
-    yellowLight: '#FFF5A0',
-    yellowFaint: '#FCFCDF',
+    yellowDark: "#a4a62d",
+    yellow: "#d9d838",
+    yellowLight: "#FFF5A0",
+    yellowFaint: "#FCFCDF",
 
-    redDark: '#ba3b3f',
-    red: '#f74e4e',
-    redLight: '#f6b7b7',
-    redFaint: '#fbe5e5',
+    redDark: "#ba3b3f",
+    red: "#f74e4e",
+    redLight: "#f6b7b7",
+    redFaint: "#fbe5e5",
 
-    white: '#ffffff',
-    black: '#000000',
+    white: "#ffffff",
+    black: "#000000",
   },
 };
 
diff --git a/packages/examples/src/styles/sheet.js b/packages/examples/src/styles/sheet.js
index f3572c1b4..2517609f2 100755
--- a/packages/examples/src/styles/sheet.js
+++ b/packages/examples/src/styles/sheet.js
@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from "react-native";
 
 const styles = {};
 
diff --git a/packages/examples/src/utils/RouteSimulator.js b/packages/examples/src/utils/RouteSimulator.js
index d357411a7..b338b5234 100755
--- a/packages/examples/src/utils/RouteSimulator.js
+++ b/packages/examples/src/utils/RouteSimulator.js
@@ -1,7 +1,7 @@
-import {Animated} from 'react-native';
-import along from '@turf/along';
-import findDistance from '@turf/distance';
-import {point} from '@turf/helpers';
+import along from "@turf/along";
+import findDistance from "@turf/distance";
+import { point } from "@turf/helpers";
+import { Animated } from "react-native";
 
 class Polyline {
   constructor(lineStringFeature) {
@@ -78,7 +78,7 @@ class RouteSimulator {
       this._currentDistance += this._speed;
 
       // interpolate between previous to current distance
-      const listener = step => {
+      const listener = (step) => {
         const currentPosition = this._polyline.coordinateFromStart(step.value);
         this.emit(currentPosition);
       };
diff --git a/packages/examples/src/utils/index.js b/packages/examples/src/utils/index.js
index 465a05504..24e8f3c7b 100755
--- a/packages/examples/src/utils/index.js
+++ b/packages/examples/src/utils/index.js
@@ -1,6 +1,6 @@
-import {Platform} from 'react-native';
+import { Platform } from "react-native";
 
-export const IS_ANDROID = Platform.OS === 'android';
+export const IS_ANDROID = Platform.OS === "android";
 export const DEFAULT_CENTER_COORDINATE = [-77.036086, 38.910233];
 export const SF_OFFICE_COORDINATE = [-122.400021, 37.789085];
 
diff --git a/packages/expo-app/App.js b/packages/expo-app/App.js
index bfdf8d55b..79a125668 100644
--- a/packages/expo-app/App.js
+++ b/packages/expo-app/App.js
@@ -1,21 +1,20 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {StyleSheet, Text, View, LogBox, SafeAreaView} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-
-import { sheet, colors } from '@maplibre-react-native/examples';
-import { default as Home } from '@maplibre-react-native/examples/src/scenes/Examples';
-import { IS_ANDROID } from '@maplibre-react-native/examples/src/utils';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import { sheet, colors } from "@maplibre-react-native/examples";
+import { default as Home } from "@maplibre-react-native/examples/src/scenes/Examples";
+import { IS_ANDROID } from "@maplibre-react-native/examples/src/utils";
+import React from "react";
+import { StyleSheet, Text, View, LogBox, SafeAreaView } from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
 
 LogBox.ignoreLogs([
-  'Warning: isMounted(...) is deprecated',
-  'Module RCTImageLoader',
+  "Warning: isMounted(...) is deprecated",
+  "Module RCTImageLoader",
 ]);
 
 const styles = StyleSheet.create({
   noPermissionsText: {
     fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
   },
 });
 
@@ -50,8 +49,9 @@ class App extends React.Component {
       }
       return (
         <SafeAreaView
-          style={[sheet.matchParent, {backgroundColor: colors.primary.blue}]}
-          forceInset={{top: 'always'}}>
+          style={[sheet.matchParent, { backgroundColor: colors.primary.blue }]}
+          forceInset={{ top: "always" }}
+        >
           <View style={sheet.matchParent}>
             <Text style={styles.noPermissionsText}>
               You need to accept location permissions in order to use this
diff --git a/packages/expo-app/babel.config.js b/packages/expo-app/babel.config.js
index 3ea44fe46..d68a97446 100644
--- a/packages/expo-app/babel.config.js
+++ b/packages/expo-app/babel.config.js
@@ -3,11 +3,11 @@ module.exports = function (api) {
   return {
     presets: [
       [
-        'babel-preset-expo',
+        "babel-preset-expo",
         {
-          jsxRuntime: 'automatic'
+          jsxRuntime: "automatic",
         },
-      ]
-    ]
+      ],
+    ],
   };
 };
diff --git a/packages/expo-app/metro.config.js b/packages/expo-app/metro.config.js
index 7f1d2063d..e5a9f089f 100644
--- a/packages/expo-app/metro.config.js
+++ b/packages/expo-app/metro.config.js
@@ -1,15 +1,14 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 /** @type {import('expo/metro-config').MetroConfig} */
 
-
-const { getDefaultConfig } = require('expo/metro-config');
-const { FileStore } = require('metro-cache');
-const path = require('path');
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const path = require("path");
 
 const projectRoot = __dirname;
-const workspaceRoot = path.resolve(projectRoot, '../..');
+const workspaceRoot = path.resolve(projectRoot, "../..");
 
-require('@expo/env').load(workspaceRoot, { force: true });
+require("@expo/env").load(workspaceRoot, { force: true });
 
 const config = getDefaultConfig(__dirname);
 
@@ -41,8 +40,8 @@ function withMonorepoPaths(config) {
   // #1 - Watch all files in the monorepo
   config.watchFolders = [workspaceRoot];
   config.resolver.nodeModulesPaths = [
-    path.resolve(projectRoot, 'node_modules'),
-    path.resolve(workspaceRoot, 'node_modules'),
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
   ];
 
   // #3 - Force resolving nested modules to the folders below
@@ -61,10 +60,10 @@ function withMonorepoPaths(config) {
  * @returns {import('expo/metro-config').MetroConfig}
  */
 function withTurborepoManagedCache(config) {
-  config.cacheStores = [new FileStore({ root: path.join(__dirname, 'node_modules/.cache/metro') })];
+  config.cacheStores = [
+    new FileStore({ root: path.join(__dirname, "node_modules/.cache/metro") }),
+  ];
   return config;
 }
 
-module.exports = withMonorepoPaths(
-  withAssets(config)
-);
\ No newline at end of file
+module.exports = withMonorepoPaths(withAssets(config));
diff --git a/packages/react-native-app/babel.config.js b/packages/react-native-app/babel.config.js
index c635a5c4b..ff0396b51 100644
--- a/packages/react-native-app/babel.config.js
+++ b/packages/react-native-app/babel.config.js
@@ -1,21 +1,21 @@
 module.exports = {
   presets: [
-    '@babel/preset-typescript',
-    'module:metro-react-native-babel-preset',
+    "@babel/preset-typescript",
+    "module:metro-react-native-babel-preset",
   ],
   plugins: [
-    '@babel/plugin-transform-modules-commonjs',
-    ['@babel/plugin-transform-private-methods', { loose: true }],
+    "@babel/plugin-transform-modules-commonjs",
+    ["@babel/plugin-transform-private-methods", { loose: true }],
     [
-      'module-resolver',
+      "module-resolver",
       {
         alias: {
-          '@turf': './node_modules/@turf',
-          '@mapbox': './node_modules/@mapbox',
-          debounce: './node_modules/debounce',
-          react: './node_modules/react',
-          'react-native': './node_modules/react-native',
-          '@maplibre/maplibre-react-native': '../../javascript',
+          "@turf": "./node_modules/@turf",
+          "@mapbox": "./node_modules/@mapbox",
+          debounce: "./node_modules/debounce",
+          react: "./node_modules/react",
+          "react-native": "./node_modules/react-native",
+          "@maplibre/maplibre-react-native": "../../javascript",
         },
       },
     ],
diff --git a/packages/react-native-app/e2e/jest.config.js b/packages/react-native-app/e2e/jest.config.js
index be6efbfe7..9ae87b59b 100644
--- a/packages/react-native-app/e2e/jest.config.js
+++ b/packages/react-native-app/e2e/jest.config.js
@@ -1,12 +1,12 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
-  rootDir: '..',
-  testMatch: ['<rootDir>/e2e/**/*.e2e.js'],
+  rootDir: "..",
+  testMatch: ["<rootDir>/e2e/**/*.e2e.js"],
   testTimeout: 120000,
   maxWorkers: 1,
-  globalSetup: 'detox/runners/jest/globalSetup',
-  globalTeardown: 'detox/runners/jest/globalTeardown',
-  reporters: ['detox/runners/jest/reporter'],
-  testEnvironment: 'detox/runners/jest/testEnvironment',
+  globalSetup: "detox/runners/jest/globalSetup",
+  globalTeardown: "detox/runners/jest/globalTeardown",
+  reporters: ["detox/runners/jest/reporter"],
+  testEnvironment: "detox/runners/jest/testEnvironment",
   verbose: true,
 };
diff --git a/packages/react-native-app/index.js b/packages/react-native-app/index.js
index 9d1470597..fa74f2ed0 100644
--- a/packages/react-native-app/index.js
+++ b/packages/react-native-app/index.js
@@ -2,9 +2,9 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from "react-native";
 
-import App from './src/App';
-import {name as appName} from './app.json';
+import { name as appName } from "./app.json";
+import App from "./src/App";
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/packages/react-native-app/metro.config.js b/packages/react-native-app/metro.config.js
index 3d21cd10a..0d23924e7 100644
--- a/packages/react-native-app/metro.config.js
+++ b/packages/react-native-app/metro.config.js
@@ -1,13 +1,12 @@
-const path = require('path');
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-const glob = require('glob-to-regexp');
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const path = require("path");
 
 const projectRoot = __dirname;
-const workspaceRoot = path.resolve(projectRoot, '../..');
+const workspaceRoot = path.resolve(projectRoot, "../..");
 
 /**
  * Metro configuration
-  * https://reactnative.dev/docs/metro
+ * https://reactnative.dev/docs/metro
  *
  * @type {import('metro-config').MetroConfig}
  */
@@ -16,8 +15,8 @@ function withMonorepoPaths(config) {
   // #1 - Watch all files in the monorepo
   config.watchFolders = [workspaceRoot];
   config.resolver.nodeModulesPaths = [
-    path.resolve(projectRoot, 'node_modules'),
-    path.resolve(workspaceRoot, 'node_modules'),
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
   ];
 
   // #3 - Force resolving nested modules to the folders below
@@ -27,16 +26,19 @@ function withMonorepoPaths(config) {
 }
 
 const config = {
-  projectRoot: projectRoot,
+  projectRoot,
   watchFolders: [
-    path.resolve(__dirname, '../../assets'),
-    path.resolve(__dirname, '../../javascript'),
-    path.resolve(__dirname, '../examples'),
+    path.resolve(__dirname, "../../assets"),
+    path.resolve(__dirname, "../../javascript"),
+    path.resolve(__dirname, "../examples"),
   ],
   resolver: {
-    extraNodeModules: new Proxy({}, {
-      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
-    }),
+    extraNodeModules: new Proxy(
+      {},
+      {
+        get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
+      },
+    ),
   },
   transformer: {
     getTransformOptions: async () => ({
@@ -48,4 +50,7 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(withMonorepoPaths(getDefaultConfig(projectRoot)), config);
+module.exports = mergeConfig(
+  withMonorepoPaths(getDefaultConfig(projectRoot)),
+  config,
+);
diff --git a/packages/react-native-app/scripts/fix_nvm_issue.js b/packages/react-native-app/scripts/fix_nvm_issue.js
index 539094aa7..60dc9be61 100644
--- a/packages/react-native-app/scripts/fix_nvm_issue.js
+++ b/packages/react-native-app/scripts/fix_nvm_issue.js
@@ -3,17 +3,17 @@
 // see detailed discussion here => https://github.com/facebook/react-native/issues/31181
 // see detailed discussion here => https://github.com/facebook/react-native/issues/31259
 
-const fs = require('fs');
+const fs = require("fs");
 
 // solution as described here: https://github.com/facebook/react-native/issues/31181#issuecomment-815913541
 const anchorLine = /set -e/;
-const replacementContent = 'unset npm_config_prefix\nunset PREFIX\nset -e\n';
-const problemFilePath = './node_modules/react-native/scripts/find-node.sh';
-const problemFileContent = fs.readFileSync(problemFilePath, 'utf8');
+const replacementContent = "unset npm_config_prefix\nunset PREFIX\nset -e\n";
+const problemFilePath = "./node_modules/react-native/scripts/find-node.sh";
+const problemFileContent = fs.readFileSync(problemFilePath, "utf8");
 fs.writeFileSync(
   problemFilePath,
   problemFileContent.replace(anchorLine, replacementContent),
-  'utf8'
+  "utf8",
 );
 
-console.log('🙏🏻 nvm with iOS should work 🙏🏻');
+console.log("🙏🏻 nvm with iOS should work 🙏🏻");
diff --git a/packages/react-native-app/src/App.js b/packages/react-native-app/src/App.js
index bfdf8d55b..79a125668 100755
--- a/packages/react-native-app/src/App.js
+++ b/packages/react-native-app/src/App.js
@@ -1,21 +1,20 @@
-import React from 'react';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-import {StyleSheet, Text, View, LogBox, SafeAreaView} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-
-import { sheet, colors } from '@maplibre-react-native/examples';
-import { default as Home } from '@maplibre-react-native/examples/src/scenes/Examples';
-import { IS_ANDROID } from '@maplibre-react-native/examples/src/utils';
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import { sheet, colors } from "@maplibre-react-native/examples";
+import { default as Home } from "@maplibre-react-native/examples/src/scenes/Examples";
+import { IS_ANDROID } from "@maplibre-react-native/examples/src/utils";
+import React from "react";
+import { StyleSheet, Text, View, LogBox, SafeAreaView } from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
 
 LogBox.ignoreLogs([
-  'Warning: isMounted(...) is deprecated',
-  'Module RCTImageLoader',
+  "Warning: isMounted(...) is deprecated",
+  "Module RCTImageLoader",
 ]);
 
 const styles = StyleSheet.create({
   noPermissionsText: {
     fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
   },
 });
 
@@ -50,8 +49,9 @@ class App extends React.Component {
       }
       return (
         <SafeAreaView
-          style={[sheet.matchParent, {backgroundColor: colors.primary.blue}]}
-          forceInset={{top: 'always'}}>
+          style={[sheet.matchParent, { backgroundColor: colors.primary.blue }]}
+          forceInset={{ top: "always" }}
+        >
           <View style={sheet.matchParent}>
             <Text style={styles.noPermissionsText}>
               You need to accept location permissions in order to use this
diff --git a/plugin/jest.config.js b/plugin/jest.config.js
index e539b3b18..d52d0349d 100644
--- a/plugin/jest.config.js
+++ b/plugin/jest.config.js
@@ -1 +1 @@
-module.exports = require('expo-module-scripts/jest-preset-plugin');
+module.exports = require("expo-module-scripts/jest-preset-plugin");
diff --git a/plugin/src/__tests__/tsconfig.eslint.json b/plugin/src/__tests__/tsconfig.eslint.json
index 53361d607..18dbfe61d 100644
--- a/plugin/src/__tests__/tsconfig.eslint.json
+++ b/plugin/src/__tests__/tsconfig.eslint.json
@@ -1,5 +1,4 @@
 {
-    "compilerOptions": {
-    },
-    "include": ["./**/*"],
-}  
\ No newline at end of file
+  "compilerOptions": {},
+  "include": ["./**/*"]
+}
diff --git a/react-native.config.js b/react-native.config.js
index 6e8c8ee4e..30aa61510 100644
--- a/react-native.config.js
+++ b/react-native.config.js
@@ -3,7 +3,7 @@ module.exports = {
     platforms: {
       ios: {},
       android: {
-        sourceDir: './android/rctmln',
+        sourceDir: "./android/rctmln",
       },
     },
   },
diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js
index 435ae1318..a2a3af2d2 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/autogenHelpers/DocJSONBuilder.js
@@ -1,31 +1,30 @@
-const fs = require('fs');
-const path = require('path');
-const { exec } = require('child_process');
+const { exec } = require("child_process");
+const fs = require("fs");
+const dir = require("node-dir");
+const path = require("path");
+const docgen = require("react-docgen");
+const parseJsDoc = require("react-docgen/dist/utils/parseJsDoc").default;
 
-const dir = require('node-dir');
-const docgen = require('react-docgen');
-const parseJsDoc = require('react-docgen/dist/utils/parseJsDoc').default;
-
-const JSDocNodeTree = require('./JSDocNodeTree');
+const JSDocNodeTree = require("./JSDocNodeTree");
 
 const COMPONENT_PATH = path.join(
   __dirname,
-  '..',
-  '..',
-  'javascript',
-  'components',
+  "..",
+  "..",
+  "javascript",
+  "components",
 );
-const MODULES_PATH = path.join(__dirname, '..', '..', 'javascript', 'modules');
+const MODULES_PATH = path.join(__dirname, "..", "..", "javascript", "modules");
 
-const OUTPUT_PATH = path.join(__dirname, '..', '..', 'docs', 'docs.json');
+const OUTPUT_PATH = path.join(__dirname, "..", "..", "docs", "docs.json");
 const IGNORE_FILES = [
-  'AbstractLayer',
-  'AbstractSource',
-  'NativeBridgeComponent',
+  "AbstractLayer",
+  "AbstractSource",
+  "NativeBridgeComponent",
 ];
 const IGNORE_PATTERN = /\.web\./;
 
-const IGNORE_METHODS = ['setNativeProps'];
+const IGNORE_METHODS = ["setNativeProps"];
 
 const fileExtensionsRegex = /.(js|tsx|(?<!d.)ts)$/;
 
@@ -34,12 +33,12 @@ class DocJSONBuilder {
     this._styledLayers = {};
 
     for (const styleLayer of styledLayers) {
-      let ComponentName = pascelCase(styleLayer.name);
-      const fakeLayers = ['Light', 'Atmosphere', 'Terrain'];
+      const ComponentName = pascelCase(styleLayer.name);
+      const fakeLayers = ["Light", "Atmosphere", "Terrain"];
       if (fakeLayers.includes(ComponentName)) {
         this._styledLayers[ComponentName] = styleLayer;
       } else {
-        this._styledLayers[ComponentName + 'Layer'] = styleLayer;
+        this._styledLayers[ComponentName + "Layer"] = styleLayer;
       }
     }
   }
@@ -52,8 +51,8 @@ class DocJSONBuilder {
     };
   }
 
-  isPrivateMethod(methodName = '') {
-    return !methodName || methodName.charAt(0) === '_';
+  isPrivateMethod(methodName = "") {
+    return !methodName || methodName.charAt(0) === "_";
   }
 
   postprocess(component, name) {
@@ -68,7 +67,7 @@ class DocJSONBuilder {
     // Main description
     component.description = component.description.replace(
       /(\n*)(@\w+) (\{.*})/g,
-      '',
+      "",
     );
 
     // Styles
@@ -91,11 +90,11 @@ class DocJSONBuilder {
           expression: prop.expression,
           transition: prop.transition,
         };
-        if (prop.type === 'enum') {
+        if (prop.type === "enum") {
           docStyle.values = Object.keys(prop.doc.values).map((value) => {
             return { value, doc: prop.doc.values[value].doc };
           });
-        } else if (prop.type === 'array') {
+        } else if (prop.type === "array") {
           docStyle.type = `${docStyle.type}<${prop.value}>`;
         }
 
@@ -123,21 +122,21 @@ class DocJSONBuilder {
         return null;
       }
 
-      if (tsType.name === 'signature') {
+      if (tsType.name === "signature") {
         if (tsType.raw.length < 200) {
           return `${tsType.raw
-            .replace(/(\n|\s)/g, '')
-            .replace(/(\|)/g, '\\|')}`;
+            .replace(/(\n|\s)/g, "")
+            .replace(/(\|)/g, "\\|")}`;
         } else {
-          return 'FIX ME FORMAT BIG OBJECT';
+          return "FIX ME FORMAT BIG OBJECT";
         }
-      } else if (tsType.name === 'union') {
+      } else if (tsType.name === "union") {
         if (tsType.raw) {
           // Props
-          return tsType.raw.replace(/\|/g, '\\|');
+          return tsType.raw.replace(/\|/g, "\\|");
         } else if (tsType.elements) {
           // Methods
-          return tsType.elements.map((e) => e.name).join(' \\| ');
+          return tsType.elements.map((e) => e.name).join(" \\| ");
         }
       } else {
         return tsType.name;
@@ -160,7 +159,7 @@ class DocJSONBuilder {
      * @returns {tsType is TSFunctionType}
      */
     function tsTypeIsFunction(tsType) {
-      return tsType.type === 'function';
+      return tsType.type === "function";
     }
 
     /**
@@ -168,7 +167,7 @@ class DocJSONBuilder {
      * @returns {tsType is TSObjectType}
      */
     function tsTypeIsObject(tsType) {
-      return tsType.type === 'object';
+      return tsType.type === "object";
     }
 
     /**
@@ -176,15 +175,15 @@ class DocJSONBuilder {
      */
     function tsTypeDump(tsType) {
       if (tsTypeIsFunction(tsType)) {
-        let { signature } = tsType;
+        const { signature } = tsType;
         return `(${signature.arguments
           .map(({ name, type }) => `${name}:${tsTypeDump(type)}`)
-          .join(', ')}) => ${tsTypeDump(signature.return)}`;
+          .join(", ")}) => ${tsTypeDump(signature.return)}`;
       } else if (tsTypeIsObject(tsType)) {
-        let { signature } = tsType;
+        const { signature } = tsType;
         return `{${signature.properties
           .map(({ key, value }) => `${key}: ${tsTypeDump(value)}`)
-          .join(', ')}}`;
+          .join(", ")}}`;
       } else {
         return tsType.name;
       }
@@ -195,7 +194,7 @@ class DocJSONBuilder {
         return null;
       }
 
-      if (tsType.name === 'signature' && tsType.type === 'object') {
+      if (tsType.name === "signature" && tsType.type === "object") {
         const { properties } = tsType.signature;
         if (properties) {
           const value = properties.map((kv) => {
@@ -205,23 +204,23 @@ class DocJSONBuilder {
               false,
             );
           });
-          return { name: 'shape', value };
+          return { name: "shape", value };
         } else if (tsType.raw.length < 200) {
           return `${tsType.raw
-            .replace(/(\n|\s)/g, '')
-            .replace(/(\|)/g, '\\|')}`;
+            .replace(/(\n|\s)/g, "")
+            .replace(/(\|)/g, "\\|")}`;
         } else {
-          return 'FIX ME FORMAT BIG OBJECT';
+          return "FIX ME FORMAT BIG OBJECT";
         }
-      } else if (tsType.name === 'signature' && tsType.type === 'function') {
-        return { name: 'func', funcSignature: tsTypeDump(tsType) };
-      } else if (tsType.name === 'union') {
+      } else if (tsType.name === "signature" && tsType.type === "function") {
+        return { name: "func", funcSignature: tsTypeDump(tsType) };
+      } else if (tsType.name === "union") {
         if (tsType.raw) {
           // Props
-          return tsType.raw.replace(/\|/g, '\\|');
+          return tsType.raw.replace(/\|/g, "\\|");
         } else if (tsType.elements) {
           // Methods
-          return tsType.elements.map((e) => e.name).join(' \\| ');
+          return tsType.elements.map((e) => e.name).join(" \\| ");
         }
       } else {
         return tsType.name;
@@ -232,20 +231,20 @@ class DocJSONBuilder {
       let result = {};
       if (!array) {
         result = {
-          name: propName || 'FIX ME NO NAME',
+          name: propName || "FIX ME NO NAME",
           required: propMeta.required || false,
           type:
             propMeta.type?.name ||
             tsTypeDescType(propMeta.tsType) ||
-            'FIX ME UNKNOWN TYPE',
+            "FIX ME UNKNOWN TYPE",
           default: !propMeta.defaultValue
-            ? 'none'
-            : propMeta.defaultValue.value.replace(/\n/g, ''),
-          description: propMeta.description || 'FIX ME NO DESCRIPTION',
+            ? "none"
+            : propMeta.defaultValue.value.replace(/\n/g, ""),
+          description: propMeta.description || "FIX ME NO DESCRIPTION",
         };
         if (
           result.type &&
-          result.type.name === 'func' &&
+          result.type.name === "func" &&
           result.type.funcSignature
         ) {
           result.description = `${result.description}\n*signature:*\`${result.type.funcSignature}\``;
@@ -260,9 +259,9 @@ class DocJSONBuilder {
         result.type =
           (propMeta.type && propMeta.type.name) ||
           tsTypeDescType(propMeta.tsType) ||
-          'FIX ME UNKNOWN TYPE';
+          "FIX ME UNKNOWN TYPE";
         if (propMeta.defaultValue) {
-          result.default = propMeta.defaultValue.value.replace(/\n/g, '');
+          result.default = propMeta.defaultValue.value.replace(/\n/g, "");
         }
         if (propMeta.description) {
           result.description = propMeta.description;
@@ -271,16 +270,16 @@ class DocJSONBuilder {
 
       if (
         propMeta.type &&
-        propMeta.type.name === 'arrayOf' &&
+        propMeta.type.name === "arrayOf" &&
         propMeta.type.value
       ) {
         result.type = {
-          name: 'array',
+          name: "array",
           value: mapProp(mapNestedProp(propMeta.type.value), undefined, true),
         };
       }
 
-      if (propMeta.type && propMeta.type.name === 'func') {
+      if (propMeta.type && propMeta.type.name === "func") {
         const jsdoc = parseJsDoc(propMeta.description);
         if (jsdoc && jsdoc.description) {
           result.description = jsdoc.description;
@@ -294,14 +293,14 @@ class DocJSONBuilder {
       }
       if (
         propMeta.type &&
-        propMeta.type.name === 'shape' &&
+        propMeta.type.name === "shape" &&
         propMeta.type.value
       ) {
         const type = propMeta.type.value;
         const value = Object.keys(type).map((_name) =>
           mapProp(mapNestedProp(type[_name]), _name, false),
         );
-        result.type = { name: 'shape', value };
+        result.type = { name: "shape", value };
       }
       return result;
     }
@@ -323,10 +322,10 @@ class DocJSONBuilder {
 
       if (method.docblock) {
         const examples = method.docblock
-          .split('@')
-          .filter((block) => block.startsWith('example'));
+          .split("@")
+          .filter((block) => block.startsWith("example"));
         method.examples = examples.map((example) =>
-          example.substring('example'.length),
+          example.substring("example".length),
         );
       }
     }
@@ -359,7 +358,7 @@ class DocJSONBuilder {
             return reject(err);
           }
 
-          let fileName = fileNameWithExt.replace(/\.(js|tsx|ts$)/, '');
+          let fileName = fileNameWithExt.replace(/\.(js|tsx|ts$)/, "");
           if (
             IGNORE_FILES.includes(fileName) ||
             fileName.match(IGNORE_PATTERN)
@@ -368,13 +367,13 @@ class DocJSONBuilder {
             return;
           }
 
-          let parsedComponents = docgen.parse(content, {
+          const parsedComponents = docgen.parse(content, {
             babelOptions: {
               filename: fileNameWithExt,
             },
           });
-          let [parsed] = parsedComponents;
-          fileName = fileName.replace(fileExtensionsRegex, '');
+          const [parsed] = parsedComponents;
+          fileName = fileName.replace(fileExtensionsRegex, "");
           parsed.fileNameWithExt = fileNameWithExt;
           results[fileName] = parsed;
 
@@ -404,7 +403,7 @@ class DocJSONBuilder {
               .charAt(0)
               .toLowerCase()}${module.name.substring(1)}`;
 
-            const pathParts = module.context.file.split('/');
+            const pathParts = module.context.file.split("/");
             const fileNameWithExt = pathParts[pathParts.length - 1];
 
             results[name] = {
diff --git a/scripts/autogenHelpers/JSDocNodeTree.js b/scripts/autogenHelpers/JSDocNodeTree.js
index 78d09bb8b..7b77df9b0 100644
--- a/scripts/autogenHelpers/JSDocNodeTree.js
+++ b/scripts/autogenHelpers/JSDocNodeTree.js
@@ -1,30 +1,33 @@
 class JSDocNodeTree {
-  constructor (root) {
+  constructor(root) {
     this._root = root;
   }
 
-  getChildrenByTag (node, tag) {
+  getChildrenByTag(node, tag) {
     if (!node || !Array.isArray(node.children)) {
       return [];
     }
     return node.children.filter((child) => child.type === tag);
   }
 
-  getName () {
+  getName() {
     if (!this._root) {
-      return '';
+      return "";
     }
     return this._root.namespace;
   }
 
-  getText () {
+  getText() {
     if (!this.hasChildren()) {
-      return '';
+      return "";
     }
 
-    let text = '';
-    for (let paragraph of this.getChildrenByTag(this._root.description, 'paragraph')) {
-      for (let textNode of this.getChildrenByTag(paragraph, 'text')) {
+    let text = "";
+    for (const paragraph of this.getChildrenByTag(
+      this._root.description,
+      "paragraph",
+    )) {
+      for (const textNode of this.getChildrenByTag(paragraph, "text")) {
         text += textNode.value;
       }
     }
@@ -32,14 +35,14 @@ class JSDocNodeTree {
     return text;
   }
 
-  getMethods () {
-    if (!this._hasArray(this._root.members, 'instance')) {
+  getMethods() {
+    if (!this._hasArray(this._root.members, "instance")) {
       return [];
     }
 
     const methods = [];
-    for (let field of this._root.members.instance) {
-      if (field.kind !== 'function' || this._isPrivateMethod(field)) {
+    for (const field of this._root.members.instance) {
+      if (field.kind !== "function" || this._isPrivateMethod(field)) {
         continue;
       }
 
@@ -56,14 +59,14 @@ class JSDocNodeTree {
     return methods;
   }
 
-  getMethodParams (field) {
-    if (!this._hasArray(field, 'params')) {
+  getMethodParams(field) {
+    if (!this._hasArray(field, "params")) {
       return [];
     }
 
     const methodParams = [];
-    for (let param of field.params) {
-      if (param.title !== 'param') {
+    for (const param of field.params) {
+      if (param.title !== "param") {
         continue;
       }
 
@@ -72,22 +75,22 @@ class JSDocNodeTree {
         name: param.name,
         description: node.getText(),
         type: { name: this.getType(param.type) },
-        optional: param.type.type === 'OptionalType',
-      })
+        optional: param.type.type === "OptionalType",
+      });
     }
 
     return methodParams;
   }
 
-  getExamples (field) {
-    if (!this._hasArray(field, 'examples')) {
+  getExamples(field) {
+    if (!this._hasArray(field, "examples")) {
       return [];
     }
     return field.examples.map((example) => example.description);
   }
 
-  getReturnValue (field) {
-    if (!this._hasArray(field, 'returns')) {
+  getReturnValue(field) {
+    if (!this._hasArray(field, "returns")) {
       return null;
     }
 
@@ -100,23 +103,23 @@ class JSDocNodeTree {
     };
   }
 
-  getType (typeNode) {
+  getType(typeNode) {
     if (!typeNode) {
-      return '';
+      return "";
     }
 
     if (typeNode.expression) {
       return typeNode.expression.name;
     }
 
-    return typeNode.name || '';
+    return typeNode.name || "";
   }
 
-  hasChildren () {
-    return this._hasArray(this._root.description, 'children');
+  hasChildren() {
+    return this._hasArray(this._root.description, "children");
   }
 
-  _hasArray (node, propName) {
+  _hasArray(node, propName) {
     if (!this._root) {
       return false;
     }
@@ -124,7 +127,7 @@ class JSDocNodeTree {
   }
 
   _isPrivateMethod(field) {
-    return field.name.charAt(0) === '_';
+    return field.name.charAt(0) === "_";
   }
 }
 
diff --git a/scripts/autogenHelpers/MarkdownBuilder.js b/scripts/autogenHelpers/MarkdownBuilder.js
index ccb758da0..d91788411 100644
--- a/scripts/autogenHelpers/MarkdownBuilder.js
+++ b/scripts/autogenHelpers/MarkdownBuilder.js
@@ -1,28 +1,36 @@
-const fs = require('fs');
-const path = require('path');
-const ejs = require('ejs');
+const ejs = require("ejs");
+const fs = require("fs");
+const path = require("path");
 
-const TMPL_PATH = path.join(__dirname, '..', 'templates');
-const TMPL_FILE = fs.readFileSync(path.join(TMPL_PATH, 'component.md.ejs'), 'utf8');
+const TMPL_PATH = path.join(__dirname, "..", "templates");
+const TMPL_FILE = fs.readFileSync(
+  path.join(TMPL_PATH, "component.md.ejs"),
+  "utf8",
+);
 
 class MarkdownBuilder {
-
-  generateComponentFile (docJSON, componentName) {
+  generateComponentFile(docJSON, componentName) {
     const tmpl = ejs.compile(TMPL_FILE, { strict: true });
     const fileContents = tmpl({ component: docJSON[componentName] });
-    fs.writeFileSync(path.join(__dirname, '..', '..', 'docs',  `${componentName}.md`), fileContents);
+    fs.writeFileSync(
+      path.join(__dirname, "..", "..", "docs", `${componentName}.md`),
+      fileContents,
+    );
   }
 
-  generate () {
-    const docJSONFile = fs.readFileSync(path.join(__dirname, '..', '..', 'docs', 'docs.json'), 'utf8');
+  generate() {
+    const docJSONFile = fs.readFileSync(
+      path.join(__dirname, "..", "..", "docs", "docs.json"),
+      "utf8",
+    );
     const docJSON = JSON.parse(docJSONFile);
     const componentPaths = Object.keys(docJSON);
 
-    for (let componentPath of componentPaths) {
+    for (const componentPath of componentPaths) {
       this.generateComponentFile(docJSON, componentPath);
     }
 
-    console.log('Markdown is finished generating');
+    console.log("Markdown is finished generating");
   }
 }
 
diff --git a/scripts/autogenHelpers/globals.js b/scripts/autogenHelpers/globals.js
index f4cd174fb..16c1e94f8 100644
--- a/scripts/autogenHelpers/globals.js
+++ b/scripts/autogenHelpers/globals.js
@@ -1,57 +1,57 @@
-let iosPropNameOverrides = {};
+const iosPropNameOverrides = {};
 
 const iosSpecOverrides = {
-  'icon-allow-overlap': 'icon-allows-overlap',
-  'icon-image': 'icon-image-name',
-  'icon-ignore-placement': 'icon-ignores-placement',
-  'icon-keep-upright': 'keeps-icon-upright',
-  'icon-rotate': 'icon-rotation',
-  'icon-size': 'icon-scale',
-  'symbol-avoid-edges': 'symbol-avoids-edges',
-  'text-allow-overlap': 'text-allows-overlap',
-  'text-field': 'text',
-  'text-font': 'text-font-names',
-  'text-ignore-placement': 'text-ignores-placement',
-  'text-justify': 'text-justification',
-  'text-keep-upright': 'keeps-text-upright',
-  'text-max-angle': 'maximum-text-angle',
-  'text-max-width': 'maximum-text-width',
-  'text-rotate': 'text-rotation',
-  'text-size': 'text-font-size',
-  'circle-pitch-scale': 'circle-scale-alignment',
-  'circle-translate': 'circle-translation',
-  'circle-translate-anchor': 'circle-translation-anchor',
-  'fill-antialias': 'fill-antialiased',
-  'fill-translate': 'fill-translation',
-  'fill-translate-anchor': 'fill-translation-anchor',
-  'fill-extrusion-translate': 'fill-extrusion-translation',
-  'fill-extrusion-translate-anchor': 'fill-extrusion-translation-anchor',
-  'raster-brightness-min': 'minimum-raster-brightness',
-  'raster-brightness-max': 'maximum-raster-brightness',
-  'raster-hue-rotate': 'raster-hue-rotation',
-  'line-dasharray': 'line-dash-pattern',
-  'line-translate': 'line-translation',
-  'line-translate-anchor': 'line-translation-anchor',
-  'icon-translate': 'icon-translation',
-  'icon-translate-anchor': 'icon-translation-anchor',
-  'text-translate': 'text-translation',
-  'text-translate-anchor': 'text-translation-anchor',
-  'raster-resampling': 'raster-resampling-mode',
-  'text-writing-mode': 'text-writing-modes',
+  "icon-allow-overlap": "icon-allows-overlap",
+  "icon-image": "icon-image-name",
+  "icon-ignore-placement": "icon-ignores-placement",
+  "icon-keep-upright": "keeps-icon-upright",
+  "icon-rotate": "icon-rotation",
+  "icon-size": "icon-scale",
+  "symbol-avoid-edges": "symbol-avoids-edges",
+  "text-allow-overlap": "text-allows-overlap",
+  "text-field": "text",
+  "text-font": "text-font-names",
+  "text-ignore-placement": "text-ignores-placement",
+  "text-justify": "text-justification",
+  "text-keep-upright": "keeps-text-upright",
+  "text-max-angle": "maximum-text-angle",
+  "text-max-width": "maximum-text-width",
+  "text-rotate": "text-rotation",
+  "text-size": "text-font-size",
+  "circle-pitch-scale": "circle-scale-alignment",
+  "circle-translate": "circle-translation",
+  "circle-translate-anchor": "circle-translation-anchor",
+  "fill-antialias": "fill-antialiased",
+  "fill-translate": "fill-translation",
+  "fill-translate-anchor": "fill-translation-anchor",
+  "fill-extrusion-translate": "fill-extrusion-translation",
+  "fill-extrusion-translate-anchor": "fill-extrusion-translation-anchor",
+  "raster-brightness-min": "minimum-raster-brightness",
+  "raster-brightness-max": "maximum-raster-brightness",
+  "raster-hue-rotate": "raster-hue-rotation",
+  "line-dasharray": "line-dash-pattern",
+  "line-translate": "line-translation",
+  "line-translate-anchor": "line-translation-anchor",
+  "icon-translate": "icon-translation",
+  "icon-translate-anchor": "icon-translation-anchor",
+  "text-translate": "text-translation",
+  "text-translate-anchor": "text-translation-anchor",
+  "raster-resampling": "raster-resampling-mode",
+  "text-writing-mode": "text-writing-modes",
 };
 
 global.getValue = function (value, defaultValue) {
-  if (!exists(value) || value === '') {
+  if (!exists(value) || value === "") {
     return defaultValue;
   }
   return value;
 };
 
 global.exists = function (value) {
-  return typeof value !== 'undefined' && value !== null;
+  return typeof value !== "undefined" && value !== null;
 };
 
-global.camelCase = function (str, delimiter = '-') {
+global.camelCase = function (str, delimiter = "-") {
   const parts = str.split(delimiter);
   return parts
     .map((part, index) => {
@@ -60,49 +60,49 @@ global.camelCase = function (str, delimiter = '-') {
       }
       return part.charAt(0).toUpperCase() + part.substring(1);
     })
-    .join('');
+    .join("");
 };
 
-global.pascelCase = function (str, delimiter = '-') {
+global.pascelCase = function (str, delimiter = "-") {
   const parts = str.split(delimiter);
   return parts
     .map((part, index) => {
       return part.charAt(0).toUpperCase() + part.substring(1);
     })
-    .join('');
+    .join("");
 };
 
 global.setLayerMethodName = function (layer, platform) {
-  if (platform === 'ios') {
+  if (platform === "ios") {
     return `${camelCase(layer.name)}Layer`;
   }
   return `set${pascelCase(layer.name)}LayerStyle`;
 };
 
 global.getLayerType = function (layer, platform) {
-  const isIOS = platform === 'ios';
+  const isIOS = platform === "ios";
 
   switch (layer.name) {
-    case 'fill':
-      return isIOS ? 'MLNFillStyleLayer' : 'FillLayer';
-    case 'fill-extrusion':
-      return isIOS ? 'MLNFillExtrusionStyleLayer' : 'FillExtrusionLayer';
-    case 'line':
-      return isIOS ? 'MLNLineStyleLayer' : 'LineLayer';
-    case 'symbol':
-      return isIOS ? 'MLNSymbolStyleLayer' : 'SymbolLayer';
-    case 'circle':
-      return isIOS ? 'MLNCircleStyleLayer' : 'CircleLayer';
-    case 'background':
-      return isIOS ? 'MLNBackgroundStyleLayer' : 'BackgroundLayer';
-    case 'raster':
-      return isIOS ? 'MLNRasterStyleLayer' : 'RasterLayer';
-    case 'heatmap':
-      return isIOS ? 'MLNHeatmapStyleLayer' : 'HeatmapLayer';
-    case 'hillshade':
-      return isIOS ? 'MLNHillshadeStyleLayer' : 'HillshadeLayer';
-    case 'light':
-      return isIOS ? 'MLNLight' : 'Light';
+    case "fill":
+      return isIOS ? "MLNFillStyleLayer" : "FillLayer";
+    case "fill-extrusion":
+      return isIOS ? "MLNFillExtrusionStyleLayer" : "FillExtrusionLayer";
+    case "line":
+      return isIOS ? "MLNLineStyleLayer" : "LineLayer";
+    case "symbol":
+      return isIOS ? "MLNSymbolStyleLayer" : "SymbolLayer";
+    case "circle":
+      return isIOS ? "MLNCircleStyleLayer" : "CircleLayer";
+    case "background":
+      return isIOS ? "MLNBackgroundStyleLayer" : "BackgroundLayer";
+    case "raster":
+      return isIOS ? "MLNRasterStyleLayer" : "RasterLayer";
+    case "heatmap":
+      return isIOS ? "MLNHeatmapStyleLayer" : "HeatmapLayer";
+    case "hillshade":
+      return isIOS ? "MLNHillshadeStyleLayer" : "HillshadeLayer";
+    case "light":
+      return isIOS ? "MLNLight" : "Light";
     default:
       throw new Error(
         `Is ${layer.name} a new layer? We should add support for it!`,
@@ -112,21 +112,21 @@ global.getLayerType = function (layer, platform) {
 
 global.ifOrElseIf = function (index) {
   if (index === 0) {
-    return 'if';
+    return "if";
   }
-  return '} else if';
+  return "} else if";
 };
 
 global.iosStringArrayLiteral = function (arr) {
-  return `@[@${arr.map((item) => `"${item}"`).join(', @')}]`;
+  return `@[@${arr.map((item) => `"${item}"`).join(", @")}]`;
 };
 
 global.iosPropName = function (name) {
-  if (name.indexOf('visibility') !== -1) {
-    return 'visible';
+  if (name.indexOf("visibility") !== -1) {
+    return "visible";
   }
-  if (name === 'fillExtrusionVerticalGradient') {
-    return 'fillExtrusionHasVerticalGradient';
+  if (name === "fillExtrusionVerticalGradient") {
+    return "fillExtrusionHasVerticalGradient";
   }
   if (iosPropNameOverrides[name]) {
     return iosPropNameOverrides[name];
@@ -135,97 +135,97 @@ global.iosPropName = function (name) {
 };
 
 global.iosMapLibrePropName = function (name) {
-  let result = iosPropName(name);
-  if (result === 'fillExtrusionVerticalGradient') {
-    return 'fillExtrusionHasVerticalGradient';
+  const result = iosPropName(name);
+  if (result === "fillExtrusionVerticalGradient") {
+    return "fillExtrusionHasVerticalGradient";
   }
   return undefined;
 };
 
 global.iosPropMethodName = function (layer, name) {
-  if (name.indexOf('Visibility') !== -1) {
-    return pascelCase(layer.name) + 'StyleLayer' + name;
+  if (name.indexOf("Visibility") !== -1) {
+    return pascelCase(layer.name) + "StyleLayer" + name;
   }
   return name;
 };
 
 global.androidInputType = function (type, value) {
-  if (type === 'array' && value) {
+  if (type === "array" && value) {
     return `${androidInputType(value)}[]`;
   }
 
   switch (type) {
-    case 'color':
-      return 'Integer';
-    case 'boolean':
-      return 'Boolean';
-    case 'number':
-      return 'Float';
+    case "color":
+      return "Integer";
+    case "boolean":
+      return "Boolean";
+    case "number":
+      return "Float";
     default:
-      return 'String';
+      return "String";
   }
 };
 
 global.androidOutputType = function (type, value) {
-  if (type === 'array' && value) {
+  if (type === "array" && value) {
     return `${androidOutputType(value)}[]`;
   }
 
   switch (type) {
-    case 'color':
-      return 'String';
-    case 'boolean':
-      return 'Boolean';
-    case 'number':
-      return 'Float';
+    case "color":
+      return "String";
+    case "boolean":
+      return "Boolean";
+    case "number":
+      return "Float";
     default:
-      return 'String';
+      return "String";
   }
 };
 
 global.androidGetConfigType = function (androidType, prop) {
   switch (androidType) {
-    case 'Integer':
-      return 'styleValue.getInt(VALUE_KEY)';
-    case 'Float':
-      return 'styleValue.getFloat(VALUE_KEY)';
-    case 'Boolean':
-      return 'styleValue.getBoolean(VALUE_KEY)';
-    case 'Float[]':
-      return 'styleValue.getFloatArray(VALUE_KEY)';
-    case 'String[]':
-      return 'styleValue.getStringArray(VALUE_KEY)';
+    case "Integer":
+      return "styleValue.getInt(VALUE_KEY)";
+    case "Float":
+      return "styleValue.getFloat(VALUE_KEY)";
+    case "Boolean":
+      return "styleValue.getBoolean(VALUE_KEY)";
+    case "Float[]":
+      return "styleValue.getFloatArray(VALUE_KEY)";
+    case "String[]":
+      return "styleValue.getStringArray(VALUE_KEY)";
     default:
       if (prop && prop.image) {
-        return 'styleValue.getImageURI()';
+        return "styleValue.getImageURI()";
       } else {
-        return 'styleValue.getString(VALUE_KEY)';
+        return "styleValue.getString(VALUE_KEY)";
       }
   }
 };
 
 global.jsStyleType = function (prop) {
-  if (prop.type === 'color') {
-    return 'StyleTypes.Color';
+  if (prop.type === "color") {
+    return "StyleTypes.Color";
   }
 
-  if (prop.type === 'enum') {
-    return 'StyleTypes.Enum';
+  if (prop.type === "enum") {
+    return "StyleTypes.Enum";
   }
 
-  if (prop.type === 'string' && prop.image) {
-    return 'StyleTypes.Image';
+  if (prop.type === "string" && prop.image) {
+    return "StyleTypes.Image";
   }
 
-  if (prop.type === 'resolvedImage') {
-    return 'StyleTypes.Image';
+  if (prop.type === "resolvedImage") {
+    return "StyleTypes.Image";
   }
 
-  if (prop.name.indexOf('Translate') !== -1) {
-    return 'StyleTypes.Translation';
+  if (prop.name.indexOf("Translate") !== -1) {
+    return "StyleTypes.Translation";
   }
 
-  return 'StyleTypes.Constant';
+  return "StyleTypes.Constant";
 };
 
 global.jsDocPropRequires = function (prop) {
@@ -233,10 +233,10 @@ global.jsDocPropRequires = function (prop) {
     return;
   }
 
-  let desc = '';
-  for (let item of prop.doc.requires) {
-    if (typeof item === 'string') {
-      desc += item + ', ';
+  let desc = "";
+  for (const item of prop.doc.requires) {
+    if (typeof item === "string") {
+      desc += item + ", ";
     }
   }
 
@@ -244,13 +244,13 @@ global.jsDocPropRequires = function (prop) {
 };
 
 global.getEnums = function (layers) {
-  let result = {};
+  const result = {};
 
   layers.forEach((layer) => {
     layer.properties.forEach((property) => {
       if (
-        property.type === 'enum' ||
-        (property.type === 'array' && property.value === 'enum')
+        property.type === "enum" ||
+        (property.type === "array" && property.value === "enum")
       ) {
         result[property.name] = {
           values: property.doc.values,
@@ -262,27 +262,26 @@ global.getEnums = function (layers) {
   return Object.values(result);
 };
 
-
 global.dtsInterfaceType = function (prop) {
-  let propTypes = [];
+  const propTypes = [];
 
-  if (prop.name.indexOf('Translate') !== -1 && prop.type != 'enum') {
-    propTypes.push('Translation');
-  } else if (prop.type === 'color') {
-    propTypes.push('string');
+  if (prop.name.indexOf("Translate") !== -1 && prop.type != "enum") {
+    propTypes.push("Translation");
+  } else if (prop.type === "color") {
+    propTypes.push("string");
     // propTypes.push('ConstantPropType');
-  } else if (prop.type === 'array') {
+  } else if (prop.type === "array") {
     switch (prop.value) {
-      case 'number':
-        propTypes.push('number[]');
+      case "number":
+        propTypes.push("number[]");
         break;
-      case 'boolean':
-        propTypes.push('boolean[]');
+      case "boolean":
+        propTypes.push("boolean[]");
         break;
-      case 'string':
-        propTypes.push('string[]');
+      case "string":
+        propTypes.push("string[]");
         break;
-      case 'enum':
+      case "enum":
         propTypes.push(
           `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(
             prop.name,
@@ -291,22 +290,22 @@ global.dtsInterfaceType = function (prop) {
         break;
     }
     // propTypes.push('ConstantPropType');
-  } else if (prop.type === 'number') {
-    propTypes.push('number');
-  } else if (prop.type === 'enum') {
+  } else if (prop.type === "number") {
+    propTypes.push("number");
+  } else if (prop.type === "enum") {
     propTypes.push(
       `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(prop.name)}EnumValues>`,
     );
-  } else if (prop.type === 'boolean') {
-    propTypes.push('boolean');
-  } else if (prop.type === 'resolvedImage') {
-    propTypes.push('ResolvedImageType');
-  } else if (prop.type === 'formatted') {
-    propTypes.push('FormattedString');
-  } else if (prop.type === 'string') {
-    propTypes.push('string');
+  } else if (prop.type === "boolean") {
+    propTypes.push("boolean");
+  } else if (prop.type === "resolvedImage") {
+    propTypes.push("ResolvedImageType");
+  } else if (prop.type === "formatted") {
+    propTypes.push("FormattedString");
+  } else if (prop.type === "string") {
+    propTypes.push("string");
   } else {
-    console.error('Unexpected type:', prop.type);
+    console.error("Unexpected type:", prop.type);
     throw new Error(`Unexpected type: ${prop.type} for ${prop.name}`);
   }
 
@@ -317,15 +316,15 @@ global.dtsInterfaceType = function (prop) {
   */
 
   if (propTypes.length > 1) {
-    return `${propTypes.map((p) => startAtSpace(4, p)).join(' | ')},
-${startAtSpace(2, '')}`;
+    return `${propTypes.map((p) => startAtSpace(4, p)).join(" | ")},
+${startAtSpace(2, "")}`;
   } else {
     if (prop.expressionSupported) {
-      let params = '';
+      let params = "";
       if (prop.expression && prop.expression.parameters) {
         params = `,[${prop.expression.parameters
           .map((v) => `'${v}'`)
-          .join(',')}]`;
+          .join(",")}]`;
       }
       return `Value<${propTypes[0]}${params}>`;
     } else {
@@ -335,64 +334,64 @@ ${startAtSpace(2, '')}`;
 };
 
 global.jsDocReactProp = function (prop) {
-  let propTypes = [];
+  const propTypes = [];
 
-  if (prop.type === 'color') {
-    propTypes.push('PropTypes.string');
-  } else if (prop.type === 'array') {
+  if (prop.type === "color") {
+    propTypes.push("PropTypes.string");
+  } else if (prop.type === "array") {
     switch (prop.value) {
-      case 'number':
-        propTypes.push('PropTypes.arrayOf(PropTypes.number)');
+      case "number":
+        propTypes.push("PropTypes.arrayOf(PropTypes.number)");
         break;
-      case 'boolean':
-        propTypes.push('PropTypes.arrayOf(PropTypes.bool)');
+      case "boolean":
+        propTypes.push("PropTypes.arrayOf(PropTypes.bool)");
         break;
-      case 'string':
-        propTypes.push('PropTypes.arrayOf(PropTypes.string)');
+      case "string":
+        propTypes.push("PropTypes.arrayOf(PropTypes.string)");
         break;
       default:
-        propTypes.push('PropTypes.array');
+        propTypes.push("PropTypes.array");
     }
-  } else if (prop.type === 'number') {
-    propTypes.push('PropTypes.number');
-  } else if (prop.type === 'boolean') {
-    propTypes.push('PropTypes.bool');
-  } else if (prop.type === 'enum') {
+  } else if (prop.type === "number") {
+    propTypes.push("PropTypes.number");
+  } else if (prop.type === "boolean") {
+    propTypes.push("PropTypes.bool");
+  } else if (prop.type === "enum") {
     if (prop.doc.values) {
       propTypes.push(
         `PropTypes.oneOf([${Object.keys(prop.doc.values)
           .map((v) => `'${v}'`)
-          .join(', ')}])`,
+          .join(", ")}])`,
       );
     } else {
-      propTypes.push('PropTypes.any');
+      propTypes.push("PropTypes.any");
     }
   } else {
     // images can be required which result in a number
     if (prop.image) {
-      propTypes.push('PropTypes.number');
+      propTypes.push("PropTypes.number");
     }
-    propTypes.push('PropTypes.string');
+    propTypes.push("PropTypes.string");
   }
 
-  if (prop.expressionSupported && !propTypes.includes('PropTypes.array')) {
-    propTypes.push('PropTypes.array');
+  if (prop.expressionSupported && !propTypes.includes("PropTypes.array")) {
+    propTypes.push("PropTypes.array");
   }
 
   if (propTypes.length > 1) {
     return `PropTypes.oneOfType([
-${propTypes.map((p) => startAtSpace(4, p)).join(',\n')},
-${startAtSpace(2, '])')}`;
+${propTypes.map((p) => startAtSpace(4, p)).join(",\n")},
+${startAtSpace(2, "])")}`;
   } else {
     return propTypes[0];
   }
 };
 
 global.startAtSpace = function (spaceCount, str) {
-  let value = '';
+  let value = "";
 
   for (let i = 0; i < spaceCount; i++) {
-    value += ' ';
+    value += " ";
   }
 
   return `${value}${str}`;
@@ -405,13 +404,13 @@ global.replaceNewLine = function (str) {
   if (str === null) {
     return null;
   }
-  return str.replace(/\n/g, '<br/>');
+  return str.replace(/\n/g, "<br/>");
 };
 
 global.styleMarkdownTableRow = function (style) {
   return `| \`${style.name}\` | \`${style.type}\` | \`${
-    style.requires.join(', ') || 'none'
-  }\` | \`${style.disabledBy.join(', ') || 'none'}\` | ${replaceNewLine(
+    style.requires.join(", ") || "none"
+  }\` | \`${style.disabledBy.join(", ") || "none"}\` | ${replaceNewLine(
     style.description,
   )} |`;
 };
@@ -420,29 +419,29 @@ global.methodMarkdownTableRow = function (method) {
   return method.params
     .map((param) => {
       return `| \`${param.name}\` | \`${
-        (param.type && param.type.name) || 'n/a'
-      }\` | \`${param.optional ? 'No' : 'Yes'}\` | ${replaceNewLine(
+        (param.type && param.type.name) || "n/a"
+      }\` | \`${param.optional ? "No" : "Yes"}\` | ${replaceNewLine(
         param.description,
       )} |`;
     })
-    .join('\n');
+    .join("\n");
 };
 
-function _propMarkdownTableRows(props, prefix = '') {
+function _propMarkdownTableRows(props, prefix = "") {
   return props
     .map((prop) => {
       let { type } = prop;
-      if (typeof type === 'object') {
+      if (typeof type === "object") {
         type = type.name;
       }
-      let defaultValue = prop.default || '';
-      let { description = '' } = prop;
+      const defaultValue = prop.default || "";
+      const { description = "" } = prop;
       let result = `| ${prefix}${
         prop.name
       } | \`${type}\` | \`${defaultValue}\` | \`${
         prop.required
       }\` | ${replaceNewLine(description)} |`;
-      if (type == 'shape') {
+      if (type == "shape") {
         result = `${result}\n${_propMarkdownTableRows(
           prop.type.value,
           `&nbsp;&nbsp;${prefix}`,
@@ -450,10 +449,10 @@ function _propMarkdownTableRows(props, prefix = '') {
       }
       return result;
     })
-    .join('\n');
+    .join("\n");
 }
 global.propMarkdownTableRows = function (component) {
-  return _propMarkdownTableRows(component.props, '');
+  return _propMarkdownTableRows(component.props, "");
 };
 
 global.getMarkdownMethodSignature = function (method) {
@@ -461,16 +460,16 @@ global.getMarkdownMethodSignature = function (method) {
     .map((param, i) => {
       const isOptional = param.optional;
 
-      let name = '';
+      let name = "";
 
       if (i !== 0) {
-        name += ', ';
+        name += ", ";
       }
 
       name += param.name;
       return isOptional ? `[${name}]` : name;
     })
-    .join('');
+    .join("");
 
   return `${method.name}(${params})`;
 };
@@ -489,13 +488,13 @@ ${example.trim()}
 
 `;
     })
-    .join('');
+    .join("");
 };
 
 global.getStyleDefaultValue = function (style) {
-  if (style.type === 'string' && style.default === '') {
-    return 'empty string';
-  } else if (style.type.includes('array')) {
+  if (style.type === "string" && style.default === "") {
+    return "empty string";
+  } else if (style.type.includes("array")) {
     return `[${style.default}]`;
   } else {
     return style.default;
@@ -504,5 +503,7 @@ global.getStyleDefaultValue = function (style) {
 
 Object.keys(iosSpecOverrides).forEach((propName) => {
   const camelCasePropName = camelCase(propName);
-  iosPropNameOverrides[camelCasePropName] = camelCase(iosSpecOverrides[propName]);
-});
\ No newline at end of file
+  iosPropNameOverrides[camelCasePropName] = camelCase(
+    iosSpecOverrides[propName],
+  );
+});
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 250872989..606b40393 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -1,43 +1,40 @@
-require('./autogenHelpers/globals');
+require("./autogenHelpers/globals");
 
-const fs = require('fs');
-const path = require('path');
+const { execSync } = require("child_process");
+const ejs = require("ejs");
+const prettierrc = require("eslint-config-universe");
+const fs = require("fs");
+const path = require("path");
+const prettier = require("prettier");
 
-const ejs = require('ejs');
-
-const {execSync} = require('child_process');
-
-const prettier = require('prettier');
-const prettierrc = require('eslint-config-universe');
-
-const styleSpecJSON = require('../style-spec/v8.json');
-
-const DocJSONBuilder = require('./autogenHelpers/DocJSONBuilder');
-const MarkdownBuilder = require('./autogenHelpers/MarkdownBuilder');
+const styleSpecJSON = require("../style-spec/v8.json");
+const DocJSONBuilder = require("./autogenHelpers/DocJSONBuilder");
+const MarkdownBuilder = require("./autogenHelpers/MarkdownBuilder");
 
 function readIosVersion() {
   const podspecPath = path.join(
     __dirname,
-    '..',
-    'maplibre-react-native.podspec',
+    "..",
+    "maplibre-react-native.podspec",
   );
-  const lines = fs.readFileSync(podspecPath, 'utf8').split('\n');
+  const lines = fs.readFileSync(podspecPath, "utf8").split("\n");
   const maplibreLineRegex = /^\s+version:\s*"(\d+\.\d+\.\d+)"$/;
-  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  const maplibreLine = lines.filter((i) => maplibreLineRegex.exec(i))[0];
   return `${maplibreLineRegex.exec(maplibreLine)[1]}.0`;
 }
 
 function readAndroidVersion() {
   const buildGradlePath = path.join(
     __dirname,
-    '..',
-    'android',
-    'rctmln',
-    'build.gradle',
+    "..",
+    "android",
+    "rctmln",
+    "build.gradle",
   );
-  const lines = fs.readFileSync(buildGradlePath, 'utf8').split('\n');
-  const maplibreLineRegex = /^\s+implementation\s+"org.maplibre.gl:android-sdk:(\d+\.\d+\.\d+)"$/;
-  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  const lines = fs.readFileSync(buildGradlePath, "utf8").split("\n");
+  const maplibreLineRegex =
+    /^\s+implementation\s+"org.maplibre.gl:android-sdk:(\d+\.\d+\.\d+)"$/;
+  const maplibreLine = lines.filter((i) => maplibreLineRegex.exec(i))[0];
   return maplibreLineRegex.exec(maplibreLine)[1];
 }
 
@@ -52,42 +49,42 @@ const layers = [];
 const androidVersion = readAndroidVersion();
 const iosVersion = readIosVersion();
 
-const TMPL_PATH = path.join(__dirname, 'templates');
+const TMPL_PATH = path.join(__dirname, "templates");
 
 const outputToExample = false;
 const OUTPUT_EXAMPLE_PREFIX = [
-  '..',
-  'example',
-  'node_modules',
-  '@maplibre',
-  'maplibre-react-native',
+  "..",
+  "example",
+  "node_modules",
+  "@maplibre",
+  "maplibre-react-native",
 ];
-const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : ['..'];
+const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : [".."];
 
-const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, 'ios', 'RCTMLN');
+const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, "ios", "RCTMLN");
 const ANDROID_OUTPUT_PATH = path.join(
   __dirname,
   ...OUTPUT_PREFIX,
-  'android',
-  'rctmln',
-  'src',
-  'main',
-  'java',
-  'com',
-  'maplibre',
-  'rctmln',
-  'components',
-  'styles',
+  "android",
+  "rctmln",
+  "src",
+  "main",
+  "java",
+  "com",
+  "maplibre",
+  "rctmln",
+  "components",
+  "styles",
 );
 const JS_OUTPUT_PATH = path.join(
   __dirname,
   ...OUTPUT_PREFIX,
-  'javascript',
-  'utils',
+  "javascript",
+  "utils",
 );
 
 getSupportedLayers(Object.keys(styleSpecJSON.layer.type.values)).forEach(
-  layerName => {
+  (layerName) => {
     layers.push({
       name: layerName,
       properties: getPropertiesForLayer(layerName),
@@ -96,12 +93,12 @@ getSupportedLayers(Object.keys(styleSpecJSON.layer.type.values)).forEach(
 );
 
 // add light as a layer
-layers.push({name: 'light', properties: getPropertiesForLight()});
+layers.push({ name: "light", properties: getPropertiesForLight() });
 
 function getPropertiesForLight() {
   const lightAttributes = styleSpecJSON.light;
 
-  return getSupportedProperties(lightAttributes).map(attrName => {
+  return getSupportedProperties(lightAttributes).map((attrName) => {
     return Object.assign({}, buildProperties(lightAttributes, attrName), {
       allowedFunctionTypes: [],
     });
@@ -112,41 +109,43 @@ function getPropertiesForLayer(layerName) {
   const paintAttributes = styleSpecJSON[`paint_${layerName}`];
   const layoutAttributes = styleSpecJSON[`layout_${layerName}`];
 
-  const paintProps = getSupportedProperties(paintAttributes).map(attrName => {
+  const paintProps = getSupportedProperties(paintAttributes).map((attrName) => {
     const prop = buildProperties(paintAttributes, attrName);
 
     // overrides
-    if (['line-width'].includes(attrName)) {
-      prop.allowedFunctionTypes = ['camera'];
+    if (["line-width"].includes(attrName)) {
+      prop.allowedFunctionTypes = ["camera"];
     }
 
     return prop;
   });
 
-  const layoutProps = getSupportedProperties(layoutAttributes).map(attrName => {
-    const prop = buildProperties(layoutAttributes, attrName);
-
-    // overrides
-    if (
-      [
-        'line-join',
-        'text-max-width',
-        'text-letter-spacing',
-        'text-anchor',
-        'text-justify',
-        'text-font',
-      ].includes(attrName)
-    ) {
-      prop.allowedFunctionTypes = ['camera'];
-    }
-    // Overide type padding
-    if(prop.type === 'padding') {
-      prop.type = 'array';
-      prop.value = 'number';
-      prop.length = 4;
-    }
-    return prop;
-  });
+  const layoutProps = getSupportedProperties(layoutAttributes).map(
+    (attrName) => {
+      const prop = buildProperties(layoutAttributes, attrName);
+
+      // overrides
+      if (
+        [
+          "line-join",
+          "text-max-width",
+          "text-letter-spacing",
+          "text-anchor",
+          "text-justify",
+          "text-font",
+        ].includes(attrName)
+      ) {
+        prop.allowedFunctionTypes = ["camera"];
+      }
+      // Overide type padding
+      if (prop.type === "padding") {
+        prop.type = "array";
+        prop.value = "number";
+        prop.length = 4;
+      }
+      return prop;
+    },
+  );
 
   return layoutProps.concat(paintProps);
 }
@@ -157,7 +156,7 @@ function getSupportedLayers(layerNames) {
   const supportedLayers = [];
   for (const layerName of layerNames) {
     const layer = layerMap[layerName];
-    const support = getAttributeSupport(layer['sdk-support']);
+    const support = getAttributeSupport(layer["sdk-support"]);
 
     if (support.basic.android && support.basic.ios) {
       supportedLayers.push(layerName);
@@ -168,7 +167,7 @@ function getSupportedLayers(layerNames) {
 }
 
 function getSupportedProperties(attributes) {
-  return Object.keys(attributes).filter(attrName =>
+  return Object.keys(attributes).filter((attrName) =>
     isAttrSupported(attributes[attrName]),
   );
 }
@@ -194,23 +193,23 @@ function buildProperties(attributes, attrName) {
     expression: attributes[attrName].expression,
     expressionSupported:
       Object.keys(attributes[attrName].expression || {}).length > 0,
-    support: getAttributeSupport(attributes[attrName]['sdk-support']),
+    support: getAttributeSupport(attributes[attrName]["sdk-support"]),
     allowedFunctionTypes: getAllowedFunctionTypes(attributes[attrName]),
   };
 }
 
 function formatDescription(description) {
-  const words = description.split(' ');
+  const words = description.split(" ");
 
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
 
-    if (word.includes('-')) {
+    if (word.includes("-")) {
       words[i] = camelCase(word);
     }
   }
 
-  return words.join(' ');
+  return words.join(" ");
 }
 
 function getRequires(requiredItems) {
@@ -221,8 +220,8 @@ function getRequires(requiredItems) {
   }
 
   for (const item of requiredItems) {
-    if (typeof item === 'string') {
-      items.push(camelCase(item, '-'));
+    if (typeof item === "string") {
+      items.push(camelCase(item, "-"));
     }
   }
 
@@ -237,8 +236,8 @@ function getDisables(disabledItems) {
   }
 
   for (const item of disabledItems) {
-    if (item['!']) {
-      items.push(camelCase(item['!'], '-'));
+    if (item["!"]) {
+      items.push(camelCase(item["!"], "-"));
     }
   }
 
@@ -247,30 +246,30 @@ function getDisables(disabledItems) {
 
 function isImage(attrName) {
   return (
-    attrName.toLowerCase().indexOf('pattern') !== -1 ||
-    attrName.toLowerCase().indexOf('image') !== -1
+    attrName.toLowerCase().indexOf("pattern") !== -1 ||
+    attrName.toLowerCase().indexOf("image") !== -1
   );
 }
 
 function isTranslate(attrName) {
-  return attrName.toLowerCase().indexOf('translate') !== -1;
+  return attrName.toLowerCase().indexOf("translate") !== -1;
 }
 
 function isAttrSupported(attr) {
-  const support = getAttributeSupport(attr['sdk-support']);
+  const support = getAttributeSupport(attr["sdk-support"]);
   if (attr.private) {
-    return false
+    return false;
   }
   return support.basic.android && support.basic.ios;
 }
 
 function getAttributeSupport(sdkSupport) {
   const support = {
-    basic: {android: false, ios: false},
-    data: {android: false, ios: false},
+    basic: { android: false, ios: false },
+    data: { android: false, ios: false },
   };
 
-  const basicSupport = sdkSupport && sdkSupport['basic functionality'];
+  const basicSupport = sdkSupport && sdkSupport["basic functionality"];
   if (basicSupport && basicSupport.android) {
     support.basic.android = isVersionGTE(androidVersion, basicSupport.android);
   }
@@ -278,7 +277,7 @@ function getAttributeSupport(sdkSupport) {
     support.basic.ios = isVersionGTE(iosVersion, basicSupport.ios);
   }
 
-  const dataDrivenSupport = sdkSupport && sdkSupport['data-driven styling'];
+  const dataDrivenSupport = sdkSupport && sdkSupport["data-driven styling"];
   if (dataDrivenSupport && dataDrivenSupport.android) {
     support.data.android = isVersionGTE(
       androidVersion,
@@ -299,26 +298,26 @@ function getAttributeSupport(sdkSupport) {
 
 function isVersionGTE(version, otherVersion) {
   const v = +version
-    .split('.')
-    .map(i => String(i).padStart(3, '0'))
-    .join('');
+    .split(".")
+    .map((i) => String(i).padStart(3, "0"))
+    .join("");
   const ov = +otherVersion
-    .split('.')
-    .map(i => String(i).padStart(3, '0'))
-    .join('');
+    .split(".")
+    .map((i) => String(i).padStart(3, "0"))
+    .join("");
   return v >= ov;
 }
 
 function getAllowedFunctionTypes(paintAttr) {
   const allowedFunctionTypes = [];
 
-  if (paintAttr['zoom-function']) {
-    allowedFunctionTypes.push('camera');
+  if (paintAttr["zoom-function"]) {
+    allowedFunctionTypes.push("camera");
   }
 
-  if (paintAttr['property-function']) {
-    allowedFunctionTypes.push('source');
-    allowedFunctionTypes.push('composite');
+  if (paintAttr["property-function"]) {
+    allowedFunctionTypes.push("source");
+    allowedFunctionTypes.push("composite");
   }
 
   return allowedFunctionTypes;
@@ -327,45 +326,52 @@ function getAllowedFunctionTypes(paintAttr) {
 async function generate() {
   const templateMappings = [
     {
-      input: path.join(TMPL_PATH, 'RCTMLNStyle.h.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.h'),
+      input: path.join(TMPL_PATH, "RCTMLNStyle.h.ejs"),
+      output: path.join(IOS_OUTPUT_PATH, "RCTMLNStyle.h"),
     },
     {
-      input: path.join(TMPL_PATH, 'MaplibreStyles.ts.ejs'),
-      output: path.join(JS_OUTPUT_PATH, 'MaplibreStyles.d.ts'), 
+      input: path.join(TMPL_PATH, "MaplibreStyles.ts.ejs"),
+      output: path.join(JS_OUTPUT_PATH, "MaplibreStyles.d.ts"),
     },
     {
-      input: path.join(TMPL_PATH, 'RCTMLNStyle.m.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.m'),
+      input: path.join(TMPL_PATH, "RCTMLNStyle.m.ejs"),
+      output: path.join(IOS_OUTPUT_PATH, "RCTMLNStyle.m"),
     },
     {
-      input: path.join(TMPL_PATH, 'RCTMLNStyleFactory.java.ejs'),
-      output: path.join(ANDROID_OUTPUT_PATH, 'RCTMLNStyleFactory.java'),
+      input: path.join(TMPL_PATH, "RCTMLNStyleFactory.java.ejs"),
+      output: path.join(ANDROID_OUTPUT_PATH, "RCTMLNStyleFactory.java"),
     },
     {
-      input: path.join(TMPL_PATH, 'styleMap.ts.ejs'),
-      output: path.join(JS_OUTPUT_PATH, 'styleMap.ts'),
+      input: path.join(TMPL_PATH, "styleMap.ts.ejs"),
+      output: path.join(JS_OUTPUT_PATH, "styleMap.ts"),
     },
   ];
-  const outputPaths = templateMappings.map(m => m.output);
+  const outputPaths = templateMappings.map((m) => m.output);
 
   // autogenerate code
-  await Promise.all(templateMappings.map(async ({input, output}) => {
-    const filename = output.split('/').pop();
-    console.log(`Generating ${filename}`);
-    const tmpl = ejs.compile(fs.readFileSync(input, 'utf8'), {strict: true});
-    let results = tmpl({layers});
-    if (filename.endsWith('ts')) {
-      results = await prettier.format(results, { ...prettierrc, filepath: filename});
-      // Ensure all enums are exported
-      results = results.replace(/enum (\w+Enum) \{[^}]+\}\n/g, 'export $&');
-      // Replace Array<any> with any[]
-      results = results.replace(/Array<any>/g, 'any[]');
-      // Replace padding type with float array
-      results = results.replace(/padding: string;/g, 'padding: number[];');
-    }
-    fs.writeFileSync(output, results);
-  }));
+  await Promise.all(
+    templateMappings.map(async ({ input, output }) => {
+      const filename = output.split("/").pop();
+      console.log(`Generating ${filename}`);
+      const tmpl = ejs.compile(fs.readFileSync(input, "utf8"), {
+        strict: true,
+      });
+      let results = tmpl({ layers });
+      if (filename.endsWith("ts")) {
+        results = await prettier.format(results, {
+          ...prettierrc,
+          filepath: filename,
+        });
+        // Ensure all enums are exported
+        results = results.replace(/enum (\w+Enum) \{[^}]+\}\n/g, "export $&");
+        // Replace Array<any> with any[]
+        results = results.replace(/Array<any>/g, "any[]");
+        // Replace padding type with float array
+        results = results.replace(/padding: string;/g, "padding: number[];");
+      }
+      fs.writeFileSync(output, results);
+    }),
+  );
 
   // autogenerate docs
   const docBuilder = new DocJSONBuilder(layers);
@@ -375,11 +381,11 @@ async function generate() {
 
   // Check if any generated files changed
   try {
-    execSync(`git diff --exit-code docs/ ${outputPaths.join(' ')}`);
+    execSync(`git diff --exit-code docs/ ${outputPaths.join(" ")}`);
   } catch (error) {
     console.error(
-      '\n\nThere are unstaged changes in the generated code. ' +
-        'Please add them to your commit.\n' +
+      "\n\nThere are unstaged changes in the generated code. " +
+        "Please add them to your commit.\n" +
         'If you would really like to exclude them, run "git commit -n" to skip.\n\n',
     );
     process.exit(1);
diff --git a/setup-jest.js b/setup-jest.js
index 6ce08f31d..012cc97e6 100644
--- a/setup-jest.js
+++ b/setup-jest.js
@@ -1,8 +1,8 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
 function keyMirror(keys) {
   const obj = {};
-  keys.forEach(key => (obj[key] = key));
+  keys.forEach((key) => (obj[key] = key));
   return obj;
 }
 
@@ -10,77 +10,77 @@ function keyMirror(keys) {
 NativeModules.MLNModule = {
   // constants
   UserTrackingModes: keyMirror([
-    'None',
-    'Follow',
-    'FollowWithCourse',
-    'FollowWithHeading',
+    "None",
+    "Follow",
+    "FollowWithCourse",
+    "FollowWithHeading",
   ]),
-  StyleURL: keyMirror(['Default']),
+  StyleURL: keyMirror(["Default"]),
   EventTypes: keyMirror([
-    'MapClick',
-    'MapLongClick',
-    'RegionWillChange',
-    'RegionIsChanging',
-    'RegionDidChange',
-    'WillStartLoadingMap',
-    'DidFinishLoadingMap',
-    'DidFailLoadingMap',
-    'WillStartRenderingFrame',
-    'DidFinishRenderingFrame',
-    'DidFinishRenderingFrameFully',
-    'DidFinishLoadingStyle',
-    'SetCameraComplete',
+    "MapClick",
+    "MapLongClick",
+    "RegionWillChange",
+    "RegionIsChanging",
+    "RegionDidChange",
+    "WillStartLoadingMap",
+    "DidFinishLoadingMap",
+    "DidFailLoadingMap",
+    "WillStartRenderingFrame",
+    "DidFinishRenderingFrame",
+    "DidFinishRenderingFrameFully",
+    "DidFinishLoadingStyle",
+    "SetCameraComplete",
   ]),
-  CameraModes: keyMirror(['Flight', 'Ease', 'None']),
-  StyleSource: keyMirror(['DefaultSourceID']),
+  CameraModes: keyMirror(["Flight", "Ease", "None"]),
+  StyleSource: keyMirror(["DefaultSourceID"]),
   InterpolationMode: keyMirror([
-    'Exponential',
-    'Categorical',
-    'Interval',
-    'Identity',
+    "Exponential",
+    "Categorical",
+    "Interval",
+    "Identity",
   ]),
-  LineJoin: keyMirror(['Bevel', 'Round', 'Miter']),
-  LineCap: keyMirror(['Butt', 'Round', 'Square']),
-  LineTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  CirclePitchScale: keyMirror(['Map', 'Viewport']),
-  CircleTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  FillExtrusionTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  FillTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  IconRotationAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
-  IconTextFit: keyMirror(['None', 'Width', 'Height', 'Both']),
-  IconTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  SymbolPlacement: keyMirror(['Line', 'Point']),
+  LineJoin: keyMirror(["Bevel", "Round", "Miter"]),
+  LineCap: keyMirror(["Butt", "Round", "Square"]),
+  LineTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  CirclePitchScale: keyMirror(["Map", "Viewport"]),
+  CircleTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillExtrusionTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  IconRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  IconTextFit: keyMirror(["None", "Width", "Height", "Both"]),
+  IconTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  SymbolPlacement: keyMirror(["Line", "Point"]),
   TextAnchor: keyMirror([
-    'Center',
-    'Left',
-    'Right',
-    'Top',
-    'Bottom',
-    'TopLeft',
-    'TopRight',
-    'BottomLeft',
-    'BottomRight',
+    "Center",
+    "Left",
+    "Right",
+    "Top",
+    "Bottom",
+    "TopLeft",
+    "TopRight",
+    "BottomLeft",
+    "BottomRight",
   ]),
-  TextJustify: keyMirror(['Center', 'Left', 'Right']),
-  TextPitchAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
-  TextRotationAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
-  TextTransform: keyMirror(['None', 'Lowercase', 'Uppercase']),
-  TextTranslateAnchor: keyMirror(['Map', 'Viewport']),
-  LightAnchor: keyMirror(['Map', 'Viewport']),
-  OfflinePackDownloadState: keyMirror(['Inactive', 'Active', 'Complete']),
-  OfflineCallbackName: keyMirror(['Progress', 'Error']),
+  TextJustify: keyMirror(["Center", "Left", "Right"]),
+  TextPitchAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextTransform: keyMirror(["None", "Lowercase", "Uppercase"]),
+  TextTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  LightAnchor: keyMirror(["Map", "Viewport"]),
+  OfflinePackDownloadState: keyMirror(["Inactive", "Active", "Complete"]),
+  OfflineCallbackName: keyMirror(["Progress", "Error"]),
 
   // methods
   setAccessToken: jest.fn(),
-  getAccessToken: () => Promise.resolve('test-token'),
+  getAccessToken: () => Promise.resolve("test-token"),
   setConnected: jest.fn(),
 };
 
 NativeModules.MLNOfflineModule = {
-  createPack: packOptions => {
+  createPack: (packOptions) => {
     return Promise.resolve({
       bounds: packOptions.bounds,
-      metadata: JSON.stringify({name: packOptions.name}),
+      metadata: JSON.stringify({ name: packOptions.name }),
     });
   },
   getPacks: () => Promise.resolve([]),
@@ -95,7 +95,7 @@ NativeModules.MLNOfflineModule = {
 
 NativeModules.MLNSnapshotModule = {
   takeSnap: () => {
-    return Promise.resolve('file://test.png');
+    return Promise.resolve("file://test.png");
   },
 };
 

From c4755decb6c44694d990546509da892aefacb694 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 18:02:45 +0200
Subject: [PATCH 04/13] style: manually fix linting errors

---
 .../src/examples/Animations/DriveTheLine.js   | 15 ++--
 .../Annotations/ShowPointAnnotation.js        |  9 ++-
 .../examples/src/examples/BugReportPage.js    |  4 +-
 .../examples/Camera/SetUserTrackingModes.js   | 10 +--
 packages/examples/src/examples/Camera/YoYo.js |  5 +-
 .../examples/FillRasterLayer/GeoJSONSource.js |  4 +-
 .../examples/FillRasterLayer/ImageOverlay.js  |  2 +-
 .../src/examples/Map/ShowAndHideLayer.js      |  6 +-
 .../src/examples/Map/SourceLayerVisibility.js |  6 +-
 .../examples/src/examples/Map/StyleJson.js    |  6 +-
 .../examples/SymbolCircleLayer/CustomIcon.js  |  6 +-
 .../SymbolCircleLayer/ShapeSourceIcon.js      |  6 +-
 packages/expo-app/metro.config.js             |  4 +-
 packages/react-native-app/metro.config.js     |  2 +
 scripts/autogenerate.js                       |  9 +--
 scripts/templates/MaplibreStyles.ts.ejs       | 10 +--
 scripts/templates/RCTMLNStyle.h.ejs           |  4 +-
 scripts/templates/RCTMLNStyle.m.ejs           | 12 ++--
 scripts/templates/RCTMLNStyleFactory.java.ejs | 16 ++---
 .../DocJSONBuilder.js                         |  3 +-
 .../JSDocNodeTree.js                          |  0
 .../MarkdownBuilder.js                        |  0
 .../globals.js => utils/template-globals.js}  | 69 ++++++++++++-------
 23 files changed, 121 insertions(+), 87 deletions(-)
 rename scripts/{autogenHelpers => utils}/DocJSONBuilder.js (99%)
 rename scripts/{autogenHelpers => utils}/JSDocNodeTree.js (100%)
 rename scripts/{autogenHelpers => utils}/MarkdownBuilder.js (100%)
 rename scripts/{autogenHelpers/globals.js => utils/template-globals.js} (92%)

diff --git a/packages/examples/src/examples/Animations/DriveTheLine.js b/packages/examples/src/examples/Animations/DriveTheLine.js
index 850c1397e..cf744f4d0 100755
--- a/packages/examples/src/examples/Animations/DriveTheLine.js
+++ b/packages/examples/src/examples/Animations/DriveTheLine.js
@@ -63,12 +63,15 @@ class DriveTheLine extends React.Component {
   }
 
   onStart() {
-    const routeSimulator = new RouteSimulator(this.state.route);
-    routeSimulator.addListener((currentPoint) =>
-      this.setState({ currentPoint }),
-    );
-    routeSimulator.start();
-    this.setState({ routeSimulator });
+    this.setState((prevState) => {
+      const routeSimulator = new RouteSimulator(prevState.route);
+      routeSimulator.addListener((currentPoint) =>
+        this.setState({ currentPoint }),
+      );
+      routeSimulator.start();
+
+      return { routeSimulator };
+    });
   }
 
   async componentDidMount() {
diff --git a/packages/examples/src/examples/Annotations/ShowPointAnnotation.js b/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
index 1d09dfe59..29e4f61b8 100755
--- a/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
+++ b/packages/examples/src/examples/Annotations/ShowPointAnnotation.js
@@ -82,9 +82,12 @@ class ShowPointAnnotation extends React.Component {
   }
 
   onPress(feature) {
-    const coords = Object.assign([], this.state.coordinates);
-    coords.push(feature.geometry.coordinates);
-    this.setState({ coordinates: coords });
+    this.setState((prevState) => {
+      const coords = Object.assign([], prevState.coordinates);
+      coords.push(feature.geometry.coordinates);
+
+      return { coordinates: coords };
+    });
   }
 
   onAnnotationSelected(activeIndex, feature) {
diff --git a/packages/examples/src/examples/BugReportPage.js b/packages/examples/src/examples/BugReportPage.js
index 0a22e460a..3e6eeeb12 100644
--- a/packages/examples/src/examples/BugReportPage.js
+++ b/packages/examples/src/examples/BugReportPage.js
@@ -73,7 +73,9 @@ class BugReportPage extends React.Component {
       <Page>
         <Button
           title="Grow"
-          onPress={() => this.setState({ radius: this.state.radius + 20 })}
+          onPress={() =>
+            this.setState((prevState) => ({ radius: prevState.radius + 20 }))
+          }
         />
         <MapView style={styles.mapView}>
           <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
diff --git a/packages/examples/src/examples/Camera/SetUserTrackingModes.js b/packages/examples/src/examples/Camera/SetUserTrackingModes.js
index 704e5d20d..6b03aa639 100755
--- a/packages/examples/src/examples/Camera/SetUserTrackingModes.js
+++ b/packages/examples/src/examples/Camera/SetUserTrackingModes.js
@@ -58,13 +58,15 @@ class SetUserTrackingModes extends React.Component {
   }
 
   onToggleUserLocation() {
-    this.setState({ showUserLocation: !this.state.showUserLocation });
+    this.setState((prevState) => ({
+      showUserLocation: !prevState.showUserLocation,
+    }));
   }
 
   onToggleHeadingIndicator() {
-    this.setState({
-      showsUserHeadingIndicator: !this.state.showsUserHeadingIndicator,
-    });
+    this.setState((prevState) => ({
+      showsUserHeadingIndicator: !prevState.showsUserHeadingIndicator,
+    }));
   }
 
   get userTrackingModeText() {
diff --git a/packages/examples/src/examples/Camera/YoYo.js b/packages/examples/src/examples/Camera/YoYo.js
index 291e29dab..4c8f2f85a 100755
--- a/packages/examples/src/examples/Camera/YoYo.js
+++ b/packages/examples/src/examples/Camera/YoYo.js
@@ -28,8 +28,9 @@ class YoYo extends React.Component {
 
   cameraLoop() {
     requestAnimationFrame(async () => {
-      const nextZoomLevel = this.state.zoomLevel === 6 ? 2 : 6;
-      this.setState({ zoomLevel: nextZoomLevel });
+      this.setState((prevState) => ({
+        zoomLevel: prevState.zoomLevel === 6 ? 2 : 6,
+      }));
       this.timeout = setTimeout(() => this.cameraLoop(), 2000);
     });
   }
diff --git a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
index 35aee46fc..54e21d914 100755
--- a/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
+++ b/packages/examples/src/examples/FillRasterLayer/GeoJSONSource.js
@@ -1,5 +1,5 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
-import React, { useState } from "react";
+import React from "react";
 
 import gridPattern from "../../assets/grid_pattern.png";
 import smileyFaceGeoJSON from "../../assets/smiley_face.json";
@@ -18,11 +18,9 @@ const layerStyles = {
 };
 
 function GeoJSONSource() {
-  const [mapRef, setMapRef] = useState(null);
   return (
     <Page>
       <MapLibreGL.MapView
-        ref={setMapRef}
         style={sheet.matchParent}
         styleURL={MapLibreGL.StyleURL.Default}
       >
diff --git a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
index 55a417ba6..34e4cb44b 100755
--- a/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
+++ b/packages/examples/src/examples/FillRasterLayer/ImageOverlay.js
@@ -97,7 +97,7 @@ class ImageOverlay extends React.Component {
         </MapLibreGL.MapView>
         <Bubble
           onPress={() => {
-            this.setState({ dynamic: !this.state.dynamic });
+            this.setState((prevState) => ({ dynamic: !prevState.dynamic }));
           }}
           style={styles.bubble}
         >
diff --git a/packages/examples/src/examples/Map/ShowAndHideLayer.js b/packages/examples/src/examples/Map/ShowAndHideLayer.js
index ef351113d..d7d7fb263 100644
--- a/packages/examples/src/examples/Map/ShowAndHideLayer.js
+++ b/packages/examples/src/examples/Map/ShowAndHideLayer.js
@@ -20,9 +20,9 @@ class ShowAndHideLayer extends React.Component {
   };
 
   onPress = () => {
-    this.setState({
-      show: !this.state.show,
-    });
+    this.setState((prevState) => ({
+      show: !prevState.show,
+    }));
   };
 
   render() {
diff --git a/packages/examples/src/examples/Map/SourceLayerVisibility.js b/packages/examples/src/examples/Map/SourceLayerVisibility.js
index f2f7c05e2..08812c50c 100755
--- a/packages/examples/src/examples/Map/SourceLayerVisibility.js
+++ b/packages/examples/src/examples/Map/SourceLayerVisibility.js
@@ -21,9 +21,9 @@ class SourceLayerVisibility extends React.Component {
 
   onPress = () => {
     this.setState(
-      {
-        show: !this.state.show,
-      },
+      (prevState) => ({
+        show: !prevState.show,
+      }),
       () => {
         this._map.setSourceVisibility(this.state.show, "composite", "road");
       },
diff --git a/packages/examples/src/examples/Map/StyleJson.js b/packages/examples/src/examples/Map/StyleJson.js
index b25ebbffc..516273342 100755
--- a/packages/examples/src/examples/Map/StyleJson.js
+++ b/packages/examples/src/examples/Map/StyleJson.js
@@ -25,9 +25,9 @@ class StyleJson extends React.Component {
   };
 
   onPress = () => {
-    this.setState({
-      showAltStyle: !this.state.showAltStyle,
-    });
+    this.setState((prevState) => ({
+      showAltStyle: !prevState.showAltStyle,
+    }));
   };
 
   render() {
diff --git a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
index d9cc00c24..4fa9a50a8 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/CustomIcon.js
@@ -31,12 +31,12 @@ class CustomIcon extends React.Component {
     const aFeature = feature(e.geometry);
     aFeature.id = `${Date.now()}`;
 
-    this.setState({
+    this.setState((prevState) => ({
       featureCollection: featureCollection([
-        ...this.state.featureCollection.features,
+        ...prevState.featureCollection.features,
         aFeature,
       ]),
-    });
+    }));
   }
 
   onSourceLayerPress({ features, coordinates, point }) {
diff --git a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
index 609f65988..00c179e2a 100755
--- a/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
+++ b/packages/examples/src/examples/SymbolCircleLayer/ShapeSourceIcon.js
@@ -93,9 +93,9 @@ class ShapeSourceIcon extends React.Component {
             nativeAssetImages={["pin"]}
             images={images}
             onImageMissing={(imageKey) =>
-              this.setState({
-                images: { ...this.state.images, [imageKey]: pinIcon },
-              })
+              this.setState((prevState) => ({
+                images: { ...prevState.images, [imageKey]: pinIcon },
+              }))
             }
           />
           <MapLibreGL.ShapeSource
diff --git a/packages/expo-app/metro.config.js b/packages/expo-app/metro.config.js
index e5a9f089f..5328388ca 100644
--- a/packages/expo-app/metro.config.js
+++ b/packages/expo-app/metro.config.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 // Learn more https://docs.expo.io/guides/customizing-metro
 /** @type {import('expo/metro-config').MetroConfig} */
 
@@ -58,7 +60,7 @@ function withMonorepoPaths(config) {
  * @see https://turbo.build/repo/docs/reference/configuration#env
  * @param {import('expo/metro-config').MetroConfig} config
  * @returns {import('expo/metro-config').MetroConfig}
- */
+ */ // eslint-disable-next-line no-unused-vars
 function withTurborepoManagedCache(config) {
   config.cacheStores = [
     new FileStore({ root: path.join(__dirname, "node_modules/.cache/metro") }),
diff --git a/packages/react-native-app/metro.config.js b/packages/react-native-app/metro.config.js
index 0d23924e7..8a2b992eb 100644
--- a/packages/react-native-app/metro.config.js
+++ b/packages/react-native-app/metro.config.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 const path = require("path");
 
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 606b40393..2bd20fab1 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -1,4 +1,4 @@
-require("./autogenHelpers/globals");
+require("./utils/template-globals");
 
 const { execSync } = require("child_process");
 const ejs = require("ejs");
@@ -7,9 +7,10 @@ const fs = require("fs");
 const path = require("path");
 const prettier = require("prettier");
 
+const { camelCase } = require("./utils/template-globals");
 const styleSpecJSON = require("../style-spec/v8.json");
-const DocJSONBuilder = require("./autogenHelpers/DocJSONBuilder");
-const MarkdownBuilder = require("./autogenHelpers/MarkdownBuilder");
+const DocJSONBuilder = require("./utils/DocJSONBuilder");
+const MarkdownBuilder = require("./utils/MarkdownBuilder");
 
 function readIosVersion() {
   const podspecPath = path.join(
@@ -382,7 +383,7 @@ async function generate() {
   // Check if any generated files changed
   try {
     execSync(`git diff --exit-code docs/ ${outputPaths.join(" ")}`);
-  } catch (error) {
+  } catch (_error) {
     console.error(
       "\n\nThere are unstaged changes in the generated code. " +
         "Please add them to your commit.\n" +
diff --git a/scripts/templates/MaplibreStyles.ts.ejs b/scripts/templates/MaplibreStyles.ts.ejs
index 0646a6818..a67958be1 100644
--- a/scripts/templates/MaplibreStyles.ts.ejs
+++ b/scripts/templates/MaplibreStyles.ts.ejs
@@ -59,19 +59,19 @@ export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | Expression;
 
 <%_ for (let enumInfo of getEnums(layers)) { _%>
-  enum <%- pascelCase(enumInfo.name) %>Enum {
+  enum <%- pascalCase(enumInfo.name) %>Enum {
     <%_ for (let k of Object.keys(enumInfo.values)) { _%>
       /** <%- enumInfo.values[k].doc %> */
-      <%- pascelCase(k) %> = '<%- k %>',
+      <%- pascalCase(k) %> = '<%- k %>',
     <%_ } _%>
   }
-  type <%- pascelCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>; 
+  type <%- pascalCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>;
 <%_ } _%>
 
 type Enum<EnumType, EnumValues> = EnumType | EnumValues;
 
 <%_ for (let layer of layers) { _%>
-  export interface <%- pascelCase(layer.name) %>LayerStyleProps {
+  export interface <%- pascalCase(layer.name) %>LayerStyleProps {
     <%_ for (let prop of layer.properties) { _%>
       /**
        * <%- prop.doc.description %>
@@ -96,4 +96,4 @@ type Enum<EnumType, EnumValues> = EnumType | EnumValues;
   };
 <%_ } _%>
 
-export type AllLayerStyleProps = <%- layers.map(l => `${pascelCase(l.name)}LayerStyleProps`).join("|") -%>;
\ No newline at end of file
+export type AllLayerStyleProps = <%- layers.map(l => `${pascalCase(l.name)}LayerStyleProps`).join("|") -%>;
\ No newline at end of file
diff --git a/scripts/templates/RCTMLNStyle.h.ejs b/scripts/templates/RCTMLNStyle.h.ejs
index 4567b2c9d..4a658de16 100644
--- a/scripts/templates/RCTMLNStyle.h.ejs
+++ b/scripts/templates/RCTMLNStyle.h.ejs
@@ -23,9 +23,9 @@
 
 <%_ for (const layer of layers) { _%>
 <%_ for (const prop of layer.properties) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ if (prop.transition) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ } _%>
 <%_ } _%>
 <% } %>
diff --git a/scripts/templates/RCTMLNStyle.m.ejs b/scripts/templates/RCTMLNStyle.m.ejs
index 6a4c43717..1732557a3 100644
--- a/scripts/templates/RCTMLNStyle.m.ejs
+++ b/scripts/templates/RCTMLNStyle.m.ejs
@@ -37,7 +37,7 @@
   <%- ifOrElseIf(i) -%> ([prop isEqualToString:@"<%= layer.properties[i].name %>"]) {
   <%_ if (layer.properties[i].image) { _%>
       if (![styleValue shouldAddImage]) {
-        [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+        [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
@@ -46,18 +46,18 @@
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
                 [self->_style setImage:image forName:imageURI];
-                [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+                [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
               }
             });
           }
         }];
       }
   <%_ } else { _%>
-      [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+      [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
   <%_ } _%>
   <%_ if (layer.properties[i].transition) { _%>
     } else if ([prop isEqualToString:@"<%= layer.properties[i].name %>Transition"]) {
-      [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
+      [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
   <%_ } _%>
   <% } -%>
   } else {
@@ -69,7 +69,7 @@
 
 <% for (const layer of layers) {%>
 <% for (const prop of layer.properties) {%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
     <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
     layer.position = [styleValue getSphericalPosition];
@@ -81,7 +81,7 @@
 }
 <%_ if (prop.transition) { _%>
 
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
     layer.<%- iosPropName(prop.name) -%>Transition = [styleValue getTransition];
 }
diff --git a/scripts/templates/RCTMLNStyleFactory.java.ejs b/scripts/templates/RCTMLNStyleFactory.java.ejs
index 4b16efca5..cdfdd2f52 100644
--- a/scripts/templates/RCTMLNStyleFactory.java.ejs
+++ b/scripts/templates/RCTMLNStyleFactory.java.ejs
@@ -46,16 +46,16 @@ public class RCTMLNStyleFactory {
               style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
-                      RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+                      RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>(layer, styleValue);
                   }
               });
               <%_ } else { _%>
-              RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+              RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>(layer, styleValue);
               <%_ } _%>
               break;
             <%_ if (prop.transition) { _%>
             case "<%= prop.name %>Transition":
-              RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>Transition(layer, styleValue);
+              RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>Transition(layer, styleValue);
               break;
             <%_ } _%>
           <%_ } _%>
@@ -66,12 +66,12 @@ public class RCTMLNStyleFactory {
 
   <%_ for (const layer of layers) { _%>
   <%_ for (const prop of layer.properties) { _%>
-    public static void set<%- pascelCase(prop.name) -%>(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
+    public static void set<%- pascalCase(prop.name) -%>(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
       <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
       Float[] values = styleValue.getFloatArray(VALUE_KEY);
-      layer.set<%- pascelCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
+      layer.set<%- pascalCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
       <%_ } else if (layer.name === 'light') { _%>
-      layer.set<%- pascelCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
+      layer.set<%- pascalCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
       <%_ } else if (prop.name === 'visibility') { _%>
       layer.setProperties(PropertyFactory.visibility(styleValue.getString(VALUE_KEY)));
       <%_ } else if (prop.type === 'resolvedImage') { _%>
@@ -94,10 +94,10 @@ public class RCTMLNStyleFactory {
     }
 
     <%_ if (prop.transition) { %>
-    public static void set<%- pascelCase(prop.name) -%>Transition(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
+    public static void set<%- pascalCase(prop.name) -%>Transition(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
       TransitionOptions transition = styleValue.getTransition();
       if (transition != null) {
-        layer.set<%- pascelCase(prop.name) -%>Transition(transition);
+        layer.set<%- pascalCase(prop.name) -%>Transition(transition);
       }
     }
 
diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/utils/DocJSONBuilder.js
similarity index 99%
rename from scripts/autogenHelpers/DocJSONBuilder.js
rename to scripts/utils/DocJSONBuilder.js
index a2a3af2d2..ed703be67 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/utils/DocJSONBuilder.js
@@ -6,6 +6,7 @@ const docgen = require("react-docgen");
 const parseJsDoc = require("react-docgen/dist/utils/parseJsDoc").default;
 
 const JSDocNodeTree = require("./JSDocNodeTree");
+const { pascalCase } = require("./template-globals");
 
 const COMPONENT_PATH = path.join(
   __dirname,
@@ -33,7 +34,7 @@ class DocJSONBuilder {
     this._styledLayers = {};
 
     for (const styleLayer of styledLayers) {
-      const ComponentName = pascelCase(styleLayer.name);
+      const ComponentName = pascalCase(styleLayer.name);
       const fakeLayers = ["Light", "Atmosphere", "Terrain"];
       if (fakeLayers.includes(ComponentName)) {
         this._styledLayers[ComponentName] = styleLayer;
diff --git a/scripts/autogenHelpers/JSDocNodeTree.js b/scripts/utils/JSDocNodeTree.js
similarity index 100%
rename from scripts/autogenHelpers/JSDocNodeTree.js
rename to scripts/utils/JSDocNodeTree.js
diff --git a/scripts/autogenHelpers/MarkdownBuilder.js b/scripts/utils/MarkdownBuilder.js
similarity index 100%
rename from scripts/autogenHelpers/MarkdownBuilder.js
rename to scripts/utils/MarkdownBuilder.js
diff --git a/scripts/autogenHelpers/globals.js b/scripts/utils/template-globals.js
similarity index 92%
rename from scripts/autogenHelpers/globals.js
rename to scripts/utils/template-globals.js
index 16c1e94f8..cff5c1259 100644
--- a/scripts/autogenHelpers/globals.js
+++ b/scripts/utils/template-globals.js
@@ -40,6 +40,11 @@ const iosSpecOverrides = {
   "text-writing-mode": "text-writing-modes",
 };
 
+function exists(value) {
+  return typeof value !== "undefined" && value !== null;
+}
+global.exists = exists;
+
 global.getValue = function (value, defaultValue) {
   if (!exists(value) || value === "") {
     return defaultValue;
@@ -47,11 +52,7 @@ global.getValue = function (value, defaultValue) {
   return value;
 };
 
-global.exists = function (value) {
-  return typeof value !== "undefined" && value !== null;
-};
-
-global.camelCase = function (str, delimiter = "-") {
+function camelCase(str, delimiter = "-") {
   const parts = str.split(delimiter);
   return parts
     .map((part, index) => {
@@ -61,22 +62,24 @@ global.camelCase = function (str, delimiter = "-") {
       return part.charAt(0).toUpperCase() + part.substring(1);
     })
     .join("");
-};
+}
+global.camelCase = camelCase;
 
-global.pascelCase = function (str, delimiter = "-") {
+function pascalCase(str, delimiter = "-") {
   const parts = str.split(delimiter);
   return parts
-    .map((part, index) => {
+    .map((part) => {
       return part.charAt(0).toUpperCase() + part.substring(1);
     })
     .join("");
-};
+}
+global.pascalCase = pascalCase;
 
 global.setLayerMethodName = function (layer, platform) {
   if (platform === "ios") {
     return `${camelCase(layer.name)}Layer`;
   }
-  return `set${pascelCase(layer.name)}LayerStyle`;
+  return `set${pascalCase(layer.name)}LayerStyle`;
 };
 
 global.getLayerType = function (layer, platform) {
@@ -121,7 +124,7 @@ global.iosStringArrayLiteral = function (arr) {
   return `@[@${arr.map((item) => `"${item}"`).join(", @")}]`;
 };
 
-global.iosPropName = function (name) {
+function iosPropName(name) {
   if (name.indexOf("visibility") !== -1) {
     return "visible";
   }
@@ -132,7 +135,9 @@ global.iosPropName = function (name) {
     return iosPropNameOverrides[name];
   }
   return name;
-};
+}
+
+global.iosPropName = iosPropName;
 
 global.iosMapLibrePropName = function (name) {
   const result = iosPropName(name);
@@ -144,12 +149,12 @@ global.iosMapLibrePropName = function (name) {
 
 global.iosPropMethodName = function (layer, name) {
   if (name.indexOf("Visibility") !== -1) {
-    return pascelCase(layer.name) + "StyleLayer" + name;
+    return pascalCase(layer.name) + "StyleLayer" + name;
   }
   return name;
 };
 
-global.androidInputType = function (type, value) {
+function androidInputType(type, value) {
   if (type === "array" && value) {
     return `${androidInputType(value)}[]`;
   }
@@ -164,9 +169,11 @@ global.androidInputType = function (type, value) {
     default:
       return "String";
   }
-};
+}
+
+global.androidInputType = androidInputType;
 
-global.androidOutputType = function (type, value) {
+function androidOutputType(type, value) {
   if (type === "array" && value) {
     return `${androidOutputType(value)}[]`;
   }
@@ -181,7 +188,9 @@ global.androidOutputType = function (type, value) {
     default:
       return "String";
   }
-};
+}
+
+global.androidOutputType = androidOutputType;
 
 global.androidGetConfigType = function (androidType, prop) {
   switch (androidType) {
@@ -265,7 +274,7 @@ global.getEnums = function (layers) {
 global.dtsInterfaceType = function (prop) {
   const propTypes = [];
 
-  if (prop.name.indexOf("Translate") !== -1 && prop.type != "enum") {
+  if (prop.name.indexOf("Translate") !== -1 && prop.type !== "enum") {
     propTypes.push("Translation");
   } else if (prop.type === "color") {
     propTypes.push("string");
@@ -283,7 +292,7 @@ global.dtsInterfaceType = function (prop) {
         break;
       case "enum":
         propTypes.push(
-          `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(
+          `Enum<${pascalCase(prop.name)}Enum, ${pascalCase(
             prop.name,
           )}EnumValues>[]`,
         );
@@ -294,7 +303,7 @@ global.dtsInterfaceType = function (prop) {
     propTypes.push("number");
   } else if (prop.type === "enum") {
     propTypes.push(
-      `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(prop.name)}EnumValues>`,
+      `Enum<${pascalCase(prop.name)}Enum, ${pascalCase(prop.name)}EnumValues>`,
     );
   } else if (prop.type === "boolean") {
     propTypes.push("boolean");
@@ -387,7 +396,7 @@ ${startAtSpace(2, "])")}`;
   }
 };
 
-global.startAtSpace = function (spaceCount, str) {
+function startAtSpace(spaceCount, str) {
   let value = "";
 
   for (let i = 0; i < spaceCount; i++) {
@@ -395,9 +404,11 @@ global.startAtSpace = function (spaceCount, str) {
   }
 
   return `${value}${str}`;
-};
+}
 
-global.replaceNewLine = function (str) {
+global.startAtSpace = startAtSpace;
+
+function replaceNewLine(str) {
   if (str === undefined) {
     return undefined;
   }
@@ -405,7 +416,9 @@ global.replaceNewLine = function (str) {
     return null;
   }
   return str.replace(/\n/g, "<br/>");
-};
+}
+
+global.replaceNewLine = replaceNewLine;
 
 global.styleMarkdownTableRow = function (style) {
   return `| \`${style.name}\` | \`${style.type}\` | \`${
@@ -441,7 +454,7 @@ function _propMarkdownTableRows(props, prefix = "") {
       } | \`${type}\` | \`${defaultValue}\` | \`${
         prop.required
       }\` | ${replaceNewLine(description)} |`;
-      if (type == "shape") {
+      if (type === "shape") {
         result = `${result}\n${_propMarkdownTableRows(
           prop.type.value,
           `&nbsp;&nbsp;${prefix}`,
@@ -451,6 +464,7 @@ function _propMarkdownTableRows(props, prefix = "") {
     })
     .join("\n");
 }
+
 global.propMarkdownTableRows = function (component) {
   return _propMarkdownTableRows(component.props, "");
 };
@@ -507,3 +521,8 @@ Object.keys(iosSpecOverrides).forEach((propName) => {
     iosSpecOverrides[propName],
   );
 });
+
+module.exports = {
+  camelCase,
+  pascalCase,
+};

From 3a2188fba3d0b3c6a20421e6f02a9f7a6a0e924b Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 18:47:07 +0200
Subject: [PATCH 05/13] fix: add @babel/plugin-transform-private-methods for
 jest

---
 babel.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/babel.config.js b/babel.config.js
index 3930a81ef..aab92a348 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,6 +1,9 @@
 module.exports = {
   presets: ["module:metro-react-native-babel-preset"],
-  plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
+  plugins: [
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-transform-private-methods", { loose: true }],
+  ],
   env: {
     production: {
       plugins: ["transform-remove-console"],

From 4463c98c6001a8683f07c8eb06ee3a2529a3c0b5 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 18:49:52 +0200
Subject: [PATCH 06/13] chore: cleanup scripts

---
 .github/pull_request_template.md              |  2 +-
 .github/workflows/on-push.yml                 | 12 ++++-----
 package.json                                  | 26 +++++++++----------
 scripts/{autogenerate.js => generate-docs.js} |  2 +-
 4 files changed, 21 insertions(+), 21 deletions(-)
 rename scripts/{autogenerate.js => generate-docs.js} (99%)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index e5432b5fe..6da8f6e50 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -18,7 +18,7 @@ Added `your feature` that allows ...
 <!-- Check completed item: [X] -->
 
 - [ ] I have tested this on a device/simulator for each compatible OS
-- [ ] I formatted JS and TS files with running `yarn lint:fix` in the root folder
+- [ ] I formatted JS and TS files with running `yarn lint:eslint:fix` in the root folder
 - [ ] I have run tests via `yarn test` in the root folder
 - [ ] I updated the documentation with running `yarn generate` in the root folder
 - [ ] I mentioned this change in `CHANGELOG.md`
diff --git a/.github/workflows/on-push.yml b/.github/workflows/on-push.yml
index c2f33b1ef..24c010fe4 100644
--- a/.github/workflows/on-push.yml
+++ b/.github/workflows/on-push.yml
@@ -24,14 +24,14 @@ jobs:
       - name: Install
         run: yarn install --immutable --check-cache
 
-      - name: Lint
-        run: yarn lint
+      - name: Lint with ESLint
+        run: yarn lint:eslint
 
-      - name: Typescript check
-        run: yarn typescript:check
+      - name: Lint with TSC
+        run: yarn lint:tsc
 
-      - name: Test
-        run: yarn unittest
+      - name: Run test with Jest
+        run: yarn test
 
       - name: Generate
         run: yarn generate
diff --git a/package.json b/package.json
index 239afa60a..fc2470a36 100644
--- a/package.json
+++ b/package.json
@@ -21,19 +21,19 @@
     "url": "https://github.com/maplibre/maplibre-react-native"
   },
   "scripts": {
-    "fetch:style:spec": "./scripts/download-style-spec.sh",
-    "generate": "yarn fetch:style:spec && yarn node ./scripts/autogenerate",
-    "test": "yarn lint && yarn unittest",
-    "unittest": "jest",
-    "unittest:single": "jest --testNamePattern",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "prepack": "pinst --disable && yarn build:plugin",
-    "test:plugin": "jest plugin",
-    "build:plugin": "tsc --build plugin",
-    "lint:plugin": "eslint plugin/src/*",
-    "postpack": "pinst --enable",
-    "typescript:check": "tsc -p ./tsconfig.json --noEmit"
+    "generate": "yarn generate:fetch-style-spec && yarn generate:docs",
+    "generate:fetch-style-spec": "./scripts/download-style-spec.sh",
+    "generate:docs": "yarn node ./scripts/generate-docs",
+    "test": "jest",
+    "lint": "yarn lint:eslint && yarn lint:tsc",
+    "lint:eslint": "eslint .",
+    "lint:eslint:fix": "eslint . --fix",
+    "lint:tsc": "tsc --noEmit",
+    "plugin:build": "tsc --build plugin",
+    "plugin:lint": "eslint plugin/src/*",
+    "plugin:test": "jest plugin",
+    "prepack": "pinst --disable && yarn plugin:build",
+    "postpack": "pinst --enable"
   },
   "peerDependenciesMeta": {
     "@expo/config-plugins": {
diff --git a/scripts/autogenerate.js b/scripts/generate-docs.js
similarity index 99%
rename from scripts/autogenerate.js
rename to scripts/generate-docs.js
index 2bd20fab1..1b09ebf8d 100644
--- a/scripts/autogenerate.js
+++ b/scripts/generate-docs.js
@@ -41,7 +41,7 @@ function readAndroidVersion() {
 
 if (!styleSpecJSON) {
   console.log(
-    'Could not find style spec, try running "yarn run fetch:style:spec"',
+    'Could not find style spec, try running "yarn generate:fetch-style-spec"',
   );
   process.exit(1);
 }

From 97273961ec35f8f45a8c397a84fc384179f8c74c Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 18:50:02 +0200
Subject: [PATCH 07/13] chore: remove index.d.ts from pr template

---
 .github/pull_request_template.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 6da8f6e50..826be06f7 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -22,7 +22,6 @@ Added `your feature` that allows ...
 - [ ] I have run tests via `yarn test` in the root folder
 - [ ] I updated the documentation with running `yarn generate` in the root folder
 - [ ] I mentioned this change in `CHANGELOG.md`
-- [ ] I updated the typings files (`index.d.ts`)
 - [ ] I added/updated a sample (`/example`)
 
 ## Screenshot OR Video

From d2de4bd4b5b1cc8979faa37d253cceedb469b640 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Mon, 14 Oct 2024 18:51:23 +0200
Subject: [PATCH 08/13] chore: extract jest.config.js

---
 jest.config.js |  7 +++++++
 package.json   | 15 ---------------
 2 files changed, 7 insertions(+), 15 deletions(-)
 create mode 100644 jest.config.js

diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..0b2a61fca
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,7 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  preset: "react-native",
+  collectCoverageFrom: ["javascript/**/*.js"],
+  setupFiles: ["./setup-jest.js", "./__tests__/__mocks__/react-native.mock.js"],
+  modulePathIgnorePatterns: ["example", "__tests__/__mocks__", "fixtures"],
+};
diff --git a/package.json b/package.json
index fc2470a36..08bb403e6 100644
--- a/package.json
+++ b/package.json
@@ -97,21 +97,6 @@
   "resolutions": {
     "typescript": "5.5.3"
   },
-  "jest": {
-    "preset": "react-native",
-    "collectCoverageFrom": [
-      "javascript/**/*.js"
-    ],
-    "setupFiles": [
-      "./setup-jest.js",
-      "./__tests__/__mocks__/react-native.mock.js"
-    ],
-    "modulePathIgnorePatterns": [
-      "example",
-      "__tests__/__mocks__",
-      "fixtures"
-    ]
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "yarn lint"
   },

From 23b9acf5a64cd02f70a503a00993537332efc849 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Fri, 18 Oct 2024 08:38:59 +0200
Subject: [PATCH 09/13] chore: add .git-blame-ignore-revs

---
 .git-blame-ignore-revs | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .git-blame-ignore-revs

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 000000000..4b4fd8f99
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,3 @@
+# style: apply formatting via lint:fix
+# https://github.com/maplibre/maplibre-react-native/pull/467
+017b3861ae8ac856a3b032ebea6497eff4420e1f
\ No newline at end of file

From 08b33421fb43d9589d09b25fe680b948e78fc3ad Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Fri, 18 Oct 2024 08:52:56 +0200
Subject: [PATCH 10/13] chore: change eslint ignorePatterns to build

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b749fec45..0a3d72c46 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
   root: true,
   extends: ["universe/native"],
-  ignorePatterns: ["plugin/build"],
+  ignorePatterns: ["build"],
 };

From 5cbc65cea4619c4dc49c7c41993c673a88a57313 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Sat, 19 Oct 2024 15:24:39 +0200
Subject: [PATCH 11/13] chore: align tsconfigs

---
 packages/examples/tsconfig.json         |  8 ++++++++
 packages/expo-app/tsconfig.json         | 14 ++------------
 packages/react-native-app/tsconfig.json | 17 ++++++-----------
 3 files changed, 16 insertions(+), 23 deletions(-)
 create mode 100644 packages/examples/tsconfig.json

diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
new file mode 100644
index 000000000..3b73000be
--- /dev/null
+++ b/packages/examples/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}
diff --git a/packages/expo-app/tsconfig.json b/packages/expo-app/tsconfig.json
index e50f0a493..c7b95c2a0 100644
--- a/packages/expo-app/tsconfig.json
+++ b/packages/expo-app/tsconfig.json
@@ -1,17 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true,
-    "jsx": "preserve",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@maplibre/maplibre-react-native": ["../../javascript"],
-    }
+    "strict": true
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "include": ["**/*.ts", "**/*.tsx"]
 }
diff --git a/packages/react-native-app/tsconfig.json b/packages/react-native-app/tsconfig.json
index e91508e2c..772c415ae 100644
--- a/packages/react-native-app/tsconfig.json
+++ b/packages/react-native-app/tsconfig.json
@@ -1,12 +1,7 @@
 {
-  "extends": "../tsconfig.json",
-    "compilerOptions": {
-      "noEmit": true,
-      "paths": {
-        "@maplibre/maplibre-react-native": ["../../javascript"],
-        "react": ["./node_modules/@types/react"],
-        "react-native": ["./node_modules/@types/react-native"]
-      },
-    },
-    "include": ["./src/**/*", "index.js", "e2e/firstTest.e2e.js"],
-  }
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

From e75bf966f27d5e2936fb4a52b1006d4c98fa5207 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Sat, 19 Oct 2024 15:24:52 +0200
Subject: [PATCH 12/13] chore: lint:tsc include examples

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 08bb403e6..cb6c9ad4f 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "lint": "yarn lint:eslint && yarn lint:tsc",
     "lint:eslint": "eslint .",
     "lint:eslint:fix": "eslint . --fix",
-    "lint:tsc": "tsc --noEmit",
+    "lint:tsc": "tsc --project . --noEmit && tsc --project ./packages/examples",
     "plugin:build": "tsc --build plugin",
     "plugin:lint": "eslint plugin/src/*",
     "plugin:test": "jest plugin",

From 77701aa629c1fa45270570977440f10d6481cc21 Mon Sep 17 00:00:00 2001
From: Kilian Finger <finger@trafficon.eu>
Date: Sat, 19 Oct 2024 15:25:26 +0200
Subject: [PATCH 13/13] style: fix type errors

---
 javascript/components/HeadingIndicator.tsx                   | 1 -
 javascript/types/png.d.ts                                    | 1 +
 packages/examples/src/examples/Annotations/CustomCallout.tsx | 1 -
 packages/examples/src/examples/Map/ShowMap.tsx               | 2 +-
 packages/examples/src/types/png.d.ts                         | 1 +
 5 files changed, 3 insertions(+), 3 deletions(-)
 create mode 100644 javascript/types/png.d.ts
 create mode 100644 packages/examples/src/types/png.d.ts

diff --git a/javascript/components/HeadingIndicator.tsx b/javascript/components/HeadingIndicator.tsx
index 068e77137..4e4d84792 100644
--- a/javascript/components/HeadingIndicator.tsx
+++ b/javascript/components/HeadingIndicator.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 
 import SymbolLayer from "./SymbolLayer";
-// @ts-ignore
 import headingIcon from "../../assets/heading.png";
 import BaseProps from "../types/BaseProps";
 
diff --git a/javascript/types/png.d.ts b/javascript/types/png.d.ts
new file mode 100644
index 000000000..49977505d
--- /dev/null
+++ b/javascript/types/png.d.ts
@@ -0,0 +1 @@
+declare module "*.png";
diff --git a/packages/examples/src/examples/Annotations/CustomCallout.tsx b/packages/examples/src/examples/Annotations/CustomCallout.tsx
index a36e103f8..2451e429e 100644
--- a/packages/examples/src/examples/Annotations/CustomCallout.tsx
+++ b/packages/examples/src/examples/Annotations/CustomCallout.tsx
@@ -3,7 +3,6 @@ import { Feature } from "@turf/helpers/dist/js";
 import React, { FC, useState, ReactElement } from "react";
 import { View, Text, ViewStyle, StyleProp, TextStyle } from "react-native";
 
-// @ts-ignore
 import exampleIcon from "../../assets/pin.png";
 import sheet from "../../styles/sheet";
 import Page from "../common/Page";
diff --git a/packages/examples/src/examples/Map/ShowMap.tsx b/packages/examples/src/examples/Map/ShowMap.tsx
index ca0f14658..2ea666683 100755
--- a/packages/examples/src/examples/Map/ShowMap.tsx
+++ b/packages/examples/src/examples/Map/ShowMap.tsx
@@ -28,7 +28,7 @@ const ShowMap = (): ReactElement => {
 
   const onMapChange = (
     index: number,
-    newStyleURL: MapLibreGL.StyleURL,
+    newStyleURL: typeof MapLibreGL.StyleURL,
   ): void => {
     setStyleURL({ styleURL: newStyleURL });
   };
diff --git a/packages/examples/src/types/png.d.ts b/packages/examples/src/types/png.d.ts
new file mode 100644
index 000000000..49977505d
--- /dev/null
+++ b/packages/examples/src/types/png.d.ts
@@ -0,0 +1 @@
+declare module "*.png";