swiftyplace

The A-Z of SwiftUI Presentations and Navigation

Photo of author

Written by: Karin Prater

Published on: May 23, 2023

SwiftUI has revolutionized the way we design user interfaces for Apple platforms, enabling developers to create more dynamic and interactive apps. A vital aspect of this UI design involves SwiftUI presentations and navigation, which are key to delivering a seamless user experience. This blog post, “The A-Z of SwiftUI Presentations and Navigation”, provides an in-depth exploration of various presentations such as sheets, popovers, popup menus, alerts, action sheets, confirmation dialogs, and navigation tools like NavigationView and Navigation Stack. Whether you’re an experienced developer or a beginner, this guide offers insightful tips, best practices, and a comprehensive understanding of SwiftUI presentations and navigation. Let’s delve into the world of SwiftUI and elevate your UI design skills.

Navigating with NavigationView and Navigation Stack in SwiftUI

Navigation is an essential aspect of app design, providing users with a clear path through your app’s content. SwiftUI provides tools like NavigationView and, more recently, Navigation Stack for iOS 16, which offers additional flexibility and reliability.

  • NavigationView: As explored in this detailed guide , NavigationView in SwiftUI is a crucial component that manages the presentation of views on a navigation interface. It offers a convenient way to present hierarchical information, where each new screen is presented on top of the stack.
  • Navigation Stack: Introduced in iOS 16, Navigation Stack has brought significant improvements to SwiftUI navigation. Detailed in this post , Navigation Stack provides a more flexible and reliable way to manage views in your app. A key feature of Navigation Stack is its support for programmatic navigation, allowing you to trigger navigation actions based on specific logic or user interactions.

SwiftUI NavigationStack example

By understanding these navigation tools and mastering their implementation, you can provide users with intuitive and efficient navigation through your SwiftUI application.

Understanding SwiftUI Sheets

A SwiftUI sheet, as detailed in this blog post , is a type of UI component that can present content modally. It is integral for providing users with additional information or functionalities without leaving the current screen.

There are primarily three types of sheet presentations in SwiftUI: Modal, Bottom, and Full screen.

  • Modal Sheets: Modal Sheets occupy a portion of the screen, allowing the underlying view to remain partially visible. This presentation style is useful when you want to retain context for the user.
  • Bottom Sheets: As the name suggests, these sheets slide up from the bottom of the screen, covering only part of the view. They’re optimal for presenting secondary content or actions related to the current screen.
  • Full Screen Sheets: Full Screen Sheets take up the entire screen. You might use this presentation style when you want to focus the user’s attention entirely on the sheet content, such as during a detailed task.

swiftui sheet with presentationDetents of medium, large, height and percentage

Each type of sheet presentation serves a specific purpose, and understanding how to use them effectively is key to creating a smooth and engaging user interface in SwiftUI.

Popovers and Popup Menus in SwiftUI

Popovers and popup menus are another set of SwiftUI presentations that can enhance the interaction in your apps. In this detailed guide , you can find more in-depth information.

  • Popovers: A popover is a transient view that appears above other content onscreen when you tap a control or in an area. It’s an ideal choice when you want to provide additional information or functionality without taking the user out of their current context.
  • Popup Menus: Popup menus, on the other hand, provide a list of options for the user to select from. They’re beneficial when you need to save screen real estate while still offering multiple choices to the user. You can use the dedicated control view Menu which you can read about in this blog post .

swiftui popover examples for presentationCompactAdaptation

Both of these presentations have their use-cases, and implementing them correctly can lead to a more intuitive and user-friendly application. Understanding the right context to use popovers and popup menus is crucial for your SwiftUI app design.

Free SwiftUI Layout Book

Get Hands-on with SwiftUI Layout .

Master SwiftUI layouts with real-world examples and step-by-step guide. Building Complex and Responsive Interfaces.

Mastering Alerts in SwiftUI

Alerts in SwiftUI play a significant role in communicating important messages to the user. This informative post provides comprehensive insights on how to create effective alerts.

  • Basic Alerts: The simplest form of an alert presents an informational message to the user. It typically includes a title, an optional message, and one dismiss button.
  • Alerts with Multiple Buttons: For situations where the user needs to make a choice, SwiftUI alerts can include multiple buttons. Each button can trigger a different action when tapped.
  • Alerts with Text Fields: In some cases, you might want to prompt the user to enter some information directly within the alert. SwiftUI allows you to include text fields in your alerts for this purpose.
  • Error Messages: Alerts are an effective way to present error messages. By presenting an error in an alert, you can inform the user about a problem and potentially provide a solution or workaround.

SwiftUI example for showing an alert when an error occurs

Mastering the use of alerts in SwiftUI can greatly enhance the user experience by providing important information and capturing user input when necessary. It’s vital to use alerts judiciously to ensure they serve their intended purpose effectively.

Action Sheets and Confirmation Dialogs in SwiftUI

SwiftUI also offers Action Sheets and Confirmation Dialogs as interactive ways to engage with the user. You can delve into these presentations in more depth in this thorough guide .

  • Action Sheets: An Action Sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context. Use an Action Sheet when you want to give the user multiple options related to a particular task or decision.
  • Confirmation Dialogs: These dialogs replace action sheets for iOS 15. They consist typically of a message and two buttons, one for confirming the action and one for canceling.

swiftui example for an action sheet and confirmation dialog

Both Action Sheets and Confirmation Dialogs contribute to a more interactive and user-friendly app experience. Understanding how and when to use these effectively is a key component in mastering SwiftUI presentations.

SwiftUI Dismiss View

The ability to dismiss views is a crucial part of SwiftUI presentations, as it provides a way for users to close modal views, popovers, or navigation stacks. Understanding how and when to dismiss views effectively contributes to a smooth and user-friendly experience.

  • Dismissing Sheets and Popovers: In SwiftUI, sheets and popovers can be dismissed by changing the state that triggered their presentation. You control this by manipulating the boolean state property that you used when presenting the sheet or popover.
  • Dismissing Navigation Views: With NavigationView, you can pop to the previous view by using the presentationMode environment property. With the newer Navigation Stack API, you can programmatically control navigation, including dismissing views, providing more flexibility in your app navigation.

Properly dismissing views ensures that your app’s user interface remains clean and that users are not overwhelmed with unnecessary views or information.

In conclusion, mastering SwiftUI presentations and navigation is a crucial skill for anyone developing apps for Apple platforms. This blog post has provided an overview of various SwiftUI presentations, including sheets, popovers, alerts, action sheets, confirmation dialogs, and different navigation tools like NavigationView and Navigation Stack. Furthermore, the importance of correctly dismissing views was emphasized to ensure a smooth user experience.

Understanding and effectively implementing these presentations and navigation methods will greatly enhance the overall usability and user experience of your SwiftUI application. Therefore, it’s recommended to familiarize yourself with these tools and techniques and practice using them in different contexts to fully grasp their utility and flexibility. Continue to explore and learn more about SwiftUI to hone your skills and create more efficient, intuitive, and interactive apps.

Further Reading and Resources

For more detailed insights and examples on the topics covered in this blog post, consider checking out the following resources:

  • SwiftUI Sheet: Modal, Bottom, and full screen presentation in iOS
  • SwiftUI Popovers and Popup Menus: The Ultimate Guide
  • How to Show SwiftUI Alerts with Buttons, Textfields and Error Messages
  • SwiftUI in Action: A Deep Dive into Action Sheets and Confirmation Dialog
  • Exploring Navigation in SwiftUI: A Deep Dive into NavigationView
  • Better Navigation in SwiftUI with Navigation Stack

These articles provide comprehensive guides and examples that delve deeper into the subjects discussed in this blog post. You are encouraged to read these resources to further your understanding and proficiency in SwiftUI presentations and navigation.

Leave a Comment Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Better Navigation in SwiftUI with NavigationStack

Swiftui tabview tutorial: how to customize the tab bar, subscribe to my newsletter.

Want the latest iOS development trends and insights delivered to your inbox? Subscribe to our newsletter now!

© Swiftyplace

Privacy Policy | Terms Of Service

Save 50% on all my course & books

WWDC24 SALE: Save 50% on all my Swift books and bundles! >>

 

How to present a full screen modal view using fullScreenCover()

Paul Hudson    @twostraws    December 1st 2022

Updated for Xcode 16

SwiftUI’s fullScreenCover() modifier gives us a presentation style for times when you want to cover as much of the screen as possible, and in code it works almost identically to regular sheets.

Regular sheets can be dismissed by dragging downwards on them, but that isn’t possible with views presented using fullScreenCover() . As a result, it’s important you provide a way to dismiss the presented view, probably using the dismiss environment key.

Important: fullScreenCover() is not available on macOS.

For example, this defines a simple FullScreenModalView struct that can dismiss itself, then presents it from ContentView when another button is pressed:

Save 50% in my WWDC sale.

SAVE 50% To celebrate WWDC24, all our books and bundles are half price , so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Similar solutions…

  • How to present a new view using sheets
  • How to present multiple sheets
  • Displaying a detail screen with NavigationLink
  • SwiftUI tips and tricks
  • How to use decorative images to reduce screen reader clutter

Swift breaks down barriers between ideas and apps, and I want to break down barriers to learning it. I’m proud to make hundreds of tutorials that are free to access, and I’ll keep doing that whatever happens. But if that’s a mission that resonates with you, please support it by becoming a HWS+ member. It’ll bring you lots of benefits personally, but it also means you’ll directly help people all over the world to learn Swift by freeing me up to share more of my knowledge, passion, and experience for free! Become Hacking with Swift+ member.

Was this page useful? Let us know!

Average rating: 4.6/5

Unknown user

You are not logged in

Link copied to your pasteboard.

DEV Community

DEV Community

Maegan Wilson

Posted on Aug 26, 2019 • Updated on May 16, 2020 • Originally published at appsbymw.com

How to Present and Dismiss a Modal in SwiftUI

In this post, we will cover how to present and dismiss a modal view.

Find the source code at this Github Repo.

maeganwilson / swiftui-show-modal-tutorial

A tutorial for SwiftUI on how to present and dismiss a Modal

swiftui-show-modal-tutorial

NOTE : this tutorial is using Xcode 11 and has been tested using iOS 13.1.2 .

Let's get started by making a new project using SwiftUI. When creating a new project, make sure that the language is set to Swift, and the User Interface is configured to SwiftUI like in the picture below.

modal presentation style swiftui

show_modal variable

Now that the project is made, we need to open the ContentView.swift file to declare a variable that determines whether or not to present the modal.

The variable has to be a binding variable and one that can update the view when changing, which is why we declare it as a State variable.

Button to change the state!

Let's change the Text() to a Button() that sets show_modal to true .

I added a print() statement to make sure the button works. Go ahead and run the app (Command + R) and click on the button. By clicking on the button, "Button Pushed" will be printed in the console.

Create the Modal View

Now, let's create the modal view. Create a new file and change the Text to "This is a Modal." It should look like the code snippet below.

Making the Modal Appear

It's time to make the modal appear from the button push on the first view. Open ContentView.swift and add the following to the button.

What does .sheet() // more code do? It is deciding if ModalView should be presented when show_modal changes.

.sheet(isPresented: Binding<Bool>){ /* View to present */} is a modifier that can present the view when isPresented is true . In our example, show_modal is a Binding<Bool> because it is declared with @State . We also set the view to be presented as ModalView() .

ContentView.swift should now be complete and look like this.

Add a dismiss button

Dragging works to dismiss, but sometimes users would instead hit a button, or maybe you want the user to hit the button to confirm, and a drag cancels the operation. To add a button to dismiss the modal, we need to put add an Environment variable for presentationMode and then call presentationMode.wrappedValue.dismiss() . Here is how it looks in ModalView.swift .

I'm going to break down what we did.

  • Add the environment variable. This environment variable is what determines when to dismiss the modal.
  • Embed the Text in a VStack. We do this to be able to have a Button view on top of the Text.
  • Add a button with the following action. The action in the button is what to perform when the button is tapped. self.presentaionMode.wrappedValue.dismiss() is the method that dismisses the Modal.

Now, running the application, we can dismiss the view either by dragging or by tapping on the button.

If you enjoy my posts, please consider sharing it or Buying me a Coffee!

Buy Me A Coffee

I was asked by @cwhooten how to make a list that presents a dynamic modal. You can find that answer as a branch to the original example by clicking on this sentence .

Updated the note at the top.

Updated the note at the top since it has been tested with Release Xcode and Release iOS 13.

Top comments (6)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

careerunderdog profile image

  • Location Delaware
  • Joined Oct 11, 2019

For me, I can only present the sheet once when dismissing with the button. If I try to present it again it does nothing, but if I drag to dismiss I can keep presenting and dismissing repeatedly. Any suggestions?

maeganwilson_ profile image

  • Location Austin, Tx
  • Education BA in Theatre & Dance from the University of Texas at Austin
  • Work Software Engineer at Homeward
  • Joined Jan 28, 2019

I'm running this on a device and in the Xcode simulator, and I'm not experiencing this. Any chance you have a link or some code to look at?

Are you running Catalina? I did have the issue you are reporting with the Catalina betas sometimes, but every time I ran on a real device it worked.

Well, after some more testing, it works as expected unless I am using a button in navigation bar trailing items. For some reason the problem I described only happens when it's a navigation bar button. If I just put a button somewhere else in the View it works perfectly. This solves my problem for now. Thanks for the reply, and for the tutorial!

And yes I am running Catalina, still on a beta so I'll try again when I am on the real Catalina/Xcode.

I also had this problem in the simulator at some point in the beta process, but when on a real device it works. In my app on the App Store, I have this implemented as a nav bar button and it works as expected. You can see the code on my GitHub . I linked to the direct file.

kevindorfer profile image

  • Joined Oct 20, 2019

Very helpful

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

realsteveig profile image

System Design Series - Scalability

STEVE - Jun 29

disane profile image

RxJS: The Reactive Revolution in JavaScript 🚀

Marco - Jun 29

huizhou92 profile image

A Deep Dive into CNCF’s Cloud-Native AI Whitepaper

huizhou92 - Jun 30

If Google No Longer supports Golang

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Erica Sadun

Where technology meets something or other, swiftui: modal presentation.

I have regrettably little time to devote to SwiftUI. I explore when I can, although I wish I were a lot further in that journey.

Here’s my latest go, where I’m looking to build a modal presentation. Today is the first time I’ve been able to play with Modal , the storage type for a modal presentation. I tied it together with an isPresented  state, but I’m wondering if I’ve done this all wrong.

I can’t help but think there’s a better way to do this. I’m using a text button for “Done” instead of a system-supplied item, so it won’t be automatically internationalized. Nor, can I find any specialty “Done” item in SFSymbols. When looking at Apple’s samples, such as Working with UI Controls , I see the same Text("Done")  . While I know that Text elements are automatically localized should resources be available, is SwiftUI providing us with any core dictionary of terms?

I think using the isPresented state in the code below may be too clunky. I’d think that there would be a more direct way to coordinate a modal item. Any advice and guidance will be greatly welcomed.

I remain stuck in Mojave for most of my work, although I put an install of Catalina on a laptop. Although you can build proper SwiftUI apps using the beta Xcode, without the preview (and I’ve had no luck finding a secret default to enable it under Mojave) makes the experience way slower than working in a playground.

I’m hoping to dive next into Interfacing with UIKit .

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • June 16, 2019
  • Development , SwiftUI , WWDC , Xcode

One Comment

SwiftUI: Boing!

I suspect they are just missing a BarButton type that exposes what UIKit already offers. Fingers crossed.

As an aside, to get to the new presentationControllerDidAttemptToDismiss() delegate callbacks for a Modal, which allows you to ‘interrupt’ the user trying to dismiss your modal, I used a UIHostingController to show my SwiftUI view and a BindableObject in which I bound to via .sink on the UIKit side to dismiss it.

  • June 17, 2019 10:02 AM
  • By Paul Colton

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

Get 50% off during WWDC 2024!

Livestreams

Lite mode on

Quick links

No results found

Suggested search

Modal Presentation

Add to favorites

Navigate to another screen using a built-in Modal view

icon

Build an app with SwiftUI Part 1

Learn SwiftUI for iOS 13

Layout and Stacks

Components and Visual Effects 2

Animations and States

Gestures and Events

Timing Curve and Delay Animation

Dismiss and Drag Anchors

SF Symbols and Props

Color Literal, Gradient and Overlay

Animation Between Screens

Drag Progress and Tap Background

Binding and Screen Size

ScrollView and Repeat

Data and Image Literal

3D Scroll Animation

Navigation View and List

Navigation Style and Passing Data

Combine and Edit Data

Tab Bar and Test on Device

Now that we have a lot of interactive content like cards and floating buttons, we can use those to initiate different interactions like calling a modal or an alert. In SwiftUI, the modal interaction is fantastic and has a built-in drag to dismiss gesture. I recommend using it often, even for large content.

Get Pro Access

$19 per month

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Browse all downloads

Learn how to code custom UIs, animations, gestures and components in Xcode 11

Build a custom UI from scratch using layout techniques and modifiers in SwiftUI

Apply transforms, blend modes, blur in SwiftUI and turn views to components

Create beautiful animations using states, transitions and actions.

Make your app interactive and animated with the Drag gesture and events in SwiftUI.

Use bezier curve animation with delay and repeat values

Snap the card to different positions using multiple conditions and operators in SwiftUI

How to use Apple's iOS icons and pass values to components

Quickly edit colors and add gradients and use the overlay modifier

Create a transition between two views

Use the drag values and use them as a progress to animate views in SwiftUI

Bind states across multiple views and detect the screen size

Add a horizontal ScrollView to a list of cards in SwiftUI

Work with arrays and data models to create a loop of components in SwiftUI

Use GeometryReader to detect the scroll position and apply 3D animations

Build a table view with navigation options and presentations in SwiftUI

Create a detail screen for your navigation list items

Learn how to manipulate external data with built-in functions

Iterate your designs quickly with previews and test directly on your device or using the iOS simulator

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

I design, code and write

Meng To is the author of Design+Code. Meng started off his career as a self-taught designer from Montreal and eventually traveled around the world for 2 years as his US VISA was denied. During his travels, he wrote a book which now has 35,000 readers.

37 courses - 173 hours

course logo

Build a React Site from Figma to Codux

In this course, you'll learn to build a website from scratch using Codux, starting with a Figma template. You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.

course logo

Create 3D UI for iOS and visionOS in Spline

Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI

course logo

Master No-Code Web Design with Framer

In this free Framer course, you'll learn to create modern, user-friendly interfaces. Start with dark mode and glass designs, then move from Figma to Framer, using vectors and auto layout for responsive websites. Add animations, interactive buttons, and custom components with code. Finally, you'll craft a design system suitable for teamwork or solo projects, all in a straightforward and practical approach.

course logo

Build SwiftUI Apps for iOS 17

In this course, we’ll be exploring the fresh and exciting features of SwiftUI 5! As we craft a variety of iOS apps from the ground up, we'll delve deep into the treasure trove that is SwiftUI's user interface, interactions, and animations.

course logo

Build Beautiful Apps with GPT-4 and Midjourney

Design and develop apps using GPT-4 and Midjourney with prompts for SwiftUI, React, CSS, app concepts, icons, and copywriting

Build SwiftUI apps for iOS 16

Create animated and interactive apps using new iOS 16 techniques using SwiftUI 4 and Xcode 14

course logo

Build a 3D Site Without Code with Framer

Design and publish a responsive site with 3D animation without writing a single line of code

course logo

Create 3D Site with Spline and React

Design and code a landing page with an interactive 3D asset using Spline and CodeSandbox

Build an Animated App with Rive and SwiftUI

Design and code an iOS app with Rive animated assets, icon animations, custom layouts and interactions

Build a SwiftUI app for iOS 15 Part 3

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

course logo

Build a SwiftUI app for iOS 15 Part 2

Build a SwiftUI app for iOS 15

React Livestreams

Learn how we can use React Hooks to build web apps using libraries, tools, apis and frameworks

course logo

Design Founder Livestreams

A journey on how we built DesignCode covering product design, management, analytics, revenue and a good dose of learning from our successes and failures

SwiftUI Advanced Handbook

An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level

course logo

iOS Design Handbook

A complete guide to designing for iOS 14 with videos, examples and design files

course logo

SwiftUI Handbook

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques

Build a web app with React Hooks

Learn how we built the new Design+Code site with React Hooks using Gatsby, Netlify, and advanced CSS techniques with Styled Components.

course logo

UI Design Handbook

A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

course logo

SwiftUI for iOS 14

Build a multi-platform app from scratch using the new techniques in iOS 14. We'll use the Sidebar and Lazy Grids to make the layout adaptive for iOS, iPadOS, macOS Big Sur and we'll learn the new Matched Geometry Effect to create beautiful transitions between screens without the complexity. This course is beginner-friendly and is taught step-by-step in a video format.

course logo

SwiftUI Livestreams

This is a compilation of the SwiftUI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

course logo

UI Design Livestreams

This is a compilation of the UI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

UI Design for Developers

In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.

course logo

Build an app with SwiftUI Part 3

This course was written for designers and developers who are passionate about design and about building real apps for iOS, iPadOS, macOS, tvOS and watchOS. SwiftUI works across all of those platforms. While the code is not a one-size-fits-all, the controls and techniques involved can apply to all platforms. It is beginner-friendly, but it is also packed with design tricks and cool workflows about building the best UIs and interactions.

Build an app with SwiftUI Part 2

course logo

Build a full site in Webflow

Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build complex interactions and deploy all in one tool. Webflow also comes with a built-in content management system (CMS) and Ecommerce for creating a purchase experience without the need of third-party tools.

course logo

Advanced Prototyping in ProtoPie

ProtoPie is a cross-platform prototyping tool that creates prototypes nearly as powerful as those made with code, with half of the efforts, and zero code. It's perfect for designers who want to quickly experiment with advanced interactions using variables, conditions, sensors and more.

course logo

React Native for Designers Part 2

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web has grown over the past decades. Most importantly, you're building for both iOS and Android using the same codebase.

React Native for Designers

Design System in Figma

Learn how to use and design a collaborative and powerful design system in Figma. Design Systems provide a shared library of reusable components and guidelines and that will let you build products much faster

React for Designers

Learn how to build a modern site using React and the most efficient libraries to get your site/product online. Get familiar with Grid CSS, animations, interactions, dynamic data with Contentful and deploying your site with Netlify.

Swift Advanced

Learn Swift a robust and intuitive programming language created by Apple for building apps for iOS, Mac, Apple TV and Apple Watch

Learn Swift

course logo

Learn Sketch

Learn Sketch a design tool entirely vector-based and focused on user interface design

Learn iOS 11 Design

Learn colors, typography and layout for iOS 8

Test your knowledge of SwiftUI iOS 13 . Complete the course and get perfect results for this test to get your certificate.

Site made with React, Gatsby, Netlify and Contentful. Learn how .

Design+Code © 2024

Need help? Contact Us

  • Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
  • Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
  • OverflowAI GenAI features for Teams
  • OverflowAPI Train & fine-tune LLMs
  • Labs The future of collective knowledge sharing
  • About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

SwiftUI - Half modal?

I'm trying to recreate a Modal just like Safari in iOS13 in SwiftUI:

Here's what it looks like:

enter image description here

Does anyone know if this is possible in SwiftUI ? I want to show a small half modal, with the option to drag to fullscreen, just like the sharing sheet.

Any advice is much appreciated!

  • uiactivityviewcontroller

Jonas Deichelmann's user avatar

  • Wouldn't it be just overlay ? –  user28434'mstep Commented Jun 21, 2019 at 9:53
  • 1 I'm not too sure, I thought it might be an option on a Modal or popover, but the docs are quite sparse at the moment –  ryannn Commented Jun 21, 2019 at 10:03
  • 1 I found modals in SwiftUI to fall too short on options. For example, I could not find a way to select its presentation style to "FormSheet". Something very basic that has been around since iOS 3.2!. I had to go with the UIHostingController trick. –  kontiki Commented Jun 21, 2019 at 15:31
  • 6 Made this in pure SwiftUI. Enjoy! github.com/cyrilzakka/SwiftUIModal . Enables fullscreen and half modal capabilities. –  cyril Commented Aug 1, 2019 at 6:03
  • 3 @ryannn It looks like half sheet is finally supported in iOS 16 - for details see this answer . –  pawello2222 Commented Jun 6, 2022 at 22:08

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged swift xcode swiftui ios13 uiactivityviewcontroller or ask your own question .

  • Featured on Meta
  • Upcoming sign-up experiments related to tags
  • Policy: Generative AI (e.g., ChatGPT) is banned
  • The [lib] tag is being burninated
  • What makes a homepage useful for logged-in users

Hot Network Questions

  • What does ‘a grade-hog’ mean?
  • Is the FOCAL syntax for Alphanumeric Numbers ("0XYZ") documented anywhere?
  • Summation not returning a timely result
  • How do guitarists remember what note each string represents when fretting?
  • Is Légal’s reported “psychological trick” considered fair play or unacceptable conduct under FIDE rules?
  • Diagnosing tripped breaker on the dishwasher circuit?
  • Can I route audio from a macOS Safari PWA to specific speakers, different from my system default?
  • No simple group or order 756 : Burnside's proof
  • Is it consistent with ZFC that the real line is approachable by sets with no accumulation points?
  • Is there a way to non-destructively test whether an Ethernet cable is pure copper or copper-clad aluminum (CCA)?
  • "All due respect to jazz." - Does this mean the speaker likes it or dislikes it?
  • Correlation for Small Dataset?
  • Was BCD a limiting factor on 6502 speed?
  • Should I accept an offer of being a teacher assistant without pay?
  • Does "*some of the town council*" mean the same as "*some of the **members** of the town council*"?
  • How do you say "living being" in Classical Latin?
  • How to fix misaligned objects that look fine in viewport but not in render?
  • How many steps are needed to turn one "a" into at least 100,000 "a"s using only the three functions of "select all", "copy" and "paste"?
  • White grids appears when export GraphicsRow to PDF
  • What is the best catalog of black hole candidates?
  • What is the translation of misgendering in French?
  • Where can I access records of the 1947 Superman copyright trial?
  • Does it matter if a fuse is on a positive or negative voltage?
  • What is the meaning of '"It's nart'ral" in "Pollyanna" by Eleanor H. Porter?

modal presentation style swiftui

IMAGES

  1. PPT

    modal presentation style swiftui

  2. Climate Change Educational Presentation in Colorful Hand Drawn style

    modal presentation style swiftui

  3. PPT

    modal presentation style swiftui

  4. Create an app "homepage" in SwiftUI

    modal presentation style swiftui

  5. I have found that my approach is pretty similar to SwiftUI, which is

    modal presentation style swiftui

  6. Exploring SwiftUI: Building a Map App with MVVM Architecture

    modal presentation style swiftui

VIDEO

  1. How to use Alignment Guides in SwiftUI

  2. SwiftUI

  3. GFGC HLK/COMMERCE MADAL PRESENTATION/B.com modal presentation/working modals of commerce/#modal#Bcom

  4. SwiftUI Button and Properties

  5. Tips on Presenting Views Modally in SwiftUI (from an ex-Apple engineer 🍎)

  6. SwiftUI Modal Popup: Easy way to Present a Modal View (SwiftUI 2.0 Tutorial)

COMMENTS

  1. Modal presentations

    To draw attention to an important, narrowly scoped task, you display a modal presentation, like an alert, popover, sheet, or confirmation dialog. In SwiftUI, you create a modal presentation using a view modifier that defines how the presentation looks and the condition under which SwiftUI presents it. SwiftUI detects when the condition changes ...

  2. SwiftUI Sheet: Modal, Bottom, and full screen presentation in iOS

    A sheet in SwiftUI is a presentation style that displays a new view on top of the current view. Sheets slide in from the bottom of the screen, which is why they are often referred to as bottom sheets. They cover the main content. SwiftUI has newer features to set the size of the sheet. If you for example what to create a half sheet and allow ...

  3. Presentation modifiers

    Use presentation modifiers to show different kinds of modal presentations, like alerts, popovers, sheets, and confirmation dialogs. Because SwiftUI is a declarative framework, you don't call a method at the moment you want to present the modal. Rather, you define how the presentation looks and the condition under which SwiftUI should present ...

  4. modalPresentationStyle

    Discussion. Presentation style defines how the system presents a modal view controller. The system uses this value only in regular-width size classes. In compact-width size classes, some styles take on the behavior of other styles. You can influence this behavior by implementing the adaptivePresentationStyle(for:traitCollection:) method.

  5. Detail Guide to Modal Presentation in Swift Storyboard

    Configure the Transition Style and Presentation for your Modal View Controller as following. ... SwiftUI: Little Twists for NavigationTransition Introduced in WWDC 2024 (What works and what does

  6. The A-Z of SwiftUI Presentations and Navigation

    SwiftUI also offers Action Sheets and Confirmation Dialogs as interactive ways to engage with the user. You can delve into these presentations in more depth in this thorough guide. Action Sheets: An Action Sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context. Use an Action ...

  7. SwiftUI: Different Ways To Present Modal Views

    In SwiftUI there are basically 3 ways to perform a modal presentation, well it's 3+1 actually but we'll see later. These are our options: Sheets. Transitions. Animations. All these options are good and give us a solution to our problem but are slightly different from each other. Let's analyze them one by one.

  8. SwiftUI Presentations with Modals, Bottom Sheets, and ...

    In this video, I'll show you how to use the various presentation styles available in SwiftUI to create modals, bottom sheets, and fullscreen covers in your i...

  9. How to present a full screen modal view using fullScreenCover()

    Updated for Xcode 16. SwiftUI's fullScreenCover() modifier gives us a presentation style for times when you want to cover as much of the screen as possible, and in code it works almost identically to regular sheets.. Regular sheets can be dismissed by dragging downwards on them, but that isn't possible with views presented using fullScreenCover().As a result, it's important you provide a ...

  10. Modal Presentation

    An extensive series of tutorials covering advanced topics related to React hooks, with a main focus on backend and logic to take your React skills to the next level. 3 hrs. SwiftUI Concurrency. Concurrency, swipe actions, search feature, AttributedStrings and accessibility were concepts discussed at WWDC21.

  11. How to Present and Dismiss a Modal in SwiftUI

    Add a dismiss button. Dragging works to dismiss, but sometimes users would instead hit a button, or maybe you want the user to hit the button to confirm, and a drag cancels the operation. To add a button to dismiss the modal, we need to put add an Environment variable for presentationMode and then call presentationMode.wrappedValue.dismiss().

  12. How to present a screen with modalPresentationStyle in SwiftUI ...

    SwiftUI has just released version 1, so I got some stuck about presenting a screen with fullscreen mode. It's easy to do without NavigationView, but in a child NavigationView, ...

  13. CustomPresentationDetent Protocol Implementation in SwiftUI for Modal

    To implement CustomPresentationDetent for our modal presentation, we need to create a custom struct that conforms with the protocol. The protocol contains a static method that returns an optional ...

  14. SwiftUI: Modal presentation

    SwiftUI: Modal presentation. I have regrettably little time to devote to SwiftUI. I explore when I can, although I wish I were a lot further in that journey. Here's my latest go, where I'm looking to build a modal presentation. Today is the first time I've been able to play with Modal, the storage type for a modal presentation.

  15. SwiftUI sheet () modals with custom size on iPad

    Coupled with a specialized view to handle common elements in the modal: struct ModalContentView<Content>: View where Content: View { // Use this function to provide the content to display and to bring up the modal. // Currently only the 'formSheet' style has been tested but it should work with any // modal presentation style from UIKit.

  16. SwiftUI

    I developed credits the following with just SwiftUI which is probably what an overlay does but for my purposes it is much more flexible: struct FullscreenModalView<Presenting, Content>: View where Presenting: View, Content: View {. @Binding var isShowing: Bool. let parent: () -> Presenting.

  17. Full Screen Modal

    Modal Presentation . 2:18. 48. Remote Images. 3:15. 49. Dismiss custom modal. 3:18. 50. Iterating Over an Array ... How to let users pick a date and time using a dropdown wheel or a calendar style. 3:15. 36. Hover Effects. How to design for iPadOS pointer using hoverEffect and onHover ... Design and code a SwiftUI 3 app with custom layouts ...

  18. isModalInPresentation

    isModalInPresentation. iOS 13.0+ iPadOS 13.0+ Mac Catalyst 13.0+ tvOS 13.0+ visionOS 1.0+. @MainActor @preconcurrency override dynamic var isModalInPresentation: Bool { get set }

  19. Modal Presentation

    Modal Presentation . Navigate to another screen using a built-in Modal view . 7:03. 17. Navigation View and List . Build a table view with navigation options and presentations in SwiftUI . 11:48. 18. Navigation Style and Passing Data. Create a detail screen for your navigation list items . 9:22. 19.

  20. swift

    It looks like half sheet is finally supported in iOS 16. To manage the size of sheet we can use PresentationDetent and specifically presentationDetents(_:selection:) Here's an example from the documentation: struct ContentView: View {. @State private var showSettings = false.

  21. Customise and resize sheets in SwiftUI

    Support all modal presentation styles which are compatible with SwiftUI and don't remove the presenting view controller from the UIWindow The snippet of supported modal presentation styles 3.