Skip to content
DeveloperMemos
Contact

Presenting Fullscreen Modals in UIKit

— UIKit, Modal View Controllers, iOS — 1 min read

Fullscreen modals are a common UI element in iOS apps. They temporarily take over the entire screen, requiring the user to interact with them before returning to the underlying view. This article explores two methods for presenting fullscreen modals in UIKit:

Setting modalPresentationStyle to .fullScreen

This is the simplest approach for achieving a fullscreen modal. Here's how it works:

  • In code: You can set the modalPresentationStyle property of the modal view controller to .fullScreen before presenting it.
1let modalViewController = MyModalViewController()
2modalViewController.modalPresentationStyle = .fullScreen
3present(modalViewController, animated: true, completion: nil)
  • In Storyboard: If you're using a segue to transition to the modal view controller, you can configure the presentation style directly in the storyboard. Select the segue and locate the "Presentation" section in the Attributes Inspector. Set the "Style" property to "Full Screen".

Remember: Even with this setting, ensure your modal view controller's view itself expands to fill the entire screen. You can achieve this by setting its frame to the screen bounds in viewDidLoad or using Auto Layout constraints.

Using a Navigation Controller (Important for iOS 13 and above)

In iOS 13 and later, the default presentation style for modals is .automatic. This might not always result in a fullscreen experience, especially when using a navigation controller. Here's how to ensure a fullscreen modal even with navigation:

1let modalViewController = MyModalViewController()
2let navigationController = UINavigationController(rootViewController: modalViewController)
3navigationController.modalPresentationStyle = .fullScreen
4present(navigationController, animated: true, completion: nil)

By wrapping the modal view controller in a navigation controller and setting the modalPresentationStyle of the navigation controller to .fullScreen, you guarantee a fullscreen presentation on all supported iOS versions.

Some Additional Considerations:

  • Apply Apple's Human Interface Guidelines [https://developer.apple.com/design/human-interface-guidelines/modality] to determine when fullscreen modals are the most appropriate UI choice for your app's functionality.
  • Ensure proper visual design for your modal view controller to take advantage of the fullscreen presentation style.