{"id":13795593,"url":"https://github.com/AlwaysLoveme/capacitor-plugin-safe-area","last_synced_at":"2025-05-12T23:32:28.629Z","repository":{"id":51487397,"uuid":"395208488","full_name":"AlwaysLoveme/capacitor-plugin-safe-area","owner":"AlwaysLoveme","description":"capacitor plugin to get safeArea info on Android and IOS, support Capacitor6","archived":false,"fork":false,"pushed_at":"2025-02-13T08:07:47.000Z","size":34976,"stargazers_count":94,"open_issues_count":8,"forks_count":18,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-03T19:01:54.726Z","etag":null,"topics":["capacitor","capacitor-plugin","typescript"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlwaysLoveme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-12T05:47:14.000Z","updated_at":"2025-05-02T17:25:04.000Z","dependencies_parsed_at":"2024-01-29T10:10:28.224Z","dependency_job_id":"24416485-31f3-425c-9b00-a92c25731d59","html_url":"https://github.com/AlwaysLoveme/capacitor-plugin-safe-area","commit_stats":{"total_commits":55,"total_committers":8,"mean_commits":6.875,"dds":0.2727272727272727,"last_synced_commit":"458c007d53ef46712a2e974504db0eeeb504419e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlwaysLoveme%2Fcapacitor-plugin-safe-area","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlwaysLoveme%2Fcapacitor-plugin-safe-area/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlwaysLoveme%2Fcapacitor-plugin-safe-area/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlwaysLoveme%2Fcapacitor-plugin-safe-area/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlwaysLoveme","download_url":"https://codeload.github.com/AlwaysLoveme/capacitor-plugin-safe-area/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253841049,"owners_count":21972583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["capacitor","capacitor-plugin","typescript"],"created_at":"2024-08-03T23:00:59.177Z","updated_at":"2025-05-12T23:32:28.617Z","avatar_url":"https://github.com/AlwaysLoveme.png","language":"Java","funding_links":[],"categories":["Plugins","Other plugins"],"sub_categories":["Community Plugins","Specialized Hardware"],"readme":"# capacitor-plugin-safe-area\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://img.shields.io/badge/support-Android-516BEB?logo=android\u0026logoColor=white\u0026style=plastic\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/support-Android-516BEB?style=plastic\"  alt=\"\" \u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://img.shields.io/badge/support-Android-516BEB?logo=android\u0026logoColor=white\u0026style=plastic\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/support-IOS-516BEB?style=plastic\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://img.shields.io/badge/support-Android-516BEA?logo=ios\u0026logoColor=white\u0026style=plastic\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/support-Capacitor v7-516BEA?style=plastic\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/capacitor-plugin-safe-area\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/capacitor-plugin-safe-area/latest.svg\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/capacitor-plugin-safe-area\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/capacitor-plugin-safe-area.svg\" alt=\"\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n#### a capacitor plugin to get SafeArea info on Android and IOS, latest version is support for Capacitor v7.\n\n### Version Support\n- [x] v4.0.0 support Capacitor v7\n- [x] v3.0.0 support Capacitor v6\n- [x] v2.0.0 support Capacitor v5\n- [x] v1.0.0 support Capacitor v4\n- [x] v0.0.1 support Capacitor v3\n\n\u003e I'm very glad if the plugin helped you, please give it a star\n\n## Install\n\n```bash\nnpm install capacitor-plugin-safe-area@latest\nnpx cap sync\n```\n\n## Usage\n\n```typescript\nimport { SafeArea } from 'capacitor-plugin-safe-area';\n\nSafeArea.getSafeAreaInsets().then(({ insets }) =\u003e {\n  console.log(insets);\n});\n\nSafeArea.getStatusBarHeight().then(({ statusBarHeight }) =\u003e {\n  console.log(statusBarHeight, 'statusbarHeight');\n});\n\nawait SafeArea.removeAllListeners();\n\n// when safe-area changed\nawait SafeArea.addListener('safeAreaChanged', data =\u003e {\n  const { insets } = data;\n  for (const [key, value] of Object.entries(insets)) {\n    document.documentElement.style.setProperty(\n      `--safe-area-inset-${key}`,\n      `${value}px`,\n    );\n  }\n});\n```\n\n## Use with TailwindCSS\n Use `TailwindCSS` with the `plugin`:  [https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor](https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor)\n\n For more usage, please refer to the plugin repo\n\n```tsx\nimport {useEffect} from 'react';\nimport { SafeArea } from 'capacitor-plugin-safe-area';\n\nimport type {FC} from 'react';\n\nconst App = () =\u003e {\n    useEffect(() =\u003e {\n        (async function(){\n            const safeAreaData = await SafeArea.getSafeAreaInsets();\n            const {insets} = safeAreaData;\n            for (const [key, value] of Object.entries(insets)) {\n                document.documentElement.style.setProperty(\n                    `--safe-area-inset-${key}`,\n                    `${value}px`,\n                );\n            }\n        })()\n    }, []);\n    return (\n        \u003cdiv className=\"pb-safe toolbar\"\u003e\n            \u003cdiv\u003e....\u003c/div\u003e\n        \u003c/div\u003e\n    )\n}\nexport default App;\n```\n\n## API\n\n\u003cdocgen-index\u003e\n\n* [`getSafeAreaInsets()`](#getsafeareainsets)\n* [`getStatusBarHeight()`](#getstatusbarheight)\n* [`setImmersiveNavigationBar()`](#setimmersivenavigationbar)\n* [`addListener('safeAreaChanged', ...)`](#addlistenersafeareachanged-)\n* [`removeAllListeners()`](#removealllisteners)\n* [Interfaces](#interfaces)\n\n\u003c/docgen-index\u003e\n\n\u003cdocgen-api\u003e\n\u003c!--Update the source file JSDoc comments and rerun docgen to update the docs below--\u003e\n\n### getSafeAreaInsets()\n\n```typescript\ngetSafeAreaInsets() =\u003e Promise\u003cSafeAreaInsets\u003e\n```\n\nGet mobile \u003ca href=\"#safearea\"\u003eSafeArea\u003c/a\u003e info\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;\u003ca href=\"#safeareainsets\"\u003eSafeAreaInsets\u003c/a\u003e\u0026gt;\u003c/code\u003e\n\n--------------------\n\n\n### getStatusBarHeight()\n\n```typescript\ngetStatusBarHeight() =\u003e Promise\u003cStatusBarInfo\u003e\n```\n\nGet mobile statusbar height\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;\u003ca href=\"#statusbarinfo\"\u003eStatusBarInfo\u003c/a\u003e\u0026gt;\u003c/code\u003e\n\n--------------------\n\n\n### setImmersiveNavigationBar()\n\n```typescript\nsetImmersiveNavigationBar() =\u003e Promise\u003cvoid\u003e\n```\n\nSet navigation bar immersive on Android , not implemented on IOS\n\n--------------------\n\n\n### addListener('safeAreaChanged', ...)\n\n```typescript\naddListener(event: 'safeAreaChanged', listenerFunc: (data: SafeAreaInsets) =\u003e void) =\u003e Promise\u003cPluginListenerHandle\u003e\n```\n\nEvent listener when safe-area changed\n\n| Param              | Type                                                                         |\n| ------------------ | ---------------------------------------------------------------------------- |\n| **`event`**        | \u003ccode\u003e'safeAreaChanged'\u003c/code\u003e                                               |\n| **`listenerFunc`** | \u003ccode\u003e(data: \u003ca href=\"#safeareainsets\"\u003eSafeAreaInsets\u003c/a\u003e) =\u0026gt; void\u003c/code\u003e |\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;\u003ca href=\"#pluginlistenerhandle\"\u003ePluginListenerHandle\u003c/a\u003e\u0026gt;\u003c/code\u003e\n\n--------------------\n\n\n### removeAllListeners()\n\n```typescript\nremoveAllListeners() =\u003e Promise\u003cvoid\u003e\n```\n\nRemove all native listeners for this plugin\n\n--------------------\n\n\n### Interfaces\n\n\n#### SafeAreaInsets\n\n| Prop         | Type                                          |\n| ------------ | --------------------------------------------- |\n| **`insets`** | \u003ccode\u003e\u003ca href=\"#safearea\"\u003eSafeArea\u003c/a\u003e\u003c/code\u003e |\n\n\n#### SafeArea\n\n| Prop         | Type                |\n| ------------ | ------------------- |\n| **`top`**    | \u003ccode\u003enumber\u003c/code\u003e |\n| **`right`**  | \u003ccode\u003enumber\u003c/code\u003e |\n| **`bottom`** | \u003ccode\u003enumber\u003c/code\u003e |\n| **`left`**   | \u003ccode\u003enumber\u003c/code\u003e |\n\n\n#### StatusBarInfo\n\n| Prop                  | Type                |\n| --------------------- | ------------------- |\n| **`statusBarHeight`** | \u003ccode\u003enumber\u003c/code\u003e |\n\n\n#### PluginListenerHandle\n\n| Prop         | Type                                      |\n| ------------ | ----------------------------------------- |\n| **`remove`** | \u003ccode\u003e() =\u0026gt; Promise\u0026lt;void\u0026gt;\u003c/code\u003e |\n\n\u003c/docgen-api\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlwaysLoveme%2Fcapacitor-plugin-safe-area","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlwaysLoveme%2Fcapacitor-plugin-safe-area","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlwaysLoveme%2Fcapacitor-plugin-safe-area/lists"}