ios – Looking for Help with Implementing a Compact Drawer UI in SwiftUI

I apologize if my query lacks readability or adequate particulars final time. I am trying to copy a particular consumer interface as proven within the connected photos, the place a small drawer emerges from the underside. We have efficiently applied this in UIKit, however are encountering challenges in SwiftUI. Our present strategy entails utilizing .sheet with medium and huge detents, however we have not discovered a approach to create a smaller detent just like the one in our design.

We additionally explored utilizing UIViewControllerRepresentable to combine the UIKit view into SwiftUI, however this strategy has not been profitable. Particularly, we’re going through a difficulty with a view named “Presentation Internet hosting Controller” that constantly shows a white display screen. The one workaround we have discovered is to make use of fullScreenCover, which does not align with our design targets.

Replace

I add SwiftUI code of how had been changing that UIKit view to a SwiftUI View and what the UIKit view code. Additionally I added photos of whats going one.

Might somebody present steering on one of the best ways to realize this small drawer impact in SwiftUI? Your experience and options can be vastly appreciated. In the event you want extra particulars please let me know.

Sheet

After I convert it and present the view in a sheet this what it seem like and it View Hierarch

The way it seems to be with sheet

View Hierarch

fullScreenCover

This the way it seems to be with fullScreenCover, the issue with that is that black display screen that behind which supppose to A make the again UI untouchable and B look alittle litter. What occurring is that its sliding up into the view with the small sheet and as quickly you contact anymore on the view it’ll dismis.

Sorry for the markups however this what’s seem like with fullScreenCover

This the Hierarch of the fullScreenCover

UIkit View – How suppose to look

This the Drawer I am speaking about that has been accomplished in UIKit

You see within the UIkit when the place calling Motion sheet its not being black or sandwich with so many view in between

import SwiftUI

struct EngagementPaymentView: View {
    @Surroundings(.presentationMode) var presentationMode: Binding<PresentationMode>
    @ObservedObject var viewModel: EngagementViewModel
    var closeWithoutSavingAction: () -> Void
    @SwiftUI.State var isActionSheetSelected: Bool = false
    
    var physique: some View {
        NavigationView {
            ZStack {
                VStack {
                    ScrollView {
                        VStack(alignment: .main, spacing: 32) {
                            VStack(alignment: .main, spacing: 16) {
                                
                                PaymentMethodsView(viewModel: viewModel)
                            }
                            .padding(0)
                            .body(maxWidth: .infinity, alignment: .topLeading)
                        }
                        .padding(16)
                        .body(maxWidth: .infinity, alignment: .topLeading)
                        .background(.white)
                    }
                    .safeAreaInset(edge: .backside, spacing: 0) {
                        Spacer()
                            .body(top: 150)
                    }
                    .background(Shade(Shade.graySmoke.colour))
                    
                    HStack(alignment: .heart, spacing: 16) {
                        HStack(alignment: .heart, spacing: 8) {
                            Button {
                                self.presentationMode.wrappedValue.dismiss()
                            } label: {
                                EngagementButton(buttonTitle: "Again", textColor: Shade.blackPearl.colour, buttonColor: Shade.white.colour, showOverlay: true, isLoading: .fixed(false))
                            }
                            NavigationLink {
                                    EngagementEsignView(viewModel: viewModel, closeWithoutSavingAction: closeWithoutSavingAction)
                            } label: {
                                EngagementButton(buttonTitle: "Subsequent", textColor: Shade.white.colour, buttonColor: Shade.main.colour, isDisabled: true, showOverlay: false, isLoading: .fixed(false))
                            }
                        }
                        .padding(16)
                        .body(width: 360, alignment: .main)
                        .background(Shade(Shade.white.colour))
                    }
                }
            }.sheet(isPresented: $isActionSheetSelected) {
                    ActionSheetSwiftUIView(actions: [ActionItem(buttonStyle: .button(style: .primary, title: "ABC"))])
                    .ignoresSafeArea()
                    .background(TransparentBackground())
                    .body(maxHeight: .infinity)
            }
        }
        .navigationBarHidden(true)
        .onAppear {
            DispatchQueue.essential.asyncAfter(deadline: .now() + 2, execute: {
                isActionSheetSelected = true
            })
        }
    }
}


struct ActionSheetSwiftUIView: UIViewControllerRepresentable {
    typealias UIViewControllerType = ActionSheetController
    var actions = [ActionItem]()
    
    func makeUIViewController(context: Context) -> ActionSheetController {
        let vc = ActionSheetController()
//        vc.view.backgroundColor = .clear
//        vc.sheetView.backgroundView.backgroundColor = .clear
//        vc.sheetView.backgroundColor = .clear
//        vc.view.backgroundColor = .clear
        for motion in actions {
            vc.addAction(motion)
            vc.addSeparatorView()
        }
        return vc
    }
    
    func updateUIViewController(_ uiViewController: ActionSheetController, context: Context) {
        
    }
}
struct TransparentBackground: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.essential.async {
            view.superview?.superview?.backgroundColor = .clear
            view.superview?.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIView, context: Context) {}
}

import UIKit

class ActionSheetView: UIView {
    let backgroundView = UIView()

    let cardView = UIView()

    let scrollView = UIScrollView()
    let stackView = UIStackView()

    override init(body: CGRect) {
        tremendous.init(body: body)

        setupSubviews()
    }

    required init?(coder aDecoder: NSCoder) {
        tremendous.init(coder: aDecoder)

        setupSubviews()
    }

    override func layoutSubviews() {
        // Replace the peak anchor to offset for the underside safeareainset.
        cardView.snp.updateConstraints { (make) in
            make.top.equalTo(stackView.snp.top).offset(safeAreaInsets.backside).precedence(.low)
        }

        tremendous.layoutSubviews()
    }
}


extension ActionSheetView: View {
    func configureSubviews() {
        accessibilityIdentifier = "ActionSheetView"

        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
        backgroundView.accessibilityIdentifier = "ActionSheetBackground"
        addSubview(backgroundView)

        cardView.translatesAutoresizingMaskIntoConstraints = false
        cardView.backgroundColor = Shade.grayAsh.colour
        addSubview(cardView)

        scrollView.translatesAutoresizingMaskIntoConstraints = false
        cardView.addSubview(scrollView)

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fill
        stackView.spacing = 0
        stackView.layoutMargins = UIEdgeInsets(high: UIConstants.edgeInset, left: 0, backside: UIConstants.edgeInset, proper: 0)
        stackView.isLayoutMarginsRelativeArrangement = true
        scrollView.addSubview(stackView)
    }

    func configureConstraints() {
        backgroundView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
        }

        cardView.snp.makeConstraints { (make) in
            make.main.equalToSuperview()
            make.trailing.equalToSuperview()
            make.backside.equalToSuperview().offset(0)
            make.top.equalTo(stackView.snp.top).offset(safeAreaInsets.backside).precedence(.low)
            // Use the superview top with a multiplier right here to keep away from a crash when the cardboard view almost fills the peak allotted, simply earlier than changing into a scrollable view
            make.top.lessThanOrEqualToSuperview().multipliedBy(0.8).precedence(.excessive)
        }

        scrollView.snp.makeConstraints { (make) in
            make.high.equalToSuperview()
            make.main.equalToSuperview()
            make.trailing.equalToSuperview()
            make.backside.equalToSuperview()
        }

        stackView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
            make.width.equalToSuperview()
        }
    }
}