capacitor-plugin-safe-area

a capacitor plugin to get SafeArea info on Android and IOS, now it's also support Capacitor v5 with [email protected]+

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

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

Install

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

Usage

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

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

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

SafeArea.getNavigationBarHeight().then(( { navigationBarHeight }) => { // android only
  console.log(navigationBarHeight, 'navigationBarHeight')
})

// 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()
• getNavigationBarHeight()
• 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>

---

getNavigationBarHeight()

getNavigationBarHeight() => Promise<NavigationBarInfo>

get android system navigation bar height

Returns: Promise<NavigationBarInfo>

---

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

NavigationBarInfo

Prop	Type
navigationBarHeight	number

PluginListenerHandle

Prop	Type
remove	() => Promise<void>