@capawesome/capacitor-android-edge-to-edge-support

Capacitor plugin to support edge-to-edge display on Android.

Before	After	Before	After

Installation

npm install @capawesome/capacitor-android-edge-to-edge-support
npx cap sync

Android

If you are using the Capacitor Keyboard plugin, make sure to set the resizeOnFullScreen property to false (default) in your Capacitor Configuration file:

{
  "plugins": {
    "Keyboard": {
      "resizeOnFullScreen": false
    }
  }
}

Otherwise, the web view will be resized to fit the screen, which may cause issues with this plugin, see this comment.

Configuration

Prop	Type	Description	Since
`backgroundColor`	`string`	The hexadecimal color to set as the background color of the status bar and navigation bar.	7.1.0

Examples

In capacitor.config.json:

{
  "plugins": {
    "EdgeToEdge": {
      "backgroundColor": "#ffffff"
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capawesome/capacitor-android-edge-to-edge-support" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    EdgeToEdge: {
      backgroundColor: "#ffffff",
    },
  },
};

export default config;

Usage

The plugin only needs to be installed. It applies insets to the web view to support edge-to-edge display on Android. The plugin also provides a method to set the background color of the status bar and navigation bar. It's recommended to use this method in combination with the Status Bar plugin.

import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
import { StatusBar, Style } from '@capacitor/status-bar';

const enable = async () => {
  await EdgeToEdge.enable();
};

const disable = async () => {
  await EdgeToEdge.disable();
};

const getInsets = async () => {
  const result = await EdgeToEdge.getInsets();
  console.log('Insets:', result);
};

const setBackgroundColor = async () => {
  await EdgeToEdge.setBackgroundColor({ color: '#ffffff' });
  await StatusBar.setStyle({ style: Style.Light });
};

enable()

enable() => Promise<void>

Enable the edge-to-edge mode.

Only available on Android.

Since: 7.2.0

disable()

disable() => Promise<void>

Disable the edge-to-edge mode.

Only available on Android.

Since: 7.2.0

getInsets()

getInsets() => Promise<GetInsetsResult>

Return the insets that are currently applied to the webview.

Only available on Android.

Returns: Promise<GetInsetsResult>

Since: 7.2.0

setBackgroundColor(...)

setBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>

Set the background color of the status bar and navigation bar.

Only available on Android.

Param	Type
`options`	`SetBackgroundColorOptions`

Since: 7.0.0

Interfaces

GetInsetsResult

Prop	Type	Description	Since
`bottom`	`number`	The bottom inset that was applied to the webview. Only available on Android.	7.2.0
`left`	`number`	The left inset that was applied to the webview. Only available on Android.	7.2.0
`right`	`number`	The right inset that was applied to the webview. Only available on Android.	7.2.0
`top`	`number`	The top inset that was applied to the webview. Only available on Android.	7.2.0

SetBackgroundColorOptions

Prop	Type	Description	Since
`color`	`string`	The hexadecimal color to set as the background color of the status bar and navigation bar.	7.0.0

Changelog

See CHANGELOG.md.

License

See LICENSE.