Bug:Capacitor 7 Android IonHeader Positioned at Top Without Padding or Margin, Overlapping Status Bar

[hetdhameliya]

Capacitor Version

Latest Dependencies:

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

Installed Dependencies:

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

Other API Details

npm --version
10.9.0

node --version
v20.14.0

@ionic/react : "^8.0.0"

Platforms Affected

• iOS
• Android
• Web

Current Behavior

I am using IonHeader in my ReactJS project with Capacitor 7, and I run the Android application. However, I am facing an issue with the header—it is not displaying properly. The header is positioned at the very top of the screen, with no space above it. It seems like the content is overlapping, or there’s no padding/margin at the top. This issue works fine when using Capacitor 6, but it seems to have started occurring after upgrading to Capacitor 7.

Expected Behavior

The IonHeader should display correctly with proper spacing at the top of the screen, without overlapping or being pushed up against the edge. There should be enough space above the header, following the safe area guidelines, especially when using Capacitor 7.

Project Reproduction

https://github.com/hetdhameliya/Doki-App

Additional Information

No response

[gambarotto]

I'm having the same problem, but with react without ionic

[stephent92]

This is due to Android 15 using edge-to-edge display by default--you can opt out of this using the windowOptOutEdgeToEdgeEnforcement flag in your app theme

https://developer.android.com/develop/ui/views/layout/edge-to-edge

https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement

[AvniAnay]

I am having the same issue , some times footer is also overlapping

[Stanislavsonder]

The same issue after updating 6.0.X -> 7.0.0.

@stephent92 looks like a workaround, but I'm getting
Android resource linking failed com.<app-name>-mergeDebugResources-24:/values/values.xml:344: error: style attribute 'android:attr/windowOptOutEdgeToEdgeEnforcement' not found. error: failed linking references.

So, I'll just roll down and wait for a fix.

[Stanislavsonder]

UPD: In my case, the issue appears only if @capacitor/status-bar is 7.0.0.
here is the full list of capacitor's packages (working fine until status-bar is <7:

"@capacitor/android": "^7.0.1",
"@capacitor/app": "^7.0.0",
"@capacitor/core": "^7.0.1",
"@capacitor/dialog": "^7.0.0",
"@capacitor/filesystem": "^7.0.0",
"@capacitor/haptics": "^7.0.0",
"@capacitor/ios": "^7.0.1",
"@capacitor/keyboard": "^7.0.0",
"@capacitor/motion": "^7.0.0",
"@capacitor/share": "^7.0.0",
"@capacitor/status-bar": "^6.0.2",

pnpm version is 9.15.5