.

android/app/build.gradle

@@ -6,7 +6,7 @@ android {
         applicationId "com.bigauction.mobile"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36
+        versionCode 42
         versionName "1.0.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

android/app/capacitor.build.gradle

@@ -29,6 +29,7 @@ dependencies {
     implementation project(':appsflyer-capacitor-plugin')
     implementation project(':capacitor-codepush')
     implementation project(':capacitor-facebook')
+    implementation project(':capacitor-plugin-safe-area')
 
 }
 

android/capacitor.settings.gradle

@@ -61,3 +61,6 @@ project(':capacitor-codepush').projectDir = new File('../node_modules/capacitor-
 
 include ':capacitor-facebook'
 project(':capacitor-facebook').projectDir = new File('../node_modules/capacitor-facebook/android')
+
+include ':capacitor-plugin-safe-area'
+project(':capacitor-plugin-safe-area').projectDir = new File('../node_modules/capacitor-plugin-safe-area/android')

ios/App/App.xcodeproj/project.pbxproj

@@ -352,7 +352,7 @@
 				CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = NO;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 36;
+				CURRENT_PROJECT_VERSION = 42;
 				DEFINES_MODULE = NO;
 				DEVELOPMENT_TEAM = 72P5Y6N578;
 				INFOPLIST_FILE = App/Info.plist;
@@ -377,7 +377,7 @@
 				CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = NO;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 36;
+				CURRENT_PROJECT_VERSION = 42;
 				DEFINES_MODULE = NO;
 				DEVELOPMENT_TEAM = 72P5Y6N578;
 				INFOPLIST_FILE = App/Info.plist;

package.json

@@ -40,6 +40,7 @@
     "axios": "^1.2.0",
     "capacitor-codepush": "https://github.com/x1ongzhu/capacitor-codepush.git",
     "capacitor-facebook": "https://github.com/x1ongzhu/capacitor-facebook.git",
+    "capacitor-plugin-safe-area": "^1.0.1",
     "cordova-plugin-android-notch": "^1.0.3",
     "date-fns": "^2.29.3",
     "eruda": "^2.6.1",

src/App.vue

@@ -176,7 +176,7 @@ async function open(phone) {
         right: 0;
         background: var(--ion-background-color);
         border-radius: 16px 16px 0px 0px;
-        padding-bottom: env(safe-area-inset-bottom, 20px);
+        padding-bottom: var(--ion-safe-area-bottom, 20px);
         .head {
             height: 60px;
             .f();

src/main.js

@@ -25,6 +25,7 @@ import { codePush, InstallMode } from 'capacitor-codepush'
 import { SyncStatus } from 'capacitor-codepush/dist/esm/syncStatus'
 import { Network } from '@capacitor/network'
 import { Facebook } from 'capacitor-facebook'
+import { SafeArea } from 'capacitor-plugin-safe-area'
 
 import 'normalize.css/normalize.css'
 
@@ -189,13 +190,19 @@ document.addEventListener('deviceready', () => {
         if (Capacitor.getPlatform() === 'android') {
             StatusBar.setOverlaysWebView({ overlay: true })
             const style = document.documentElement.style
-
-            window.AndroidNotch.getInsetTop(
-                px => {
-                    style.setProperty('--ion-safe-area-top', px + 'px')
-                },
-                err => console.error('Failed to get insets top:', err)
-            )
+            if (Capacitor.isPluginAvailable('SafeArea')) {
+                SafeArea.getSafeAreaInsets().then(({ insets }) => {
+                    style.setProperty('--ion-safe-area-top', insets.top + 'px')
+                    // style.setProperty('--ion-safe-area-bottom', insets.bottom + 'px')
+                })
+            } else {
+                window.AndroidNotch.getInsetTop(
+                    px => {
+                        style.setProperty('--ion-safe-area-top', px + 'px')
+                    },
+                    err => console.error('Failed to get insets top:', err)
+                )
+            }
         }
         initAF()
         Network.getStatus().then(status => {

src/version.json

@@ -1,12 +1,12 @@
 {
     "ios": {
         "version": "1.0.0",
-        "build": 36
+        "build": 42
     },
     "android": {
         "version": "1.0.0",
-        "build": 36,
+        "build": 42,
         "versionCode": 12
     },
-    "www": 1019
+    "www": 1025
 }

src/views/ProductDetailPage.vue

@@ -537,7 +537,7 @@ ion-footer {
     }
     .footer {
         position: absolute;
-        bottom: 0;
+        bottom: var(--ion-safe-area-bottom);
         left: 0;
         right: 0;
         padding: 9px 27px;

src/views/TabsPage.vue

@@ -126,7 +126,7 @@ ion-icon {
     margin: auto;
     left: 0;
     right: 0;
-    bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
+    bottom: calc(var(--ion-safe-area-bottom, 0px) + 15px);
     width: 56px;
     display: block;
     z-index: 100;

yarn.lock

@@ -2365,6 +2365,11 @@ caniuse-lite@^1.0.30001400:
   version "0.0.1"
   resolved "https://github.com/x1ongzhu/capacitor-facebook.git#be50b2a17f763d055cdb2e470112d9f8bbf33116"
 
+capacitor-plugin-safe-area@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/capacitor-plugin-safe-area/-/capacitor-plugin-safe-area-1.0.1.tgz#92ff48d7fbc46e5f632a2d0c06686fec1ab16c1f"
+  integrity sha512-VELYRWNguGwt6hgzEKSQskk24x87VhiwlCxq839s2XS5vgMwEXdDguNaUoG9aVO8Ayu9nEn6snZ3J+bVjs2B4A==
+
 caw@^2.0.0, caw@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/caw/-/caw-2.0.1.tgz#6c3ca071fc194720883c2dc5da9b074bfc7e9e95"