@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

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 setBackgroundColor = async () => {
  await EdgeToEdge.setBackgroundColor({ color: '#ffffff' });
  await StatusBar.setStyle({ style: Style.Light });
};

API

• setBackgroundColor(...)
• Interfaces

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

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.