UI discrepancy between UIKit and SwiftUI

[joshgare]

trafficstars

What area is the issue related to?

Checkout Sheet Kit

What version of Checkout Sheet Kit are you using?

2.0.1

Do you have a minimum reproducible example?

No response

Steps to Reproduce

• Display sheet via Swift UI
• Display sheet via UIKit
• Compare navigation bars

Expected Behavior

Navigation bar on UIKit sheet to filled in on presentation, not just when the checkout scrolls down.

Actual Behavior

UIKit sheet displays a clear navigation bar on presentation which looks off. When you scroll down the on the UIKit sheet the navigation bar fills in. This feels a buggy and looks off which is not desired in a checkout flow.

Screenshots/Videos/Log output

1. Swift UI on present (looks good)

2. UIKit on present (looks off)

Storefront domain

No response

[markmur]

Hey @joshgare, can you share some of the code you're using to trigger the sheet with UIKit?

Have you checked our sample applications for reference?

[joshgare]

Hi @markmur

Structure is as follows UIViewController that is modally presented -> button tapped -> present method called and checkout sheet is presented over the top of the previous modal.

ShopifyCheckoutSheetKit.present(checkout: url, from: self, delegate: self)

[markmur]

Thanks @joshgare. I'm updating our sample app in this PR to include an example of this flow. Would you say that the code here is similar to what you're doing?

The background color of the checkout sheet should be set to .systemBackground by default. Are you overriding the configuration at all?

You can explicitly set this in your application:

ShopifyCheckoutSheetKit.configure {
    $0.backgroundColor = .white
}

https://github.com/Shopify/checkout-sheet-kit-swift/assets/2034704/420824f2-225b-4b40-9915-e5b29e6a2307

[joshgare]

@markmur just coming back to this - we updated the SDK to 3.0.1 and added the following.

ShopifyCheckoutSheetKit.configure {
    $0.backgroundColor = .white
}

However we're still seeing the UI issue when presenting the modal via UIKit.

https://github.com/Shopify/checkout-sheet-kit-swift/assets/113687/cf81dc8b-3d7d-48b0-a8db-8ae8ed669895

[markmur]

Hey @joshgare,

Can you share some code to show how you're implementing this?

Are you setting any colors globally that might be causing this?

[joshgare]

@markmur the code we're using is very simple we set the global properties then present the CSK and retain a reference.

guard let url = webUrl.asUrl else { return }
ShopifyCheckoutSheetKit.configure {
    $0.backgroundColor = .white
    $0.colorScheme = .web
    $0.tintColor = .black
}
checkoutViewController = ShopifyCheckoutSheetKit.present(checkout: url, from: self, delegate: self)

[markmur]

Does explicitly setting a value for backgroundColor on your controller fix the issue?

I'm trying to trying to reproduce in our sample app again, but haven't been able to yet.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs in 30 days. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically closed because it has not had recent activity. Please re-open it if it is still relevant.