Provide views, controls, and layout structures for declaring your app's user interface using SwiftUI.

Posts under SwiftUI tag

200 Posts

Post

Replies

Boosts

Views

Activity

Sheet presentationDetents breaks after rapid open/dismiss cycles
Basic Information Please provide a descriptive title for your feedback: Sheet presentationDetents breaks after rapid open/dismiss cycles Which platform is most relevant for your report? iOS Description Steps to Reproduce: Create a sheet with presentationDetents([.medium]) Rapidly perform these actions multiple times (usually 3-4 times): a. Open the sheet b. Immediately scroll down to dismiss Open the sheet again Observe that the sheet now appears at .large size, ignoring the .medium detent Expected Result: Sheet should consistently maintain .medium size regardless of how quickly it is opened and dismissed. Actual Result: After rapid open/dismiss cycles, the sheet ignores .medium detent and appears at .large size. Reproduction Rate: Occurs consistently after 3-4 rapid open/dismiss cycles More likely to occur with faster open/dismiss actions Configuration: iOS 18 Xcode 16.0 (16A242d) SwiftUI Device: iPhone 14
11
8
1.2k
Mar ’25
TabView Alignment Issue Inside a Popover on iPadOS
I've encountered an issue when using TabView inside a Popover on iPadOS, and I wanted to see if anyone else has run into this or if there's a known workaround before I file a bug report. Issue: When placing a TabView inside a Popover on iPadOS, the tab bar is not center-aligned correctly if the popover’s arrow appears on either the leading or trailing edge. It seems that the centering calculation for the TabView includes the width of the arrow itself. If the popover arrow is on the left, the tabs inside the TabView are pushed to the left. If the popover arrow is on the right, the tabs shift toward the right. This suggests that SwiftUI is incorporating the popover arrow’s width into the alignment calculation, which results in the misalignment. Questions: Has anyone else encountered this behavior? Is there a known workaround to ensure proper centering? If this is indeed a bug, should I file a report through Feedback Assistant? Any insights would be greatly appreciated!
1
0
75
Mar ’25
ForEach with binding seems to be broken in iOS 18.3.1 and iOS 18.4
Super easy to reproduce. Swiping to delete on the last remaining item in the list causes an index out of bounds exception. If you have 2 items in your list, it will only happen when you delete the last remaining item. From my testing, this issue occurs on 18.3.1 and onward (the RC it happens). I didn't test 18.3.0 so it might happen there as well. The only workarounds I have found is to add a delay before calling my delete function: OR to comment out the Toggle. So it seems as though iOS 18.3.x added a race condition in the way the ForEach accesses the values in its binding. Another thing to note, this also happens with .swipeActions, EditMode, etc... any of the built in ways to delete an item from a list. import SwiftUI struct ContentView: View { @StateObject var viewModel = ContentViewModel() var body: some View { List { ForEach($viewModel.items) { $item in HStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text($item.text.wrappedValue) Spacer() Toggle(String(""), isOn: $item.isActive) .labelsHidden() } } .onDelete(perform: delete) } } func delete(at offsets: IndexSet) { // uncomment task to make code not crash // Task { viewModel.deleteItem(at: offsets) // } } } struct MyItem: Identifiable { var id: UUID = UUID() var text: String var isActive: Bool } class ContentViewModel: ObservableObject { @Published var items: [MyItem] = [MyItem(text: "Hello, world!", isActive: false)] func deleteItem(at offset: IndexSet) { items.remove(atOffsets: offset) } }
1
2
105
Mar ’25
NavigationStack inside NavigationSplitView broken animation
In tvOS when using NavigationStack inside NavigationSplitView as below: @State private var selectedItem: String? @State private var navigationPath = NavigationPath() // Track navigation state manually var body: some View { NavigationSplitView { List(selection: $selectedItem) { Button("Item 1") { selectedItem = "Detail View 1" } Button("Item 2") { selectedItem = "Detail View 2" } } } detail: { NavigationStack(path: $navigationPath) { DetailView() .navigationDestination(for: String.self) { value in Text("New Screen: \(value)") } } } } } This example completely breaks the animation inside NavigationStack while navigating between different views, using withAnimation also breaks the navigation as the old view seems to be still in stack and is shown in the new view background. I have also submitted bug report: https://feedbackassistant.apple.com/feedback/16933927
2
0
112
Mar ’25
Markdown openURL can not handle property url
I'm trying to render a markdown with a link using Text. If the URL of the link is a static string, then no problem. If the URL is a property, then OpenURLAction gets a string ‘%25@’. I think this may be a bug. struct ContentView: View { let url = "https://www.google.com" var body: some View { Text("[Terms of Service](\(url))") .environment(\.openURL, OpenURLAction(handler: { url in print(url) return .handled })) } }
2
0
84
Mar ’25
How to determine which ui control is found first in the view hierarchy, when I assign the same keyboardShortcut () to 2 buttons?
import SwiftUI struct ContentView: View { var body: some View { VStack { Button ("Button 1") { print ("Button 1"); } .keyboardShortcut("k", modifiers: .command) Button ("Button 2") { print ("Button 2"); } .keyboardShortcut("k", modifiers: .command) } } } I the above snippet, I have assigned the same keyboard shortcut (cmd +k) to 2 different buttons. According to the docs, if multiple controls are associated with the same shortcut, the first one found is used. How do I figure out if Button 1 would be found first during the traversal or Button 2 ? Is it based on the order of declaration? Is it always the case that Button 1 would be found first since it was declared before Button 2 ?
0
0
95
Mar ’25
I am developing a Immersive Video App for VisionOs but I got a issue regarding app and video player window
In Vision OS app, We have two types of windows: Main App Window – This is the default window that launches when the app starts. It displays the video listings and other primary content. Immersive Space Window – This opens only when a user starts streaming or playing a video. Issue: When entering the immersive space, the main app window remains visible in front of it unless manually closed. To avoid this, I currently close the main window when transitioning to immersive space and reopen it when exiting. However, this causes the app to restart instead of resuming from its previous state. Desired Behavior: I want the main app window to retain its state and seamlessly resume from where it was before entering immersive mode, rather than restarting. Attempts & Challenges: Tried managing opacity, visibility, and state preservation, but none worked as expected. Couldn’t find a way to push the main window to the background while bringing the immersive space to the foreground. Looking for a solution to keep the main window’s state intact while transitioning between immersive and normal modes.
1
0
118
Mar ’25
Combining Matched Geometry with New Zoom Navigation Transitions in iOS 18
With the introduction of the new matchedTransitionSource from iOS 18, we can apply a zoom transition in the navigation view using .navigationTransition(.zoom) This works well for zoom animations. However, when I try to apply a matched geometry effect to views that are similar in the source and destination views, the zoom transition works, but those views don't transition seamlessly as they do with a matched geometry effect. Is it possible to still use matched geometry for subviews of the source and destination views along with the new navigationTransition? Here’s a little demo that reproduces this behaviour: struct ContentView: View { let colors: [[Color]] = [ [.red, .blue, .green], [.yellow, .purple, .brown], [.cyan, .gray] ] @Namespace() var namespace var body: some View { NavigationStack { Grid(horizontalSpacing: 50, verticalSpacing: 50) { ForEach(colors, id: \.hashValue) { rowColors in GridRow { ForEach(rowColors, id: \.self) { color in NavigationLink { DetailView(color: color, namespace: namespace) .navigationTransition( .zoom( sourceID: color, in: namespace ) ) .edgesIgnoringSafeArea(.all) } label: { ZStack { RoundedRectangle(cornerRadius: 5) .foregroundStyle(color) .frame(width: 48, height: 48) Image(systemName: "star.fill") .foregroundStyle(Material.bar) .matchedGeometryEffect(id: color, in: namespace, properties: .frame, isSource: false) } } .matchedTransitionSource(id: color, in: namespace) } } } } } } } struct DetailView: View { var color: Color let namespace: Namespace.ID var body: some View { ZStack { color Image(systemName: "star.fill") .resizable() .foregroundStyle(Material.bar) .matchedGeometryEffect(id: color, in: namespace, properties: .frame, isSource: false) .frame(width: 100, height: 100) } .navigationBarHidden(false) } } #Preview { ContentView() }
1
4
1.1k
Mar ’25
Save credentials prompt not shown when login and password aren't the last fields in a form
The save credentials prompt is not shown after clicking the submit button in the following setup. The prompt is shown if I move the email field before the login field. Is it really required to have login and password fields at the end of the registration form? Or is there some API that can trigger the prompt? struct FakeRegistrationView: View { @State private var login = "" @State private var password = "" @State private var repeatPassword = "" @State private var email = "" var navigateBack: () -> Void var body: some View { VStack(spacing: 16) { TextField("Login", text: $login) .textFieldStyle(.roundedBorder) .textContentType(.username) .disableAutocorrection(true) .autocapitalization(.none) .frame(maxWidth: 300) SecureField("Password", text: $password) .textFieldStyle(.roundedBorder) .textContentType(.newPassword) .disableAutocorrection(true) .autocapitalization(.none) .frame(maxWidth: 300) SecureField("Repeat password", text: $repeatPassword) .textFieldStyle(.roundedBorder) .textContentType(.newPassword) .disableAutocorrection(true) .autocapitalization(.none) .frame(maxWidth: 300) TextField("Email", text: $email) .textFieldStyle(.roundedBorder) .textContentType(.emailAddress) .disableAutocorrection(true) .autocapitalization(.none) .frame(maxWidth: 300) Button { Task { try? await Task.sleep(for: .seconds(2)) navigateBack() } } label: { Text("Submit") } .buttonStyle(.borderedProminent) } } }
1
0
222
Mar ’25
TextEditor with a fixedSize and scroll disabled is completely broken
I am trying to build a text editor that shrinks to its content size. The closest I have been able to get has been to add the .scrollDisabled(true) and .fixedSize(horizontal: false, vertical: true) modifiers. This almost achieves what I need. There are two problems though: long single line text gets cut off at the end creating line breaks causes the text editor to grow vertically as expected (uncovering the cut off text in point 1 above). However, when you delete the line breaks, the TextEditor does not shrink again. I have had a radar open for some time: FB13292506. Hopefully opening a thread here will get more visibility. And here is some sample code to easily reproduce the issue: import SwiftUI struct ContentView: View { @State var text = "[This is some long text that will be cut off at the end of the text editor]" var body: some View { TextEditor(text: $text) .scrollDisabled(true) .fixedSize(horizontal: false, vertical: true) } } #Preview { ContentView() } Here is a gif of the behavior:
2
2
1.5k
Mar ’25
[Suggestion] SwiftUI convenience environment navigation functions
I've been thinking a lot about how navigation and presentation are managed in SwiftUI, and I wanted to propose an idea for a more streamlined approach using environment values. Right now, handling navigation can feel fragmented — especially when juggling default NavigationStack, modals, and tab selections. What if SwiftUI provided a set of convenience environment values for these common actions? Tabs @Environment(\.selectedTab) var selectedTab @Environment(\.selectTab) var selectTab selectedTab: Read the current tab index selectTab(index: Int): Programmatically switch tabs Stack Navigation @Environment(\.stackCount) var stackCount @Environment(\.push) var push @Environment(\.pop) var pop @Environment(\.popToRoot) var popToRoot stackCount: Read how many views are in the navigation stack push(destination: View): Push a new view onto the stack pop(last: Int = 1): Pop the last views popToRoot(): Return to the root view Modals @Environment(\.sheet) var sheet @Environment(\.fullScreenCover) var fullScreenCover @Environment(\.popover) var popover @Environment(\.dismissModal) var dismissModal sheet(view: View): Present a sheet fullScreenCover(view: View): Present a full-screen cover popover(view: View): Show a popover dismissModal(): Dismiss any presented modal Alerts & Dialogs @Environment(\.alert) var alert @Environment(\.confirmationDialog) var confirmationDialog @Environment(\.openAppSettings) var openAppSettings alert(title: String, message: String): Show an alert confirmationDialog(title: String, actions: [Button]): Show a confirmation dialog openAppSettings(): Directly open the app’s settings Why? Clean syntax: This keeps navigation code clean and centralized. Consistency: Environment values already manage other app-level concerns (color scheme, locale, etc.). Why not navigation too? Reusability: This approach is easy to adapt across different view hierarchies. Example @main struct App: App { var body: some Scene { WindowGroup { TabView { NavigationStack { ProductList() } .tabItem { ... } NavigationStack { OrderList() } .tabItem { ... } } } } } struct ProductList: View { @Environment(\.push) var push @State var products: [Product] = [] var body: some View { List(protucts) { product in Button { push(destination: ProductDetails(product: product)) } } label: { ... } } .task { ... } } } struct ProductDetails: View { ... }
4
0
84
Mar ’25
iOS 18.1 SwiftUI popover crash
When trying to debug a mysterious app crash pointing to some layoutIfNeeded() method call, me and my QA team member reduced it to this sample app. struct ContentView: View { @State var isPresented = false var body: some View { VStack { Button { isPresented = true } label: { Text("show popover") } .popover(isPresented: $isPresented) { Text("hello world") } } .padding() } }` This code crashes on his iPad iOS 18.1.0 22B5034E with EXC_BAD_ACCESS error. It is not reproducible on simulator or on device with iOS 18.2 or iOS 17. Is this a known issue? Are there any known workarounds? I've found similar posts here https://developer.apple.com/forums/thread/769757 https://developer.apple.com/forums/thread/768544 But they are about more specific cases.
2
1
191
Mar ’25
Using any SwiftData Query causes app to hang
I want to get to a point where I can use a small view with a query for my SwiftData model like this: @Query private var currentTrainingCycle: [TrainingCycle] init(/*currentDate: Date*/) { _currentTrainingCycle = Query(filter: #Predicate<TrainingCycle> { $0.numberOfDays > 0 // $0.startDate < currentDate && currentDate < $0.endDate }, sort: \.startDate) } The commented code is where I want to go. In this instance, it'd be created as a lazy var in a viewModel to have it stable (and not constantly re-creating the view). Since it was not working, I thought I could check the same view with a query that does not require any dynamic input. In this case, the numberOfDays never changes after instantiation. But still, each time the app tries to create this view, the app becomes unresponsive, the CPU usage goes at 196%, memory goes way high and the device heats up quickly. Am I holding it wrong? How can I have a dynamic predicate on a View in SwiftUI with SwiftData?
2
0
221
Mar ’25
Scroll up and bounce back loop issue when wrapping LazyVstack within a NavigationStack
The issue I'm facing arise when using a lazyvstack within a navigationstack. I want to use the pinnedViews: .sectionHeaders feature from the lazyStack to display a section header while rendering the content with a scrollview. Below is the code i'm using and at the end I share a sample of the loop issue: struct SProjectsScreen: View { @Bindable var store: StoreOf<ProjectsFeature> @State private var searchText: String = "" @Binding var isBotTabBarHidden: Bool @Environment(\.safeArea) private var safeArea: EdgeInsets @Environment(\.screenSize) private var screenSize: CGSize @Environment(\.dismiss) var dismiss private var isLoading : Bool { store.projects.isEmpty } var body: some View { NavigationStack(path:$store.navigationPath.sending(\.setNavigationPath)) { ScrollView(.vertical){ LazyVStack(spacing:16,pinnedViews: .sectionHeaders) { Section { VStack(spacing:16) { if isLoading { ForEach(0..<5,id:\.self) { _ in ProjectItemSkeleton() } } else{ ForEach(store.projects,id:\._id) { projectItem in NavigationLink(value: projectItem) { SProjectItem(project: projectItem) .foregroundStyle(Color.theme.foreground) } .simultaneousGesture(TapGesture().onEnded({ _ in store.send(.setCurrentProjectSelected(projectItem.name)) })) } } } } header: { VStack(spacing:16) { HStack { Text("Your") Text("Projects") .fontWeight(.bold) Text("Are Here!") } .font(.title) .frame(maxWidth: .infinity,alignment: .leading) .padding(.horizontal,12) .padding(.vertical,0) HStack { SSearchField(searchValue: $searchText) Button { } label: { Image(systemName: "slider.horizontal.3") .foregroundStyle(.white) .fontWeight(.medium) .font(.system(size: 24)) .frame(width:50.66,height: 50.66) .background { Circle().fill(Color.theme.primary) } } } } .padding(.top,8) .padding(.bottom,16) .background(content: { Color.white }) } } } .scrollIndicators(.hidden) .navigationDestination(for: Project.self) { project in SFoldersScreen(project:project,isBotTabBarHidden: $isBotTabBarHidden) .toolbar(.hidden) } .padding(.horizontal,SScreenSize.hPadding) .onAppear { Task { if isLoading{ do { let projectsData = try await ProjectService.Shared.getProjects() store.send(.setProjects(projectsData)) } catch{ print("error found: ",error.localizedDescription) } } } } .refreshable { do { let projectsData = try await ProjectService.Shared.getProjects() store.send(.setProjects(projectsData)) } catch{ print("error found: ",error.localizedDescription) } } }.onChange(of: store.navigationPath, { a, b in print("Navigation path changed:", b) }) } } I'm using tca library for managing states so this is my project feature reducer: import ComposableArchitecture @Reducer struct ProjectsFeature{ @ObservableState struct State: Equatable{ var navigationPath : [Project] = [] var projects : [Project] = [ ] var currentProjectSelected : String? } enum Action{ case setNavigationPath([Project]) case setProjects([Project]) case setCurrentProjectSelected(String?) case popNavigation } var body: some ReducerOf<Self> { Reduce { state, action in switch action { case .setNavigationPath(let navigationPath): state.navigationPath = navigationPath return .none case .setProjects(let projects): state.projects = projects return .none case .setCurrentProjectSelected(let projectName): state.currentProjectSelected = projectName return .none case .popNavigation: if !state.navigationPath.isEmpty { state.navigationPath.removeLast() } state.currentProjectSelected = nil return .none } } }
1
0
83
Mar ’25
Animate layout change
I want to show a view, where the user can add or remove items shown as icons, which are sorted in two groups: squares and circles. When there are only squares, they should be shown in one row: [] [] [] When there are so many squares that they don’t fit horizontally, a (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all squares are visible. When there are only circles, they also should be shown in one row: () () () When there are so many circles that they don’t fit horizontally, a (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all circles are visible. When there a few squares and a few circles, they should be shown adjacent in one row: [] [] () () When there are so many squares and circles that they don’t fit horizontally, they should be shown in two rows, squares on top, circles below: [] [] [] () () () When there are either too many squares or too many circles (or both) to fit horizontally, one common (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all items are visible. I started with ViewThatFits: (see first code block) { let squares = HStack { ForEach(model.squares, id: \.self) { square in Image(square) } } let circles = HStack { ForEach(model.circles, id: \.self) { circle in Image(circle) } } let oneLine = HStack { squares circles } let twoLines = VStack { squares circles } let scrollView = ScrollView(.horizontal) { twoLines }.scrollIndicators(.visible) ViewThatFits(in: .horizontal) { oneLine twoLines scrollView.clipped() } } While this works in general, it doesn’t animate properly. When the user adds or removes an image the model gets updated, (see second code block) withAnimation(Animation.easeIn(duration: 0.25)) { model.squares += image } and the view animates with the existing images either making space for a new appearing square/circle, or moving together to close the gap where an image disappeared. This works fine as long as ViewThatFits returns the same view. However, when adding 1 image leads to ViewThatFits switching from oneLine to twoLines, this switch is not animated. The circles jump to the new position under the squares, instead of sliding there. I searched online for a solution, but this seems to be a known problem of ViewThatFits. It doesn't animate when it switches... (tbc)
1
0
98
Mar ’25
UIKit or SwiftUI First? Exploring the Best Hybrid Approach
UIKit and SwiftUI each have their own strengths and weaknesses: UIKit: More performant (e.g., UICollectionView). SwiftUI: Easier to create shiny UI and animations. My usual approach is to base my project on UIKit and use UIHostingController whenever I need to showcase visually rich UI or animations (such as in an onboarding presentation). So far, this approach has worked well for me—it keeps the project clean while solving performance concerns effectively. However, I was wondering: Has anyone tried the opposite approach? Creating a project primarily in SwiftUI, then embedding UIKit when performance is critical. If so, what has your experience been like? Would you recommend this approach? I'm considering this for my next project but am unsure how well it would work in practice.
1
0
90
Mar ’25
SwiftUI update master list from detail view
Simple master screen with list, NavigationLink to editable detail view. I want edits on the detail screen to update to the master list "cars" variable and the list UI. On the detail view, if I edit one field and exit the field, the value reverts to the original value. Why? If I edit one field, don't change focus and hit the back button. The master list updates. This is what I want, but I can only update 1 field because of problem #1. Should be able to edit all the fields. If I implement the == func in the Car struct, then no updates get saved. Why? struct Car: Hashable, Equatable { var id: UUID = UUID() var make: String var model: String var year: Int // static func == (lhs: Car, rhs: Car) -> Bool { // return lhs.id == rhs.id // } } struct ContentView: View { @State private var cars: [Car] init() { cars = [ Car(make: "Toyota", model: "Camry", year: 2020), Car(make: "Honda", model: "Civic", year: 2021), Car(make: "Ford", model: "Mustang", year: 2022), Car(make: "Chevrolet", model: "Malibu", year: 2023), Car(make: "Nissan", model: "Altima", year: 2024), Car(make: "Kia", model: "Soul", year: 2025), Car(make: "Volkswagen", model: "Jetta", year: 2026) ] } var body: some View { NavigationStack { VStack { ForEach($cars, id: \.self) { $car in NavigationLink(destination: CarDetailView(car: $car)){ Text(car.make) } } } } } } struct CarDetailView: View { @Binding var car: Car var body: some View { Form { TextField("Make", text: $car.make) TextField("Model", text: $car.model) TextField("Year", value: $car.year, format: .number) } } }
1
0
89
Mar ’25