@capacitor-community/safe-area

Exposes the safe area insets from native iOS/Android devices to Capacitor projects. Based on the original work from https://github.com/capacitor-community/safe-area

Install

npm install git@github.com:lincolnthree/safe-area.git
npx cap sync

Usage

Register the plugin via the entry file of your project. Ensure the import does not get Minified.

import { SafeAreaControl } from '@capacitor-community/safe-area';

/*
 * Initialize automatic inset detection, add styles to document element.
 */
SafeAreaControl.load();

/* Get current insets */
SafeAreaControl.getInsets();

/* Add a listener for inset value changes */
SafeAreaControl.addListener((insets) => {
    // Do something with insets
});

/*
 * Trigger an update and fire new inset values.
 */
SafeAreaControl.refresh();

/*
 * Stop listening for and updating inset values in the document.
 */
SafeAreaControl.unload();

Configure

To get full screen mode use this in your main activity. Requires Android 28+

@Override
public void onResume() {
  super.onResume();

  Window window = getWindow();
  window.setStatusBarColor(0);
  window.setNavigationBarColor(0);
  window.getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY |
      View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
      View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
  );

  WindowManager.LayoutParams params = window.getAttributes();
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
    params.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
  }

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
    window.setDecorFitsSystemWindows(false);
  }
}

Maintainers

Maintainer	GitHub	Social
Lincoln Baxter, III	lincolnthree	@lincolnthree

API

• refresh()
• getSafeAreaInsets()
• addListener(...)
• Interfaces

refresh()

refresh() => any

Detect new inset values and fire {@link EventOnInsetsChanged}.

Returns: any

---

getSafeAreaInsets()

getSafeAreaInsets() => any

Get the current {@link SafeAreaInsets}.

Returns: any

---

addListener(...)

addListener(eventName: "safeAreaInsetChanged", listener: SafeAreaInsetsChangedCallback) => PluginListenerHandle

Add a listener to receive callbacks when {@link EventOnInsetsChanged} events occur. TIP: Un-register listeners via {@link PluginListenerHandle.remove} when no longer needed or memory leaks will occur.

Param	Type
eventName	"safeAreaInsetChanged"
listener	(insets: SafeAreaInsets) => void

Returns: PluginListenerHandle

---

Interfaces

SafeAreaInsetsResult

Prop	Type
insets	SafeAreaInsets

SafeAreaInsets

SafeArea inset values.

Prop	Type
top	number
right	number
bottom	number
left	number

PluginListenerHandle

Prop	Type
remove	() => any