'Add dismiss button to Bottom Sheet

In Apple's documentation on Sheet Views, they demonstrate how to instantiate a view controller that displays a Bottom Sheet with a "close" button on the right-hand side. Consider the photo below:

enter image description here

I am having a hard time replicating this. When I present the Sheet View in a NavigationController, and explicitly add a close button, I can see the close button but the sheet becomes a .large() detent. Their photo suggests they are achieving this with a .medium() detent. Documentation for UISheetPresentationController shows no other alternative. Any idea what I am doing wrong?

My SheetController:

override func viewDidLoad() {
    ....
    navigationItem.rightBarButtonItem = UIBarButtonItem.init(barButtonSystemItem: .done, target: self, action: #selector(closeSheet))
    ....
}

In a different controller, a button click initiates the presentation of the sheetController:

@objc func showTheSheet() {
    let updateController = MySheetController()
    if let sheet = updateController.sheetPresentationController {
        sheet.detents = [.medium()]
        sheet.largestUndimmedDetentIdentifier = nil
        sheet.prefersGrabberVisible = true
        sheet.prefersScrollingExpandsWhenScrolledToEdge = true
        sheet.prefersEdgeAttachedInCompactHeight = true
        sheet.widthFollowsPreferredContentSizeWhenEdgeAttached = true
    }
    let navController = UINavigationController(rootViewController: updateController)
    self.present(navController, animated: true, completion: nil)
}


Solution 1:[1]

Ah, the answer is to wrap the nav controller into the sheet. Silly mistake, but might help someone.

@objc func updateAction() {
    let updateController = MySheetController()
    let navController = UINavigationController(rootViewController: updateController)
    if let sheet = navController.sheetPresentationController {
        sheet.detents = [.medium()]
        sheet.largestUndimmedDetentIdentifier = nil
        sheet.prefersGrabberVisible = true
        sheet.prefersScrollingExpandsWhenScrolledToEdge = true
        sheet.prefersEdgeAttachedInCompactHeight = true
        sheet.widthFollowsPreferredContentSizeWhenEdgeAttached = true
    }
    self.present(navController, animated: true, completion: nil)
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 angryip