alwaysloveme / capacitor-plugin-safe-area

capacitor plugin to get safeArea info on Android and IOS, support Capacitor6

Hi, I am ZX 👋

A Front-end developer from ShangHai of ✨China✨

• 🔭 I’m currently working in ShangHai
• 🌱 I’m currently learning React 、 Vue3、 Capacitor
• 💬 Ask me about Framework7 、 Ionic4+ 、 Vue
• 📫 How to reach me: [email protected]

capacitor-plugin-safe-area's Issues

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

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.

Android wrong top insets values

Hello,
the values that I get for Android top insets seems to be higher than expected.

Not receiving correct values upon app launch

I can't seem to figure out how to reliably get the correct values upon launch.

I'm doing this:

const listenForSafeArea = async (store) => {
  const {insets} = await SafeArea.getSafeAreaInsets();
  store.dispatch(DeviceDuck.Ax.setSafeArea(insets));
  SafeArea.addListener('safeAreaChanged', ({insets}) => {
    store.dispatch(DeviceDuck.Ax.setSafeArea(insets));
  });
};
listenForSafeArea();

Sometimes it works, and sometimes it doesn't. As soon as something causes the insets to change, it works, but that first call to SafeArea.getSafeAreaInsets sometimes has the values and sometimes doesn't.

Is there a particular event I need to wait for before that first call?

I'm experiencing this in iOS. Haven't tried Android.

Navigation immersion mode didn't work

Issue

I am using this plugin to set insets on Android and make the app layout behind the navigation bar. I am having trouble setting the app behind the navigation bar/handle with

await SafeArea.setImmersiveNavigationBar()

which didn't work on my Android 12, API 31.

Context

• Samsung Galaxy
• Android 12
• API 31
• physical device

Version

• [email protected]

Own Solution

Solution by https://github.com/aeharding/voyager/pull/644/files

public class MainActivity extends BridgeActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // https://github.com/ionic-team/capacitor/issues/2840#issuecomment-891093722
    //
    // Use a transparent status bar and nav bar, and place the window behind the status bar
    // and nav bar. Due to a chromium bug, we need to get the height of both bars
    // and add it to the safe area insets. The native plugin is used to get this info.
    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1094366
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
      getWindow().setDecorFitsSystemWindows(false);
      getWindow().setStatusBarColor(0);
      getWindow().setNavigationBarColor(0);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
      // On older versions of android setDecorFitsSystemWindows doesn't exist yet, but it can
      // be emulated with flags.
      // It still must be P or greater, as that is the min version for getting the insets
      // through the native plugin.
      getWindow().getDecorView().setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
          View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
          View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
      getWindow().setStatusBarColor(0);
      getWindow().setNavigationBarColor(0);
    }
  }
}

Android safe area bottom doesn't work properly

With capacitor v5 and android 13 (with buttons on nav bar enabled), the bottom safe aera is bigger than excepted. Elements fixed at bottom display in the system nav bar, and unable to be clicked

Support capacitor 4.0

Hi! Capacitor 4.0 has been released. Are there plans to support it?

Bug: Running into Issues with Cap 5

I'm running Capacitor with the following versions:

		"@capacitor/android": "^5.2.2",
		"@capacitor/core": "^5.2.2",
		"@capacitor/device": "^5.0.6",
		"@capacitor/ios": "^5.2.2",
		"@capacitor/status-bar": "^5.0.6",

I am running version ^2.0.5 of this plugin. The CSS variables used to be set but, they don't seem to be working anymore. I am doing this in Vue. This is my test code:

<script setup lang="ts">
	import { ref, onMounted } from "vue";

	const props = defineProps<{ title: string }>();

	const val = ref("");

	onMounted(() => {
		val.value = getComputedStyle(document.documentElement)
			.getPropertyValue("--safe-area-top")
			.trim() || "Not set";
	});
</script>

<template>
	<div class="pt-safe flex bg-fg-primary self-stretch">
		<div class="flex w-full flex-row justify-between p-4 align-middle">
			<div class="pl-4 text-2xl text-text-secondary">
				{{ val }}
			</div>
			<div class="h-full">
				<i-mdi-close-circle
					class="h-8 w-8 text-bg-secondary active:text-bg-secondary-dark"
					@click="$router.back()"
				/>
			</div>
		</div>
	</div>
</template>

I'm not sure why it would work before but, not anymore after 1 month. Thoughts?

Support Capacitor v5

The current version of the plugin does not work with Capacitor 5 and there is a conflict with npm i. Is there a plan to update this plugin for Capacitor 5?

[bug]: Incorrect Safe Areas on Pixel Phones

I'm using the Pixel phone emulations using the Android Device Manager. I find that the safe areas are inconsistent with what I would expect.

I am using a combination of the safe area and a padding of 16 pixels. So basically, I adjust the container of the top controls down with absolute and add top: var(--safe-area-inset-top). The variable is set with insets.top from this plugin.

Here are the results on different devices:

Pixel 6a:

Pixel 6 Pro:

Pixel 7 Pro:

The most correct one is the 6 Pro. The rest definitely have incorrect calculations for the top padding. Is there any way that we can fix this?

Missing license

Hi and thank you for your great plugin! 😃

I'd like to know under what license is this software. Is it FOSS (e.g. MIT, Apache)? 😊

removeAllListeners is not defined

The method is mentioned in the readme, but is not implemented:

Error calling method removeAllListeners on plugin SafeArea: No method found.

ReferenceError: exports is not defined in ES module scope

Hey, thanks for updating to capacitor v5!

When I build my capacitor app, I get this error:

> next build && next export

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types  
- info Creating an optimized production build  
- info Compiled successfully
- info Collecting page data ..ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/***/node_modules/capacitor-plugin-safe-area/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///***/node_modules/capacitor-plugin-safe-area/dist/plugin.cjs.js:3:23
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

> Build error occurred
Error: Failed to collect page data for /
    at /***/node_modules/next/dist/build/utils.js:1152:15 {
  type: 'Error'
}
- info Collecting page data .
Process finished with exit code 1

My package.json:

{
  "name": "***",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "next build && next export",
    "sync": "npm run static && npx cap sync",
    "ios": "npx cap open ios",
    "android": "npx cap open android"
  },
  "dependencies": {
    "@capacitor/android": "next",
    "@capacitor/browser": "next",
    "@capacitor/haptics": "next",
    "@capacitor/ios": "next",
    "@capacitor/keyboard": "next",
    "@types/node": "^20.2.1",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "capacitor-plugin-safe-area": "^2.0.0",
    "eslint": "^8.40.0",
    "eslint-config-next": "^13.4.3",
    "framer-motion": "^10.12.12",
    "next": "^13.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.0.4",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@capacitor/cli": "next",
    "@types/uuid": "^9.0.1"
  }
}

Thanks!

Use 'self' when referencing to property 'implementation'

你好 @AlwaysLoveme , 当Fastlane在CICD运行，我遇到这个小漏洞：

reference to property 'implementation' in closure requires explicit use of 'self' to make capture semantics explicit

https://github.com/AlwaysLoveme/capacitor-plugin-safe-area/blame/27de371ab59e58a63b0741a8cfff8dd4bc13e240/ios/Plugin/SafeAreaPlugin.swift#LL38C26-L38C26

能否知道需要等多久你能处理啊？

Bug: Android 12 and bottom navigation bar

Hey there,

thanks for the plugin!

I recently discovered an issue with Android 12 and bottom navigation bars. In this case the plugin returns e.g. 41 pixel for the bottom inset, although there is no real inset.

Is this something that can be fixed? Or can I detect the navigation bar somehow?

I am thankful for all inputs :)

V 0.0.7 npm install issues

When attepting to install the latest version the following error occours:

npm ERR! Found: @capacitor/[email protected]
npm ERR! node_modules/@capacitor/core
npm ERR! @capacitor/core@"^4.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @capacitor/core@"^3.0.0" from [email protected]
npm ERR! node_modules/capacitor-plugin-safe-area
npm ERR! capacitor-plugin-safe-area@"^0.0.7" from the root project

safe areas do not work properly on IOS ( iPhone11 )

I have an angular app purely using capacitor 4 without Ionic. I am using the plugin and it works like a charm on Android but unfortunately not so good on iOS. I also tried the css way without the plugin but the result was same:

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

With both ways I am using:
viewport-fit=cover in viewport metatag
ios: {
contentInset: "always", in the capacitor.config.ts file
},

But the content of the app goes under the status bar / top safe area when scrolling. I also tried various combinations with these options but none of the results was good ( for example I got the safe areas properly but content goes under them and they are transparent I think it was with not using contentInset and viewport-fit with contain not cover ).
Is there any way to make this work properly with capacitor 4 on IOS ?

[docs]: Add reference to Complementary Plugin

I'm wondering if it would be possible to include a reference to my repository, https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor. It would be helpful for other developers who are using TailwindCSS and your plugin to know about this complementary plugin too since it's not all that popular.

Update Github description

Github description says "capacitor plugin to get safeArea info on Android and IOS, support Capacitor3/Capacitor4 "

But now it supports v5 so I suggest updating! Thanks for the great plugin!

Module not found: Error: Can't resolve './definitions'

I'm getting this error on v2.0.0 capacitor 5

BREAKING CHANGE: The request './definitions' failed to resolve only because it was resolved as fully specified

Android bottom inset is 0 when using windowTranslucentNavigation

Expected bottom offset to correctly calculate when using
<item name="android:windowTranslucentNavigation">true</item>
in the styles.xml, this is not the case :/

Add event listener because some devices can change the safe area

We could implement a layout listener like Keyboard Plugin does:

https://github.com/ionic-team/capacitor-plugins/blob/main/keyboard/android/src/main/java/com/capacitorjs/plugins/keyboard/Keyboard.java#L61

With this we could emit an event so the safe areas can get updated

Crash on android

Step to reproduce: Launch app

Error log:

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: __PACKAGE__, PID: 20067
    java.lang.RuntimeException: Unable to resume activity {__PACKAGE__/__PACKAGE__.MainActivity}: java.lang.ClassCastException: com.zhuxian.safearea.SafeAreaPlugin cannot be cast to android.hardware.SensorEventListener
        at android.app.ActivityThread.performResumeActivity(ActivityThread.java:5230)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:5269)
        at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
        at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
        at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2438)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:226)
        at android.os.Looper.loop(Looper.java:313)
        at android.app.ActivityThread.main(ActivityThread.java:8669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)
     Caused by: java.lang.ClassCastException: com.zhuxian.safearea.SafeAreaPlugin cannot be cast to android.hardware.SensorEventListener
        at com.zhuxian.safearea.SafeAreaPlugin.handleOnResume(SafeAreaPlugin.java:44)
        at com.getcapacitor.Bridge.onResume(Bridge.java:1191)
        at com.getcapacitor.BridgeActivity.onResume(BridgeActivity.java:86)
        at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1476)
        at android.app.Activity.performResume(Activity.java:8441)
        at android.app.ActivityThread.performResumeActivity(ActivityThread.java:5200)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:5269) 
        at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54) 
        at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45) 
        at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176) 
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2438) 
        at android.os.Handler.dispatchMessage(Handler.java:106) 
        at android.os.Looper.loopOnce(Looper.java:226) 
        at android.os.Looper.loop(Looper.java:313) 
        at android.app.ActivityThread.main(ActivityThread.java:8669) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135) 

OS:

Device: Samsung Galaxy S22
Android: 12

Xcode Complie Warnings

Xcode is showing the following warnings:

/ios/App/App/AppDelegate.swift:74:50: 'statusBarFrame' was deprecated in iOS 13.0: Use the statusBarManager property of the window scene instead.

Can this be updated?

My minium IOS version is 13