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

Capacitor plugin to support edge-to-edge display on Android with advanced features like setting the background color of the status bar and navigation bar.

| 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 });
};

API

• enable()
• disable()
• getInsets()
• setBackgroundColor(...)
• Interfaces

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.