Navigation bar overlapping issue and statusbar issue in ionic angular

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

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

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

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

Thankyou sir for giving attention to this post

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:

1 Like

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

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.