capacitor-plugin-safe-area
TypeScript icon, indicating that this package has built-in type declarations

3.0.3 • Public • Published

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()

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>

Readme

Keywords

Package Sidebar

Install

npm i capacitor-plugin-safe-area

Weekly Downloads

18,653

Version

3.0.3

License

MIT

Unpacked Size

43.7 kB

Total Files

27

Last publish

Collaborators

  • zhuxian