Navigation bar overlapping issue and statusbar issue in ionic angular

Capacitor
1

I am working on ionic angular project where in beginning the navigation bar was not overlapping the UI and for making statusbar transparent i used

StatusBar.setOverlaysWebView({ overlay: true });  StatusBar.setStyle({ style: Style.Light });

then status bar and navigation both was working fine as i wanted
then i added screen orientation service for portrait and landscape from then the navigation bar is overlapping the UI and the only way i can fix it till now i have to make " web view overlay : false "
then the statusbar is not transparent
it is kinda trade off between navigation bar and status bar

Help me !

1 Like
2

This kinda sounds like Android’s Edge-to-edge change/issue - Edge to edge Android. Capawesome created a plugin mentioned there and Capacitor 7.1.0 was just released with a fix - Release 7.1.0 · ionic-team/capacitor · GitHub.

1 Like
3

Thanks for your reply @twestrick we are working on ionic v7.2.0 and capacitor v6.2.0 will it work?

4

Edge-to-edge only affects your app when using Capacitor 7 which targets Android SDK 35 - source.

5

Thankyou sir for giving attention to this post

6

I did see some people saying the fixes in Capacitor 7.1.0 weren’t helping or caused more issues. You could try the plugin Capawesome made as a temporary fix - Capacitor Android Edge-to-Edge Support Plugin - Capawesome.

Our app is still on Capacitor 6 waiting for all the kinks to get worked out with 7 :smile:

2 Likes
7

Hi,
we are also using capacitor 7 and we are also facing same issue of our UI overlapping with navigation bar.
So as you said earlier we have installed “@capawesome/capacitor-android-edge-to-edge-support”: “^7.1.0”,.
and then

  private async initializeApp() {
    this.platform.ready().then(async () => {
      if (Capacitor.isNativePlatform()) {
      StatusBar.setOverlaysWebView({ overlay: true });
      //Throwing error should use only color in hex
      // StatusBar.setBackgroundColor({ color: 'transparent' });
      // Using the proper enum value Style.Light
      await EdgeToEdge.setBackgroundColor({ color: '#000000' });
      StatusBar.setStyle({ style: Style.Light });
      }
      this.setupDeepLinks();
    });
  }

IMG_20250326_155859
IMG_20250326_1558591080Ă—2400 81.9 KB

now the problem is we are not able to make the status bar transparent and extend our app behind status bar.
Any help would be appreciated.
Thank you in advance.