Awesome
capacitor-plugin-safe-area
<p align="left"> <a href="https://img.shields.io/badge/support-Android-516BEB?logo=android&logoColor=white&style=plastic"> <img src="https://img.shields.io/badge/support-Android-516BEB?style=plastic" alt="" > </a> <a href="https://img.shields.io/badge/support-Android-516BEB?logo=android&logoColor=white&style=plastic"> <img src="https://img.shields.io/badge/support-IOS-516BEB?style=plastic" alt=""> </a> <a href="https://img.shields.io/badge/support-Android-516BEA?logo=ios&logoColor=white&style=plastic"> <img src="https://img.shields.io/badge/support-Capacitor v6-516BEA?style=plastic" alt=""> </a> <a href="https://www.npmjs.com/package/capacitor-plugin-safe-area"> <img src="https://img.shields.io/npm/v/capacitor-plugin-safe-area/latest.svg" alt=""> </a> <a href="https://www.npmjs.com/package/capacitor-plugin-safe-area"> <img src="https://img.shields.io/npm/dm/capacitor-plugin-safe-area.svg" alt=""/> </a> </p>a capacitor plugin to get SafeArea info on Android and IOS, latest version is support for Capacitor v6.
Version Support
- v3.0.0 support Capacitor v6
- v2.0.0 support Capacitor v5
- v1.0.0 support Capacitor v4
- 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
<docgen-index>getSafeAreaInsets()
getStatusBarHeight()
setImmersiveNavigationBar()
addListener('safeAreaChanged', ...)
removeAllListeners()
- Interfaces
getSafeAreaInsets()
getSafeAreaInsets() => Promise<SafeAreaInsets>
Get mobile <a href="#safearea">SafeArea</a> info
Returns: <code>Promise<<a href="#safeareainsets">SafeAreaInsets</a>></code>
getStatusBarHeight()
getStatusBarHeight() => Promise<StatusBarInfo>
Get mobile statusbar height
Returns: <code>Promise<<a href="#statusbarinfo">StatusBarInfo</a>></code>
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 | <code>'safeAreaChanged'</code> |
listenerFunc | <code>(data: <a href="#safeareainsets">SafeAreaInsets</a>) => void</code> |
Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>
removeAllListeners()
removeAllListeners() => Promise<void>
Remove all native listeners for this plugin
Interfaces
SafeAreaInsets
Prop | Type |
---|---|
insets | <code><a href="#safearea">SafeArea</a></code> |
SafeArea
Prop | Type |
---|---|
top | <code>number</code> |
right | <code>number</code> |
bottom | <code>number</code> |
left | <code>number</code> |
StatusBarInfo
Prop | Type |
---|---|
statusBarHeight | <code>number</code> |
PluginListenerHandle
Prop | Type |
---|---|
remove | <code>() => Promise<void></code> |