Edge to edge after updating to Capacitor 8.4.2 not working

[valentinbld45]

After updating my application from Capacitor 7 to Capacitor 8.4.2 I'm having edge to edge issues.

On Capacitor 7 I was using @capawesome/capacitor-android-edge-to-edge-support@^7 + @capacitor/status-bar@^7. Inside capacitor.config.json there was this configuration :

"Keyboard": {
  "resize": "body",
  "resizeOnFullScreen": false
},
"EdgeToEdge": {
    "backgroundColor": "#000000"
}

And then inside the app.component.ts :

if (this.platform.is('android')) {
  StatusBar.setOverlaysWebView({ overlay: false });
  StatusBar.setStyle({ style: Style.Dark });
}

Everything's worked even on old Android versions or newer.

But now with Capacitor 8 the application cannot be sent in production because of older Android version (Android 12 in my case). After deep research, trying different methods and plugins without success. Also by reading other discussions, there's no real answer / feedback nor same situation as mine.

I ended up by keeping Capacitor 8 but remove all safe-area or edge-to-edge plugin to get a clean install and rely on SystemBars and use what's included in Capacitor. Here's my configuration :

// package.json

"@capacitor-community/screen-brightness": "^8.0.0",
"@capacitor-mlkit/barcode-scanning": "^8.1.0",
"@capacitor/android": "^8.0.0",
"@capacitor/app": "^8.0.0",
"@capacitor/core": "^8.0.0",
"@capacitor/device": "^8.0.0",
"@capacitor/filesystem": "^8.0.0",
"@capacitor/geolocation": "^8.0.0",
"@capacitor/haptics": "^8.0.0",
"@capacitor/ios": "^8.0.0",
"@capacitor/keyboard": "^8.0.0",
"@capacitor/network": "^8.0.0",
"@capacitor/preferences": "^8.0.0",
"@capacitor/push-notifications": "^8.0.0",
"@capacitor/share": "^8.0.0",
"@capacitor/splash-screen": "^8.0.0",
"@capawesome-team/capacitor-datetime-picker": "^8.1.1",
"@capawesome/capacitor-badge": "^8.0.2",
"@capawesome/capacitor-torch": "^8.0.1",
"@ionic/angular": "8.4.3",
"@ionic/core": "8.4.3",

// capacitor.config.json

"Keyboard": {
  "resize": "body",
  "resizeOnFullScreen": false
},
"SystemBars": {
  "insetsHandling": "css" // css or disable have the same effect
}

// app.component.ts

await SystemBars.setStyle({
  bar: SystemBarType.StatusBar,
  style: SystemBarsStyle.Light,
});

And here's the result :

• Launching the app with ionic capacitor run android --target=xyz = no edge to edge issue
• Cold start = issue (on Android 12 Samsung)

No problem on Android 14 Samsung.

Any guide to make it works on older versions in my case ? Thank you!

[robingenz]

The Capawesome Edge-to-edge plugin should no longer be needed. We recently published a blog post on this. The Capacitor team did a great job with Capacitor 8.

[valentinbld45]

Yes, like I said, I removed the edge-to-edge plugin to use only what's included in Capacitor 8. I already read your blog post and verify if my app fit the recommended setup. Without success.

[robingenz]

Sorry, I only skimmed your text and missed that.

[valentinbld45]

I run a clean Angular + Ionic + Capacitor project (from ionic start) and no problems on older devies.
So in my main project I copy the package version from the clean project and paste them on my main project :

"@capacitor-community/screen-brightness": "8.0.0",
"@capacitor-mlkit/barcode-scanning": "8.1.0",
"@capacitor/android": "8.4.2",
"@capacitor/app": "8.1.1",
"@capacitor/core": "8.4.2",
"@capacitor/device": "8.0.3",
"@capacitor/filesystem": "8.1.2",
"@capacitor/geolocation": "8.2.0",
"@capacitor/haptics": "8.0.2",
"@capacitor/ios": "8.4.2",
"@capacitor/keyboard": "8.0.5",
"@capacitor/network": "8.0.1",
"@capacitor/preferences": "8.0.1",
"@capacitor/push-notifications": "8.1.2",
"@capacitor/share": "8.0.1",
"@capacitor/splash-screen": "8.0.2",
"@capacitor/status-bar": "8.0.3",
"@capawesome-team/capacitor-datetime-picker": "8.1.1",
"@capawesome/capacitor-badge": "8.0.2",
"@capawesome/capacitor-torch": "8.0.1",
"@ionic/angular": "8.4.3",
"@ionic/core": "8.4.3",

Only kept this in capacitor.config

"Keyboard": {
  "resizeOnFullScreen": false
},

And remove the use of SystemBars in app.component.ts.

Run a npx cap sync and the problem disappear. I don't know what happen when using package@^8.0.0 since I don't have time to search for each packages.