Fix Android navigation mode detection

android/app/src/main/java/me/rainbow/MainApplication.kt

@@ -21,6 +21,7 @@ import me.rainbow.NativeModules.RNStartTime.RNStartTimePackage
 import me.rainbow.NativeModules.RNTextAnimatorPackage.RNTextAnimatorPackage
 import me.rainbow.NativeModules.RNZoomableButton.RNZoomableButtonPackage
 import me.rainbow.NativeModules.SystemNavigationBar.SystemNavigationBarPackage
+import me.rainbow.NativeModules.NavbarHeight.NavbarHeightPackage
 
 class MainApplication : Application(), ReactApplication {
     override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) {
@@ -41,6 +42,7 @@ class MainApplication : Application(), ReactApplication {
             packages.add(KeychainPackage(KeychainModuleBuilder().withoutWarmUp()))
             packages.add(RNStartTimePackage(START_MARK))
             packages.add(RNHapticsPackage())
+            packages.add(NavbarHeightPackage())
             return packages
         }
 

android/app/src/main/java/me/rainbow/NativeModules/NavbarHeight/NavbarHeightModule.java

@@ -0,0 +1,91 @@
+package me.rainbow.NativeModules.NavbarHeight;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+import android.graphics.Point;
+import android.view.WindowManager;
+import android.view.Display;
+import java.lang.IllegalAccessException;
+import java.lang.reflect.InvocationTargetException;
+import java.lang.NoSuchMethodException;
+import android.view.WindowInsets;
+import android.os.Build;
+import android.content.Context;
+
+@ReactModule(name = NavbarHeightModule.NAME)
+public class NavbarHeightModule extends ReactContextBaseJavaModule {
+    public static final String NAME = "NavbarHeight";
+
+    public NavbarHeightModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    @Override
+    @NonNull
+    public String getName() {
+        return NAME;
+    }
+
+    // Example method
+    // See https://reactnative.dev/docs/native-modules-android
+    @ReactMethod
+    public double getNavigationBarHeightSync() {
+        Context context = getReactApplicationContext();
+        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+        if (Build.VERSION.SDK_INT >= 30) {
+            return windowManager
+                    .getCurrentWindowMetrics()
+                    .getWindowInsets()
+                    .getInsets(WindowInsets.Type.navigationBars())
+                    .bottom;
+        } else {
+            Point appUsableSize = getAppUsableScreenSize(context);
+            Point realScreenSize = getRealScreenSize(context);
+
+            // navigation bar on the side
+            if (appUsableSize.x < realScreenSize.x) {
+                return appUsableSize.y;
+            }
+
+            // navigation bar at the bottom
+            if (appUsableSize.y < realScreenSize.y) {
+                return realScreenSize.y - appUsableSize.y;
+            }
+
+            // navigation bar is not present
+            return 0;
+        }
+    }
+    public Point getAppUsableScreenSize(Context context) {
+        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+        Display display = windowManager.getDefaultDisplay();
+        Point size = new Point();
+        display.getSize(size);
+        return size;
+    }
+    public Point getRealScreenSize(Context context) {
+        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+        Display display = windowManager.getDefaultDisplay();
+        Point size = new Point();
+
+        if (Build.VERSION.SDK_INT >= 17) {
+            display.getRealSize(size);
+        } else if (Build.VERSION.SDK_INT >= 14) {
+            try {
+                size.x = (Integer) Display.class.getMethod("getRawWidth").invoke(display);
+                size.y = (Integer) Display.class.getMethod("getRawHeight").invoke(display);
+            } catch (IllegalAccessException e) {} catch (InvocationTargetException e) {} catch (NoSuchMethodException e) {}
+        }
+
+        return size;
+    }
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public double getNavigationBarHeight() {
+        return getNavigationBarHeightSync();
+    }
+}

android/app/src/main/java/me/rainbow/NativeModules/NavbarHeight/NavbarHeightPackage.java

@@ -0,0 +1,28 @@
+package me.rainbow.NativeModules.NavbarHeight;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class NavbarHeightPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new NavbarHeightModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

src/components/DappBrowser/Dimensions.ts

@@ -2,11 +2,11 @@ import { IS_ANDROID, IS_IOS } from '@/env';
 import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator';
 import { deviceUtils, safeAreaInsetValues } from '@/utils';
 import { StatusBar } from 'react-native';
-import { isUsingButtonNavigation } from '@/helpers/statusBarHelper';
+import { NAVIGATION_BAR_HEIGHT } from '@/utils/deviceUtils';
 
 export const BOTTOM_BAR_HEIGHT = 88;
 export const TOP_INSET = IS_IOS ? safeAreaInsetValues.top : StatusBar.currentHeight ?? 40;
-export const BOTTOM_INSET = IS_ANDROID ? (isUsingButtonNavigation() ? 32 : 12) : BOTTOM_BAR_HEIGHT;
+export const BOTTOM_INSET = IS_ANDROID ? NAVIGATION_BAR_HEIGHT - 8 : BOTTOM_BAR_HEIGHT;
 export const WEBVIEW_HEIGHT = deviceUtils.dimensions.height - TOP_INSET - TAB_BAR_HEIGHT - BOTTOM_INSET;
 export const COLLAPSED_WEBVIEW_ASPECT_RATIO = 4 / 3;
 export const COLLAPSED_WEBVIEW_HEIGHT_UNSCALED = Math.min(WEBVIEW_HEIGHT, deviceUtils.dimensions.width * COLLAPSED_WEBVIEW_ASPECT_RATIO);

src/handlers/localstorage/theme.ts

@@ -2,7 +2,7 @@ import { IS_ANDROID } from '@/env';
 import { getGlobal, saveGlobal } from './common';
 import { NativeModules } from 'react-native';
 import { colors } from '@/styles';
-import { isUsingButtonNavigation } from '@/helpers/statusBarHelper';
+import { isUsingButtonNavigation } from '@/utils/deviceUtils';
 import { Themes, ThemesType } from '@/theme';
 
 const { NavigationBar } = NativeModules;

src/helpers/statusBarHelper.ts

@@ -1,5 +1,4 @@
 import { ColorValue, StatusBar, StatusBarAnimation } from 'react-native';
-import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
 
 export const setTranslucent = (translucent: boolean): void => {
   StatusBar.setTranslucent(translucent);
@@ -30,7 +29,3 @@ export const setDarkContent = (isAnimated = true) => {
     barStyle: 'dark-content',
   });
 };
-
-export const isUsingButtonNavigation = () => {
-  return getSoftMenuBarHeight() > 95;
-};

src/navigation/SwipeNavigator.tsx

@@ -7,7 +7,7 @@ import { TestnetToast } from '@/components/toasts';
 import { DAPP_BROWSER, POINTS, useExperimentalFlag } from '@/config';
 import { Box, Columns, globalColors, Stack, useForegroundColor, Text, Cover, useColorMode } from '@/design-system';
 import { IS_ANDROID, IS_IOS, IS_TEST } from '@/env';
-import { isUsingButtonNavigation } from '@/helpers/statusBarHelper';
+import { isUsingButtonNavigation } from '@/utils/deviceUtils';
 import { useAccountAccentColor, useAccountSettings, useCoinListEdited, useDimensions, usePendingTransactions } from '@/hooks';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import RecyclerListViewScrollToTopProvider, {
@@ -51,7 +51,7 @@ function getTabBarHeight() {
     return 82;
   }
   if (!isUsingButtonNavigation()) {
-    return 72;
+    return 82;
   }
   return 48;
 }

src/utils/deviceUtils.ts

@@ -1,8 +1,10 @@
-import { Dimensions, PixelRatio, Platform } from 'react-native';
+import { Dimensions, PixelRatio, Platform, NativeModules } from 'react-native';
+const { NavbarHeight } = NativeModules;
 
-import { IS_IOS } from '@/env';
+import { IS_ANDROID, IS_IOS } from '@/env';
 
 const { height, width } = Dimensions.get('window');
+const scale = Dimensions.get('screen').scale;
 
 const deviceUtils = (function () {
   const iPhone15ProHeight = 852,
@@ -39,5 +41,10 @@ const deviceUtils = (function () {
 export const DEVICE_WIDTH = deviceUtils.dimensions.width;
 export const DEVICE_HEIGHT = deviceUtils.dimensions.height;
 export const PIXEL_RATIO = PixelRatio.get();
-
+export const NAVIGATION_BAR_HEIGHT = NavbarHeight.getNavigationBarHeight() / scale;
 export default deviceUtils;
+
+export const isUsingButtonNavigation = () => {
+  if (!IS_ANDROID) return false;
+  return NAVIGATION_BAR_HEIGHT > 40;
+};