React+Capacitor w/ ionic UI

[POORSAKEN2]

Hello! I have a problem here.. the header is not respecting my safe area view..

as you can see in the image below it is hitting my status bar.. how to prevent it?

I tried to ask for help with chat gpt a solution work but the height of header in my real device is too high.

[twestrick]

That looks like Android’s Edge-to-Edge “feature”. The best bet right now is to use Capawesome’s plugin - Android Edge-to-Edge Support Plugin for Capacitor - Capawesome.

There is lots of discussion here and on the Ionic and Capacitor Git repos about this.