a capacitor plugin to get SafeArea info on Android and IOS, latest version is support for Capacitor v6.
- [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
npm install capacitor-plugin-safe-area@latest
npx cap sync
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 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;
getSafeAreaInsets()
getStatusBarHeight()
setImmersiveNavigationBar()
addListener('safeAreaChanged', ...)
removeAllListeners()
- Interfaces
getSafeAreaInsets() => Promise<SafeAreaInsets>
Get mobile SafeArea info
Returns: Promise<SafeAreaInsets>
getStatusBarHeight() => Promise<StatusBarInfo>
Get mobile statusbar height
Returns: Promise<StatusBarInfo>
setImmersiveNavigationBar() => Promise<void>
Set navigation bar immersive on Android , not implemented on IOS
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() => Promise<void>
Remove all native listeners for this plugin
Prop | Type |
---|---|
insets |
SafeArea |
Prop | Type |
---|---|
top |
number |
right |
number |
bottom |
number |
left |
number |
Prop | Type |
---|---|
statusBarHeight |
number |
Prop | Type |
---|---|
remove |
() => Promise<void> |