capacitor-plugin-safe-area

a capacitor plugin to get SafeArea info on Android and IOS, now it's also support Capacitor v5 with version@2.0.0+

if you are using Capacitor 3.x , please install version 0.0.x , and version 1.x.x for Capacitor 4.x

I'm glad if this plugin helped you, please give it a star

Install

npm install capacitor-plugin-safe-area
npx cap sync

Useage

import { SafeArea } from 'capacitor-plugin-safe-area';

SafeArea.getSafeAreaInsets().then(({ insets }) => {
  console.log(insets);
});

SafeArea.getStatusBarHeight().then(({ statusBarHeight }) => {
  console.log(statusBarHeight, 'statusbarHeight');
});

// when safe-area changed
const eventListener = await SafeArea.addListener('safeAreaChanged', data => {
  const { insets } = data;
  for (const [key, value] of Object.entries(insets)) {
    document.documentElement.style.setProperty(
      `--safe-area-${key}`,
      `${value}px`,
    );
  }
});
eventListener.remove();

API

• getSafeAreaInsets()
• getStatusBarHeight()
• addListener('safeAreaChanged', ...)
• Interfaces

getSafeAreaInsets()

getSafeAreaInsets() => Promise<SafeAreaInsets>

get mobile SafeArea info

Returns: Promise<SafeAreaInsets>

---

getStatusBarHeight()

getStatusBarHeight() => Promise<StatusBarInfo>

get mobile statusbar height

Returns: Promise<StatusBarInfo>

---

addListener('safeAreaChanged', ...)

addListener(event: 'safeAreaChanged', listenerFunc: (data: SafeAreaInsets) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

event listener when safe-area changed

Param	Type
event	'safeAreaChanged'
listenerFunc	(data: SafeAreaInsets) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

---

Interfaces

SafeAreaInsets

Prop	Type
insets	SafeArea

SafeArea

Prop	Type
top	number
right	number
bottom	number
left	number

StatusBarInfo

Prop	Type
statusBarHeight	number

PluginListenerHandle

Prop	Type
remove	() => Promise<void>