@markieboy1991/cordova-plugin-inset-injector
v2.0.0
Published
A Cordova plugin that will inject css variables that correspond with the hardware level insets. This is to get around the limitations of lower versions of the android webview that do not correctly inject the safe-area-inset values
Downloads
160
Maintainers
Readme
cordova-plugin-inset-injector
On several versions of the Android WebView there are issues with the built in env(safe-area-inset-*) values where they are reported incorrectly. This plugin remedies this issue by injecting the correct values into css variables named --safe-area-inset-*, where * can be top, bottom, left, and right.
⚠️ Platform Support: This plugin only works on Android and is designed to gracefully handle other platforms without breaking builds.
Installation
npx cordova plugin add cordova-plugin-inset-injectorSupported Platforms
- Android: Full functionality
- iOS: Plugin is available but does nothing (safe fallback)
- Other platforms: Plugin is available but does nothing (safe fallback)
Usage
No additional setup required! The plugin automatically initializes on Android devices and starts injecting CSS variables. On other platforms, it safely does nothing.
Simply install the plugin and use the CSS variables in your styles:
.my-content {
padding-top: var(--safe-area-inset-top, 0px);
padding-bottom: var(--safe-area-inset-bottom, 0px);
padding-left: var(--safe-area-inset-left, 0px);
padding-right: var(--safe-area-inset-right, 0px);
}Platform-Specific Behavior
Android
- Plugin actively monitors system UI changes
- Injects CSS variables:
--safe-area-inset-top,--safe-area-inset-bottom,--safe-area-inset-left,--safe-area-inset-right - Handles edge-to-edge UI scenarios
iOS and Other Platforms
- Plugin loads without errors
- All methods return safely without attempting native calls
- Does not interfere with existing iOS safe area handling
- Allows cross-platform apps to include this plugin without platform-specific conditional installation
