Paywall UI Shows White Bands Outside SafeArea Despite Black Background Setting

[rignaneseleo]

Description:

When invoking the paywall with the following call:

await RevenueCatUI.presentPaywallIfNeeded("premium");

the UI displays unintended white bands at the top and bottom of the screen:

Expected Behavior:

The paywall background should fully respect the black background configured in the paywall settings, extending beyond the SafeArea. Currently, it appears that the background is only applied within the SafeArea, which leads to visible white padding on devices with insets (e.g. iPhones with notches).

Feature Request:

In addition to a fix for the current issue, it would be ideal to have an option to disable the SafeArea entirely when presenting the paywall. This would allow developers to handle layout and inset padding manually, especially in apps with custom full-screen UI needs.

Suggested Implementation:

For example, the layout could be structured like this, with the SafeArea nested inside a decorated container:

Container(
  decoration: BoxDecoration(
    color: Colors.black, // or other background customization
  ),
  child: SafeArea(
    child: PaywallView(),
  ),
);

And ideally, also allow for:

// Opting out of SafeArea completely
Container(
  decoration: BoxDecoration(
    color: Colors.black,
  ),
  child: PaywallView(),
);

Environment:

• RevenueCat SDK version: 8.8.0
• Platform: Flutter 3.29.3

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[cperriam-rc]

Thanks for the request @rignaneseleo! To make sure we understand this correctly, can you please confirm whether the following is correct:

• Your request only relates to RevenueCatUI.presentPaywallIfNeeded and RevenueCatUI.presentPaywall
• You can already achieve the desired behaviour manually by using PaywallView() to display the paywall in a custom manner (with specific safe area handling and background colors)
• You would like a new option to be implemented for convenience on RevenueCatUI.presentPaywallIfNeeded and RevenueCatUI.presentPaywall which makes the paywall disregard the device's safe area (and relies on the developer to handle this accordingly)

Happy to be corrected on any of this. Thanks again!

[rignaneseleo]

Yes that's correct! Let me enable/disable the SafeArea.

[cperriam-rc]

Thanks @rignaneseleo, I've provided this feedback to the RevenueCat Paywalls team. But given that PaywallView exists and is suitable/intended for enabling extra customization like this, it's reasonably unlikely to be a priority in the short term.

[rignaneseleo]

I understand, however this means that presentPaywallIfNeeded can't be used unless the paywall background is completely white. Take that into consideration. Also, I don't think that code-wise this is a huge change: somewhere in the code the SafeArea is used; that just need to be disabled on request.

[mawr92]

Hey @rignaneseleo,

I'm very sorry about the delay on this reply. We've been auditing our ticketing system and found that your ticket was never resolved. Are any of you still running into this issue on the latest version of the SDK? If so we can resume looking into this.