bug(android-edge-to-edge-support): Navigation bar color cannot be changed on API level 31 if @capacitor/keyboard>=8.0.2 is used

[RagingCactus]

Plugin(s)

• Accelerometer
• Age Signals
• Android Battery Optimization
• Android Dark Mode Support
• Android Edge-to-Edge Support
• Android Foreground Service
• App Review
• App Shortcuts
• App Update
• Apple Sign-In
• Asset Manager
• Audio Player
• Audio Recorder
• Background Task
• Badge
• Barometer
• Biometrics
• Bluetooth Low Energy
• Cloudinary
• Contacts
• Datetime Picker
• File Compressor
• File Opener
• File Picker
• Geocoder
• Google Sign-In
• libSQL
• Live Update
• Managed Configurations
• Media Session
• NFC
• OAuth
• Pedometer
• Photo Editor
• PixLive
• Posthog
• Purchases
• Printer
• RealtimeKit
• Secure Preferences
• Screen Orientation
• Screenshot
• Speech Recognition
• Speech Synthesis
• Share Target
• Square Mobile Payments
• SQLite
• Superwall
• Torch
• Zip

Version

8.0.8

Platform(s)

• Android
• iOS
• Web

Current behavior

On API level 31 (and other levels, I have not done comprehensive tests) the background color of the navigation bar cannot be changed if @capacitor/keyboard>=8.0.2 is used. It works correctly with @capacitor/keyboard@8.0.1.

Expected behavior

Setting the background color of the navigation bar works with @capacitor/keyboard>=8.0.2.

Reproduction

https://github.com/capawesome-team/capacitor-plugins/

Steps to reproduce

I used the example in the plugin repo itself to reproduce the issue, I hope that's sufficient.

Preparation:
Remember to use an API level 31 device!

git clone https://github.com/capawesome-team/capacitor-plugins
cd capacitor-plugins/packages/android-edge-to-edge-support/example/

git rev-parse HEAD
# 470c4a871b0a4c1f95bc71ad3185e486f51e9608

Working state with @capacitor/keyboard@8.0.1

npm i "@capawesome/capacitor-android-edge-to-edge-support@8.0.8" "@capacitor/keyboard@8.0.1"
npm run build
npm exec capacitor sync
npm exec capacitor open android
# Build and run app on API level 31
# Clicking "Set navigation bar color" turns navigation bar blue

Broken state with @capacitor/keyboard@8.0.2

npm i "@capacitor/keyboard@8.0.2"
npm exec capacitor sync
# Build and run app on API level 31
# Clicking "Set navigation bar color" turns a box ABOVE the navigation bar blue

Different broken state with @capacitor/keyboard@8.0.3

npm i "@capacitor/keyboard@8.0.3"
npm exec capacitor sync
# Build and run app on API level 31
# Clicking "Set navigation bar color" does nothing

Other information

No response

Capacitor doctor

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 8.3.1
  @capacitor/core: 8.3.1
  @capacitor/android: 8.3.1
  @capacitor/ios: 8.3.1

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 8.3.0
  @capacitor/core: 8.3.0
  @capacitor/android: 8.3.0

[success] Android looking great! 👌

Before submitting

• I have read and followed the bug report guidelines.
• I have attached links to possibly related issues and discussions.
• I understand that incomplete issues (e.g. without reproduction) are closed.

[robingenz]

Thank you for reporting that. We currently have a lot of items in our backlog but I managed to create this PR with a potential fix: #839. Could you give it a try and let me know if it resolves your issue?

npm i https://pkg.pr.new/capawesome-team/capacitor-plugins/@capawesome/capacitor-android-edge-to-edge-support@839

[RagingCactus]

I don't have a lot of time to do comprehensive tests today, but I can confirm that the #839 version works on API level 31 with the example app and my actual app use case. However, it does not work on API level 36 with my actual app (and the example app does not seem to be viable for testing there, see below)

To make sure my actual use case (see graphefruit/Beanconqueror#1120) also works, I also tried the example app on API level 36. There the plugin doesn't do anything:

However, it seems like the example app doesn't allow changing the bar colors even on older version. So I tried it with the real app Beanconqueror. There I can confirm that API level 31 works:

Sadly, on API level 36 it does not work properly. Notice that the navigation bar does not have the same background color as to the sides of the menu, but instead has the default dark theme background color, possibly applied by the capacitor SystemBars plugin:

I can attempt setting up a minimal example, possibly next weekend, but I wanted to give you this early feedback anyway.