capacitor-plugin-safe-area

a capacitor plugin to get SafeArea info on Android and IOS, latest version is support for Capacitor v6.

Version Support

• [x] v3.0.0 support Capacitor v6
• [x] v2.0.0 support Capacitor v5
• [x] v1.0.0 support Capacitor v4
• [x] v0.0.1 support Capacitor v3

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

Install

npm install capacitor-plugin-safe-area@latest
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');
});

await SafeArea.removeAllListeners();

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

Use with TailwindCSS

Use TailwindCSS with the plugin: https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor

For more usage, please refer to the plugin repo

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

import type {FC} from 'react';

const App = () => {
    useEffect(() => {
        (async function(){
            const safeAreaData = await SafeArea.getSafeAreaInsets();
            const {insets} = safeAreaData;
            for (const [key, value] of Object.entries(insets)) {
                document.documentElement.style.setProperty(
                    `--safe-area-inset-${key}`,
                    `${value}px`,
                );
            }
        })()
    }, []);
    return (
        <div className="pb-safe toolbar">
            <div>....</div>
        </div>
    )
}
export default App;

API

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

getSafeAreaInsets()

getSafeAreaInsets() => Promise<SafeAreaInsets>

Get mobile SafeArea info

Returns: Promise<SafeAreaInsets>

---

getStatusBarHeight()

getStatusBarHeight() => Promise<StatusBarInfo>

Get mobile statusbar height

Returns: Promise<StatusBarInfo>

---

setImmersiveNavigationBar()

setImmersiveNavigationBar() => Promise<void>

Set navigation bar immersive on Android , not implemented on IOS

---

addListener('safeAreaChanged', ...)

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

Event listener when safe-area changed

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

Returns: Promise<PluginListenerHandle>

---

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all native listeners for this plugin

---

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>