3.0.1 • Published 24 days ago
capacitor-plugin-safe-area v3.0.1
capacitor-plugin-safe-area
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
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> |
3.0.1
24 days ago
3.0.0
25 days ago
2.0.6
6 months ago
2.0.3
12 months ago
2.0.2
12 months ago
2.0.5
11 months ago
2.0.4
11 months ago
2.0.1
12 months ago
2.0.0
1 year ago
1.0.1
1 year ago
1.0.0
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago