Making the app fullscreen on Android

package-lock.json

@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
+        "@awesome-cordova-plugins/android-full-screen": "^6.2.0",
         "@awesome-cordova-plugins/geolocation": "^6.2.0",
         "@capacitor-community/background-geolocation": "^1.2.6",
         "@capacitor/android": "^3.4.3",
@@ -22,6 +23,7 @@
         "@suid/icons-material": "^0.5.1",
         "@suid/material": "^0.8.1",
         "@suid/vite-plugin": "^0.1.0",
+        "cordova-plugin-fullscreen": "^1.3.0",
         "isomorphic-xml2js": "^0.1.3",
         "lodash": "^4.17.21",
         "memoizee": "^0.4.15",
@@ -76,6 +78,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@awesome-cordova-plugins/android-full-screen": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@awesome-cordova-plugins/android-full-screen/-/android-full-screen-6.2.0.tgz",
+      "integrity": "sha512-6CiqZMiRGGjx69g1T5idf7xTP0DR12octA6VZ5CsdQZGAg+Dzg/P8LGiDCfVU4e7fi7UvyBrNID8IHWILVEXkA==",
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "@awesome-cordova-plugins/core": "^6.0.1",
+        "rxjs": "^5.5.0 || ^6.5.0 || ^7.3.0"
+      }
+    },
     "node_modules/@awesome-cordova-plugins/core": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/@awesome-cordova-plugins/core/-/core-6.2.0.tgz",
@@ -2474,6 +2488,17 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "dev": true
     },
+    "node_modules/cordova-plugin-fullscreen": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-fullscreen/-/cordova-plugin-fullscreen-1.3.0.tgz",
+      "integrity": "sha512-K0SQMUyemQrezNlnfyHXQd8BgpwR3TS/fx456GueRCUdro5QG6tCzDDVBCVEGeKroDhXWmabAlhvO3gPoqw/tg==",
+      "engines": [
+        {
+          "name": "cordova",
+          "version": ">=3.0.0"
+        }
+      ]
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",

package.json

@@ -26,6 +26,7 @@
     "vitest": ">0.6.0"
   },
   "dependencies": {
+    "@awesome-cordova-plugins/android-full-screen": "^6.2.0",
     "@awesome-cordova-plugins/geolocation": "^6.2.0",
     "@capacitor-community/background-geolocation": "^1.2.6",
     "@capacitor/android": "^3.4.3",
@@ -38,6 +39,7 @@
     "@suid/icons-material": "^0.5.1",
     "@suid/material": "^0.8.1",
     "@suid/vite-plugin": "^0.1.0",
+    "cordova-plugin-fullscreen": "^1.3.0",
     "isomorphic-xml2js": "^0.1.3",
     "lodash": "^4.17.21",
     "memoizee": "^0.4.15",

src/App.tsx

@@ -1,6 +1,12 @@
 import type { Component } from 'solid-js';
 import { Routes, Route, Navigate } from '@solidjs/router';
 import Map from './components/map';
+import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
+
+// See https://stackoverflow.com/questions/71288670/how-to-make-fullscreen-ionic-capacitor-app
+AndroidFullScreen.isImmersiveModeSupported()
+  .then(() => AndroidFullScreen.immersiveMode())
+  .catch(console.warn);
 
 const App: Component = () => {
   return (