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;
Promise<SafeAreaInsets>
--------------------
### getStatusBarHeight()
```typescript
getStatusBarHeight() => PromisePromise<StatusBarInfo>
--------------------
### setImmersiveNavigationBar()
```typescript
setImmersiveNavigationBar() => Promise'safeAreaChanged'
|
| **`listenerFunc`** | (data: SafeAreaInsets) => void
|
**Returns:** Promise<PluginListenerHandle>
--------------------
### removeAllListeners()
```typescript
removeAllListeners() => PromiseSafeArea
|
#### SafeArea
| Prop | Type |
| ------------ | ------------------- |
| **`top`** | number
|
| **`right`** | number
|
| **`bottom`** | number
|
| **`left`** | number
|
#### StatusBarInfo
| Prop | Type |
| --------------------- | ------------------- |
| **`statusBarHeight`** | number
|
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| **`remove`** | () => Promise<void>
|