Inset does not make sense on motorola moto g(8) power

[Ralle]

I borrowed an Android phone from my neighbour to test our new app. To my horror, this plugin does not seem to work well with Capacitor. I believe Capacitor does not render behind the menubar on Android and thus, this plugin should always return 0 for SafeArea.getSafeAreaInsets().

Take a look at this screenshot. The green box is the height of the safe area inset.

On iOS it makes sense and appears behind the notch. On Android, the full height of the menu bar is repeated below the menubar, causing a huge chin.

I am using a default Capacitor iOS and Android app so I am not sure what I'm missing.

[AlwaysLoveme]

I borrowed an Android phone from my neighbour to test our new app. To my horror, this plugin does not seem to work well with Capacitor. I believe Capacitor does not render behind the menubar on Android and thus, this plugin should always return 0 for SafeArea.getSafeAreaInsets().

Take a look at this screenshot. The green box is the height of the safe area inset.

On iOS it makes sense and appears behind the notch. On Android, the full height of the menu bar is repeated below the menubar, causing a huge chin.

I am using a default Capacitor iOS and Android app so I am not sure what I'm missing.

Did you set your app OverlaysWebView of Statusbar ? if you set , this plugin can work well if you did not, try to set it(doc: https://capacitorjs.com/docs/apis/status-bar#setoverlayswebview):

npm install @capacitor/status-bar
npx cap sync

import { StatusBar } from '@capacitor/status-bar';
// Display content under transparent status bar (Android only)
StatusBar.setOverlaysWebView({ overlay: true });

[Ralle]

That worked. I highly recommend you add this to the README of this project.

Thank you very much.