Explore the various UI frameworks available for building app interfaces. Discuss the use cases for different frameworks, share best practices, and get help with specific framework-related questions.

All subtopics
Posts under UI Frameworks topic

Post

Replies

Boosts

Views

Activity

Menu view flashes white before closing when device is set to dark appearance
Feedback ID: FB19846667 When dismissing a Menu view when the device is set to dark appearance, there is a flash of lightness that is distracting and feels unnatural. This becomes an issue for apps that rely on the user interacting with Menu views often. When using the overflow menu on a toolbar, the effect of dismissing the menu is a lot more natural and there is less flashing. I expect a similar visual effect when creating Menu views outside of a toolbar. Has anyone found a way around this somehow? Comparison between dismissing a menu and a toolbar overflow: https://www.youtube.com/shorts/H2gUQOwos3Y Slowed down version of dismissing a menu with a visible light flash: https://www.youtube.com/shorts/MBCCkK-GfqY
0
0
201
Aug ’25
[SwiftUI] Gesture Conflict: simultaneousGesture Causes Incorrect Gesture Recognition in iOS 18
Subject: SwiftUI Gesture Conflict in iOS 18: Simultaneous Recognition of Drag and Tap Gestures Description: In SwiftUI on iOS 18 and above, we've identified an issue with gesture handling that affects user experience. When implementing .simultaneousGesture(DragGesture()), the system incorrectly recognizes and processes both drag and tap gestures concurrently, resulting in unintended behavior. Technical Details: Environment: SwiftUI, iOS 18+ Issue: Simultaneous recognition of horizontal drag gestures and vertical scroll/tap gestures Current Behavior: Both vertical and horizontal scrolling occur simultaneously when using .simultaneousGesture(DragGesture()) Expected Behavior: Gestures should be properly disambiguated to prevent concurrent scrolling in multiple directions Impact: This behavior significantly impacts user experience, particularly in custom carousel implementations and other UI components that rely on precise gesture handling. The simultaneous recognition of both gestures creates a confusing and unpredictable interaction pattern. Steps to Reproduce: Create a SwiftUI view with horizontal scrolling (e.g., custom carousel) Implement .simultaneousGesture(DragGesture()) Add tap gesture recognition to child views Run on iOS 18 Attempt to scroll horizontally Observed Result: Both horizontal dragging and vertical scrolling/tapping are recognized and processed simultaneously, creating an inconsistent user experience. Expected Result: The system should properly disambiguate between horizontal drag gestures and vertical scroll/tap gestures, allowing only one type of gesture to be recognized at a time based on the user's intent. Please let me know if you need any additional information or reproduction steps.
0
0
131
Apr ’25
gesture(LongPressGesture()) issue with scroll view
I've being playing aground with long press gesture in scroll view and noticed gesture(LongPressGesture()) doesn't seem to work with scroll view's scrolling which doesn't seem to be the intended behavior to me. Take the following example: the blue rectangle is modified with onLongPressGesture and the red rectangle is modified with LongPressGesture (_EndedGesture<LongPressGesture> to be specific). ScrollView { Rectangle() .fill(.blue) .frame(width: 200, height: 200) .onLongPressGesture { print("onLongPressGesture performed") } onPressingChanged: { _ in print("onLongPressGesture changed") } .overlay { Text("onLongPressGesture") } Rectangle() .fill(.red) .frame(width: 200, height: 200) .gesture(LongPressGesture() .onEnded { _ in print("gesture ended") }) .overlay { Text("gesture(LongPressGesture)") } } If you start scrolling from either of the rectangles (that is, start scrolling with your finger on either of the rectangles), the ScrollView will scroll. However, if LongPressGesture is modified with either onChanged or .updating, ScrollView won't respond to scroll if the scroll is started from red rectangle. Even setting the maximumDistance to 0 won't help. As for its counter part onLongPressGesture, even though onPressingChanged to onLongPressGesture, scrolling still works if it's started from onLongPressGesture modified view. ScrollView { Rectangle() .fill(.blue) .frame(width: 200, height: 200) .onLongPressGesture { print("onLongPressGesture performed") } onPressingChanged: { _ in print("onLongPressGesture changed") } .overlay { Text("onLongPressGesture") } Rectangle() .fill(.red) .frame(width: 200, height: 200) .gesture(LongPressGesture(maximumDistance: 0) // scroll from the red rectangle won't work if I add either `updating` or `onChanged` but I put both here just to demonstrate // you will need to add `@GestureState private var isPressing = false` to your view body .updating($isPressing) { value, state, transaction in state = value print("gesture updating") } .onChanged { value in print("gesture changed") } .onEnded { _ in print("gesture ended") }) .overlay { Text("gesture(LongPressGesture)") } } This doesn't seem right to me. I would expect the view modified by LongPressGesture(), no matter if the gesture has onChanged or updating, should be able to start scroll in a scroll view, just like onLongPressGesture. I observed this behavior in a physical device running iOS 26.1, and I do not know the behavior on other versions.
0
0
88
Nov ’25
SwiftUI iOS 16 TabView PageTabViewStyle index behavior is wrong for right to left layoutDirection
TabView page control element has a bug on iOS 16 if tabview is configured as RTL with PageTabViewStyle. Found iOS 16 Issues: Page indicators display dots in reverse order (appears to treat layout as LTR while showing RTL) Index selection is reversed - tapping indicators selects wrong pages Using the page control directly to navigate eventually breaks the index binding The underlying index counting logic conflicts with the visual presentation iOS 18 Behavior: Works as expected with correct dot order and index selection. Xcode version: Version 16.3 (16E140) Conclusion: Confirmed broken on iOS 16 Confirmed working on iOS 18 iOS 17 and earlier versions not yet tested I've opened a feedback assistant ticket quite a while ago but there is no answer. There's a code example and a video there. Anyone else had experience with this particular bug? Here's the code: public struct PagingView<Content: View>: View { //MARK: - Public Properties let pages: (Int) -> Content let numberOfPages: Int let pageMargin: CGFloat @Binding var currentPage: Int //MARK: - Object's Lifecycle public init(currentPage: Binding<Int>, pageMargin: CGFloat = 20, numberOfPages: Int, @ViewBuilder pages: @escaping (Int) -> Content) { self.pages = pages self.numberOfPages = numberOfPages self.pageMargin = pageMargin _currentPage = currentPage } //MARK: - View's Layout public var body: some View { TabView(selection: $currentPage) { ForEach(0..<numberOfPages, id: \.self) { index in pages(index) .padding(.horizontal, pageMargin) } } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always)) .ignoresSafeArea() } } //MARK: - Previews struct ContentView: View { @State var currentIndex: Int = 0 var body: some View { ZStack { Rectangle() .frame(height: 300) .foregroundStyle(Color.gray.opacity(0.2)) PagingView( currentPage: $currentIndex.onChange({ index in print("currentIndex: ", index) }), pageMargin: 20, numberOfPages: 10) { index in ZStack { Rectangle() .frame(width: 200, height: 200) .foregroundStyle(Color.gray.opacity(0.2)) Text("\(index)") .foregroundStyle(.brown) .background(Color.yellow) } }.frame(height: 200) } } } #Preview("ContentView") { ContentView() } extension Binding { @MainActor func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> { Binding( get: { self.wrappedValue }, set: { newValue in self.wrappedValue = newValue handler(newValue) } ) } }
0
0
128
Aug ’25
unable to click when ZoomNavigationTransition finished
I am using ".navigationTransition(ZoomNavigationTransition.zoom(sourceID: xxx, in: xxx))" to zooms the appearing view from a source view . When the appearing view dismissed, I can only click other view after a delay . It seems that the transition is not finished immediately when the appearing view dismissed . After a delay, the transition finished, than I can click other view. struct ContentView: View { @State private var path: NavigationPath = NavigationPath() @Namespace private var namespace var body: some View { NavigationStack(path: $path) { VStack(spacing: 0) { ForEach(["aaa", "bbb"], id: \.self) { string in Text(string) .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2) .contentShape(Rectangle()) .onTapGesture { path.append(string) } .matchedTransitionSource(id: string, in: namespace) } } .navigationDestination(for: String.self, destination: { route in Text(route) .navigationTransition(ZoomNavigationTransition.zoom(sourceID: route, in: namespace)) }) } } } When using sheet on appearing view, It seems that the transition is finished immediately when the appearing view dismissed. extension String: Identifiable { public var id: String { return self } } struct ContentView: View { @State private var path: NavigationPath = NavigationPath() @Namespace private var namespace @State private var stringToSheet: String? var body: some View { NavigationStack(path: $path) { VStack(spacing: 0) { ForEach(["aaa", "bbb"], id: \.self) { string in Text(string) .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2) .contentShape(Rectangle()) .onTapGesture { stringToSheet = string } .matchedTransitionSource(id: string, in: namespace) } } .sheet(item: $stringToSheet) { newValue in Text(newValue) .navigationTransition(ZoomNavigationTransition.zoom(sourceID: newValue, in: namespace)) } } } }
Topic: UI Frameworks SubTopic: SwiftUI
0
0
78
Jun ’25
Ignore Home Screen Tint/Accents in Colored Components
I'm having some trouble getting my widget to display how I want when the user has a tint applied to their home screen. The issue I'm having is with a Text() element, as well as a LinearGradient I am displaying on top of my image. The text should always be white, and the gradient is always black with varying levels of opacity. I've managed to fix this issue with images displayed in my widget by leveraging widgetAccentedRenderingMode(.fullColor) however, there does not seem to be an equivalent of this for non-Image components. I'm aware of .widgetAccentable(false) but as I understand it, elements are already considered not accentable by default and you need to explicitly declare widgetAccentable(true) to add them to the accent group. I've tried specifying this to be false up and down my view hierarchy just to see if something will stick but no luck. Are there any other levers I can pull to preserve the declared colors for my text and gradient components? The images I am displaying is album artwork where preserving the original image is integral, but the tinted text color and overlaid gradient often clash or just looks bad in general. Is there a solution for colored primitive elements?
0
0
144
Aug ’25
iOS 17 Bug? Adding a .sheet to a .fullscreencover makes background opaque
I am working on creating a custom Popup View based on a .fullscreenCover. The .fullscreenCover is used to place the Popup content on screen on a semi-transparent background. While this works on iOS 18, there is a problem on iOS 17: When the Popup content contains a .sheet, the background is not transparent any more but opaque. Image: iOS 17. When showing the Popup an opaque background covers the main content. When tapping on the background it turns transparent. Image: iOS 18. Everything works as intended. When showing the Popup the main background is covered with a semi-transparent background. Removing the .sheet(...) from the Popup content solves the problem. It does not matter if the sheet is used or not. Adding it to the view code is enough to trigger the problem. Using a .sheet within a .fullscreenCover should not be a problem as far as I know. Is this a bug in iOS 17 or is there something wrong with my code? Code: struct SwiftUIView: View { @State var isPresented: Bool = false @State var sheetPresented: Bool = false var body: some View { ZStack { VStack { Color.red.frame(maxHeight: .infinity) Color.green.frame(maxHeight: .infinity) Color.yellow.frame(maxHeight: .infinity) Color.blue.frame(maxHeight: .infinity) } Button("Show") { isPresented = true } .padding() .background(.white) Popup(isPresented: $isPresented) { VStack { Button("Dismiss") { isPresented = false } } .frame(maxWidth: 300) .padding() .background( RoundedRectangle(cornerRadius: 20) .fill(.white) ) .sheet(isPresented: $sheetPresented) { Text("Hallo") } } } } } struct Popup<Content: View>: View { @Binding var isPresented: Bool let content: () -> Content init(isPresented: Binding<Bool>, @ViewBuilder _ content: @escaping () -> Content) { _isPresented = isPresented self.content = content } @State private var internalIsPresented: Bool = false @State private var isShowing: Bool = false let transitionDuration: TimeInterval = 0.5 var body: some View { ZStack { } .fullScreenCover(isPresented: $internalIsPresented) { VStack { content() } .frame(maxWidth: .infinity, maxHeight: .infinity) .background( Color.black.opacity(0.5) .opacity(isShowing ? 1 : 0) .animation(.easeOut(duration: transitionDuration), value: isShowing) .ignoresSafeArea() ) .presentationBackground(.clear) .onAppear { isShowing = true } .onDisappear { isShowing = false } } .onChange(of: isPresented) { _ in withoutAnimation { internalIsPresented = isPresented } } } } extension View { func withoutAnimation(action: @escaping () -> Void) { var transaction = Transaction() transaction.disablesAnimations = true withTransaction(transaction) { action() } } }
Topic: UI Frameworks SubTopic: SwiftUI
0
0
107
May ’25
How to customize item transitions inside a Picker View?
I have a simple Picker where the options available change by the view state. I would like to have the transition animated but the default animation is not good so I tried setting a .transition() and or an .animation() inside an item on the picker but it is ignored. The same happens if the transition is set on the picker itself since it's always present. Am I doing it right and is just not posible or is there something else to do? Code to reproduce the issue: struct ContentView: View { @State var list: [String] = [ "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", ] @State var selected: String? @State var toggle: Bool = false var body: some View { VStack { Picker("List", selection: $selected) { ForEach(list, id: \.self) { Text($0).tag($0) // .transition(.opacity) } } .pickerStyle(.segmented) // .transition(.opacity) HStack { Button(action: swapOptions) { Text("Swap") } } } .padding() } } extension ContentView { func swapOptions() { withAnimation { toggle.toggle() switch toggle { case true: list = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", ] case false: list = [ "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", ] } } } } ``
Topic: UI Frameworks SubTopic: SwiftUI
0
0
99
May ’25
iOS 26 Beta 5 SwiftUI Picker(.pickerStyle(.segmented)) + Images(.symbolRenderingMode(.palette)) + Sheet = Freeze
App freezes when using a SwiftUI Picker with pickerStyle(.segment), Images with .symbolRenderingMode(.palette) and try to show a sheet. import SwiftUI enum Sample: String, CaseIterable, Identifiable { case aaa, bbb, ccc, ddd var id: Self { self } var image: Image { switch self { case .aaa: Image(systemName: "square.stack.3d.up.fill") case .bbb: Image(systemName: "square.and.arrow.up") case .ccc: Image(systemName: "square.and.arrow.up.fill") case .ddd: Image(systemName: "square.and.arrow.down") } } } struct PickerBug: View { @State private var selected: Sample = .aaa @State var showSheet = false var body: some View { List { Section { VStack { Picker("Qqq", selection: $selected) { ForEach(Sample.allCases) { sample in sample.image // .symbolRenderingMode(.palette) .foregroundStyle(.black) } } .pickerStyle(.segmented) } } Text("Aaa") } .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { showSheet.toggle() } label: { Text("A") } } } .sheet(isPresented: $showSheet) { Text("Aaaa") } } } #Preview { NavigationStack { PickerBug() } } Uncomment .symbolRenderingMode(.palette) show the picker and the app freezes. Xcode, Preview and Simulator, i could not test on a real device.
0
0
177
Aug ’25
Black flash when deleting list row during zoom + fullScreenCover transition in Light mode
[Submitted as FB20978913] When using .navigationTransition(.zoom) with a fullScreenCover, deleting the source item from the destination view causes a brief black flash during the dismiss animation. This is only visible in Light mode. REPRO STEPS Build and run the sample code below. Set the device to Light mode. Tap any row to open its detail view. In the detail view, tap Delete. Watch the dismiss animation as the list updates. EXPECTED The zoom transition should return smoothly to the list with no dark or black flash. ACTUAL A visible black flash appears over the deleted row during the collapse animation. It starts black, shortens, and fades out in sync with the row-collapse motion. The flash lasts about five frames and is consistently visible in Light mode. NOTES Occurs only when deleting from the presented detail view. Does not occur when deleting directly from the list. Does not occur or is not visible in Dark mode. Reproducible on both simulator and device. Removing .navigationTransition(.zoom) or using .sheet instead of .fullScreenCover avoids the issue. SYSTEM INFO Version 26.1 (17B55) iOS 26.1 Devices: iPhone 17 Pro simulator, iPhone 13 Pro hardware Appearance: Light Reproducible 100% of the time SAMPLE CODE import SwiftUI struct ContentView: View { @State private var items = (0..<20).map { Item(id: $0, title: "Item \($0)") } @State private var selectedItem: Item? @Namespace private var ns var body: some View { NavigationStack { List { ForEach(items) { item in Button { selectedItem = item } label: { HStack { Text(item.title) Spacer() } .padding(.vertical, 8) .contentShape(Rectangle()) } .buttonStyle(.plain) .matchedTransitionSource(id: item.id, in: ns) .swipeActions { Button(role: .destructive) { delete(item) } label: { Label("Delete", systemImage: "trash") } } } } .listStyle(.plain) .navigationTitle("Row Delete Issue") .navigationSubtitle("In Light mode, tap item then tap Delete to see black flash") .fullScreenCover(item: $selectedItem) { item in DetailView(item: item, ns: ns) { delete(item) selectedItem = nil } } } } private func delete(_ item: Item) { withAnimation { items.removeAll { $0.id == item.id } } } } struct DetailView: View { let item: Item let ns: Namespace.ID let onDelete: () -> Void @Environment(\.dismiss) private var dismiss var body: some View { NavigationStack { VStack(spacing: 30) { Text(item.title) Button("Delete", role: .destructive, action: onDelete) } .navigationTitle("Detail") .toolbar { Button("Close") { dismiss() } } } .navigationTransition(.zoom(sourceID: item.id, in: ns)) } } struct Item: Identifiable, Hashable { let id: Int let title: String } SCREEN RECORDING
0
0
82
Nov ’25
TabView Background Color
Hello I'm trying to use a TabView inside of the Sidebar in a NavigationSplitView. I'm wanting to use .listStyle(.sidebar) in order to get the Liquid Glass effect. However I can not find a way to remove the background of the TabView without changing the behavior of the TabView itself to paging with .tabViewStyle(.page) NavigationSplitView { TabView( selection: .constant("List") ) { Tab(value: "List") { List { Text("List") } } } } detail: { } Note: I wanting change the background of the TabView container itself. Not the TabBar.
0
0
142
Nov ’25
`Invalid frame dimension (negative or non-finite)` on iPhone 12 mini
Hi everyone, I’m encountering the following error when displaying a TextField inside a Form together with a ToolbarItem(placement: .keyboard): Invalid frame dimension (negative or non-finite). Environment This issue reproduces on iPhone 12 mini (iOS 18.6). The same code does not reproduce on iPhone 15. I confirmed that explicitly constraining the size of the TextField or Text with .frame(width:height:) does not resolve the issue. Minimal Reproducible Example import SwiftUI struct Test: View { @State var value: Int = 0 var body: some View { Form { TextField("0", value: $value, format: .number) } .toolbar { ToolbarItem(placement: .keyboard) { Text("Close") } } } } Has anyone else encountered this issue? Is this a known bug, or is there a recommended workaround for devices with smaller screen widths such as the iPhone 12 mini? Thanks in advance for your help! Best regards, Naoya Ozawa
Topic: UI Frameworks SubTopic: SwiftUI
0
0
111
Aug ’25
How to replicate Mail toolbar
The toolbar in the the Mail app uses seems to force a .soft scrollEdgeEffectStyle, however I can't seem to reproduce this. Even when putting .scrollEdgeEffectStyle(.soft, for: .top) all over my code, a NavigationSplitView seems to force a "classic" toolbar. Example, top is the mail app, bottom is my swiftUI app:
0
0
155
Jul ’25
iOS 26 ScrollView with static background image
I need a layout where I have a ScrollView with some content, and ScrollView has full screen background image. Screen is pushed as detail on stack. When my screen is pushed we display navigation bar. We want a new scrollEdgeEffectStyle .soft style work. But when we scroll the gradient blur effect bellow bars is fixed to top and bottom part of the scroll view background image and is not transparent. However when content underneath navigation bar is darker and navigation bar changes automatically to adapt content underneath the final effect looks as expected doesn't use background image. Expected bahaviour for us is that the effect under the navigation bar would not use background image but would be transparent based on content underneath. This is how it is intialy when user didn't interact with the screen: This is how it looks when user scrolls down: This is how it looks when navigation bar adapts to dark content underneath: Minimal code to reproduce this behaviour: import SwiftUI @main struct SwiftUIByExampleApp: App { var body: some Scene { WindowGroup { ContentView() } } } struct ContentView: View { var body: some View { NavigationStack { ScrollView(.vertical) { VStack(spacing: 0.0) { ForEach(1 ..< 101, id: \.self) { i in HStack { Text("Row \(i)") Spacer() } .frame(height: 50) .background(Color.random) } } } .scrollEdgeEffectStyle(.soft, for: .all) .scrollContentBackground(.hidden) .toolbar { ToolbarItem(placement: .title) { Label("My Awesome App", systemImage: "sparkles") .labelStyle(.titleAndIcon) } } .toolbarRole(.navigationStack) .background( ZStack { Color.white .ignoresSafeArea() Image(.sea) .resizable() .ignoresSafeArea() .scaledToFill() } ) } } } extension Color { static var random: Color { Color( red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1) ) } } We've also tried using ZStack instead of .background modifier but we observed the same results. We want to basically achieve the same effect as showcased here, but with the static background image: https://youtu.be/3MugGCtm26A?si=ALG29NqX1jAMacM5&t=634
0
0
245
Jul ’25
FileExporter's action label always says "Move"
I would like to implement an "Export" dialog using the .fileExporter() view modifier. The following code works correctly, but the FileExporter's action label always says "Move", which is inappropriate for the context. I would like to change it to say "Export", "Save", "Save as", or anything semantically correct. Button("Browse") { showingExporter = true } .buttonStyle(.borderedProminent) .fileExporter( isPresented: $showingExporter, document: document, contentType: .data, defaultFilename: suggestedFilename ?? fileUrl.pathComponents.last ?? "Untitled" ) { result in switch result { case .success(let url): print("Saved to \(url)") onSuccess() case .failure(let error): print(error.localizedDescription) onError(error) } } "document" is a custom FileDocument with a fileWrapper() method implemented like this: func fileWrapper(configuration: WriteConfiguration) throws -> FileWrapper { return FileWrapper(regularFileWithContents: data) } This was tested on iOS 26 beta 3.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
124
Jul ’25
Lack of API to access scrubber preview time in AVPlayerViewController (scrubbingTime)
Hi everyone, I'm working with AVPlayerViewController in a tvOS/iOS app and ran into a limitation that I believe some developers face. When using player.currentItem?.currentTime(), we only get the playback time—which is fine while the video is playing. But when the player is paused and the user drags the scrubber, there's no public API to get the time that is currently being previewed under the scrubber thumb (stick), but there's no way to read it programmatically. This becomes a problem when trying to show thumbnail previews or display metadata tied to the scrubbed position.
Topic: UI Frameworks SubTopic: SwiftUI Tags:
0
1
103
Jun ’25
PKPass Framework
I am trying to work with the data inside the barcode string in shared PKPass. The documentation shows that is should look for @property (nonatomic, readonly, nullable) PKBarcode *primaryBarcode; I have tried to use it like this guard let code = pass.primaryBarcode?.message else { return } I get a constant message that PKPass has no member primaryBarcode The PKPass.h file in my IOS SDK does not seem to include the @property primaryBarcode or @property barcode. I am running Xcode 16.4 (16F6) and my app target is 17.6 + Is there a restriction on this property? I cannot find an SDK later than mine - the App Store does not offer one. I am unsure of this is a public or private issue - does anyone know? Thanks for reading this. Max
Topic: UI Frameworks SubTopic: SwiftUI
0
0
100
Jun ’25
SwiftUI WebView in sheet not honoring swipe to dismiss
I’ve got the new SwiftUi webview in a sheet. When I pull down the contents from the top of the page I expect it to dismiss the sheet, but it does not. Is there a workaround or modifier I’m missing?
Replies
0
Boosts
0
Views
171
Activity
Aug ’25
Menu view flashes white before closing when device is set to dark appearance
Feedback ID: FB19846667 When dismissing a Menu view when the device is set to dark appearance, there is a flash of lightness that is distracting and feels unnatural. This becomes an issue for apps that rely on the user interacting with Menu views often. When using the overflow menu on a toolbar, the effect of dismissing the menu is a lot more natural and there is less flashing. I expect a similar visual effect when creating Menu views outside of a toolbar. Has anyone found a way around this somehow? Comparison between dismissing a menu and a toolbar overflow: https://www.youtube.com/shorts/H2gUQOwos3Y Slowed down version of dismissing a menu with a visible light flash: https://www.youtube.com/shorts/MBCCkK-GfqY
Replies
0
Boosts
0
Views
201
Activity
Aug ’25
[SwiftUI] Gesture Conflict: simultaneousGesture Causes Incorrect Gesture Recognition in iOS 18
Subject: SwiftUI Gesture Conflict in iOS 18: Simultaneous Recognition of Drag and Tap Gestures Description: In SwiftUI on iOS 18 and above, we've identified an issue with gesture handling that affects user experience. When implementing .simultaneousGesture(DragGesture()), the system incorrectly recognizes and processes both drag and tap gestures concurrently, resulting in unintended behavior. Technical Details: Environment: SwiftUI, iOS 18+ Issue: Simultaneous recognition of horizontal drag gestures and vertical scroll/tap gestures Current Behavior: Both vertical and horizontal scrolling occur simultaneously when using .simultaneousGesture(DragGesture()) Expected Behavior: Gestures should be properly disambiguated to prevent concurrent scrolling in multiple directions Impact: This behavior significantly impacts user experience, particularly in custom carousel implementations and other UI components that rely on precise gesture handling. The simultaneous recognition of both gestures creates a confusing and unpredictable interaction pattern. Steps to Reproduce: Create a SwiftUI view with horizontal scrolling (e.g., custom carousel) Implement .simultaneousGesture(DragGesture()) Add tap gesture recognition to child views Run on iOS 18 Attempt to scroll horizontally Observed Result: Both horizontal dragging and vertical scrolling/tapping are recognized and processed simultaneously, creating an inconsistent user experience. Expected Result: The system should properly disambiguate between horizontal drag gestures and vertical scroll/tap gestures, allowing only one type of gesture to be recognized at a time based on the user's intent. Please let me know if you need any additional information or reproduction steps.
Replies
0
Boosts
0
Views
131
Activity
Apr ’25
gesture(LongPressGesture()) issue with scroll view
I've being playing aground with long press gesture in scroll view and noticed gesture(LongPressGesture()) doesn't seem to work with scroll view's scrolling which doesn't seem to be the intended behavior to me. Take the following example: the blue rectangle is modified with onLongPressGesture and the red rectangle is modified with LongPressGesture (_EndedGesture<LongPressGesture> to be specific). ScrollView { Rectangle() .fill(.blue) .frame(width: 200, height: 200) .onLongPressGesture { print("onLongPressGesture performed") } onPressingChanged: { _ in print("onLongPressGesture changed") } .overlay { Text("onLongPressGesture") } Rectangle() .fill(.red) .frame(width: 200, height: 200) .gesture(LongPressGesture() .onEnded { _ in print("gesture ended") }) .overlay { Text("gesture(LongPressGesture)") } } If you start scrolling from either of the rectangles (that is, start scrolling with your finger on either of the rectangles), the ScrollView will scroll. However, if LongPressGesture is modified with either onChanged or .updating, ScrollView won't respond to scroll if the scroll is started from red rectangle. Even setting the maximumDistance to 0 won't help. As for its counter part onLongPressGesture, even though onPressingChanged to onLongPressGesture, scrolling still works if it's started from onLongPressGesture modified view. ScrollView { Rectangle() .fill(.blue) .frame(width: 200, height: 200) .onLongPressGesture { print("onLongPressGesture performed") } onPressingChanged: { _ in print("onLongPressGesture changed") } .overlay { Text("onLongPressGesture") } Rectangle() .fill(.red) .frame(width: 200, height: 200) .gesture(LongPressGesture(maximumDistance: 0) // scroll from the red rectangle won't work if I add either `updating` or `onChanged` but I put both here just to demonstrate // you will need to add `@GestureState private var isPressing = false` to your view body .updating($isPressing) { value, state, transaction in state = value print("gesture updating") } .onChanged { value in print("gesture changed") } .onEnded { _ in print("gesture ended") }) .overlay { Text("gesture(LongPressGesture)") } } This doesn't seem right to me. I would expect the view modified by LongPressGesture(), no matter if the gesture has onChanged or updating, should be able to start scroll in a scroll view, just like onLongPressGesture. I observed this behavior in a physical device running iOS 26.1, and I do not know the behavior on other versions.
Replies
0
Boosts
0
Views
88
Activity
Nov ’25
SwiftUI iOS 16 TabView PageTabViewStyle index behavior is wrong for right to left layoutDirection
TabView page control element has a bug on iOS 16 if tabview is configured as RTL with PageTabViewStyle. Found iOS 16 Issues: Page indicators display dots in reverse order (appears to treat layout as LTR while showing RTL) Index selection is reversed - tapping indicators selects wrong pages Using the page control directly to navigate eventually breaks the index binding The underlying index counting logic conflicts with the visual presentation iOS 18 Behavior: Works as expected with correct dot order and index selection. Xcode version: Version 16.3 (16E140) Conclusion: Confirmed broken on iOS 16 Confirmed working on iOS 18 iOS 17 and earlier versions not yet tested I've opened a feedback assistant ticket quite a while ago but there is no answer. There's a code example and a video there. Anyone else had experience with this particular bug? Here's the code: public struct PagingView<Content: View>: View { //MARK: - Public Properties let pages: (Int) -> Content let numberOfPages: Int let pageMargin: CGFloat @Binding var currentPage: Int //MARK: - Object's Lifecycle public init(currentPage: Binding<Int>, pageMargin: CGFloat = 20, numberOfPages: Int, @ViewBuilder pages: @escaping (Int) -> Content) { self.pages = pages self.numberOfPages = numberOfPages self.pageMargin = pageMargin _currentPage = currentPage } //MARK: - View's Layout public var body: some View { TabView(selection: $currentPage) { ForEach(0..<numberOfPages, id: \.self) { index in pages(index) .padding(.horizontal, pageMargin) } } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always)) .ignoresSafeArea() } } //MARK: - Previews struct ContentView: View { @State var currentIndex: Int = 0 var body: some View { ZStack { Rectangle() .frame(height: 300) .foregroundStyle(Color.gray.opacity(0.2)) PagingView( currentPage: $currentIndex.onChange({ index in print("currentIndex: ", index) }), pageMargin: 20, numberOfPages: 10) { index in ZStack { Rectangle() .frame(width: 200, height: 200) .foregroundStyle(Color.gray.opacity(0.2)) Text("\(index)") .foregroundStyle(.brown) .background(Color.yellow) } }.frame(height: 200) } } } #Preview("ContentView") { ContentView() } extension Binding { @MainActor func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> { Binding( get: { self.wrappedValue }, set: { newValue in self.wrappedValue = newValue handler(newValue) } ) } }
Replies
0
Boosts
0
Views
128
Activity
Aug ’25
ControlWidget Gallery doesn't show custom SF Symbols
After reinstalling the App,the ControlWidget Gallery doesn't show custom SF Symbols
Replies
0
Boosts
0
Views
82
Activity
Aug ’25
unable to click when ZoomNavigationTransition finished
I am using ".navigationTransition(ZoomNavigationTransition.zoom(sourceID: xxx, in: xxx))" to zooms the appearing view from a source view . When the appearing view dismissed, I can only click other view after a delay . It seems that the transition is not finished immediately when the appearing view dismissed . After a delay, the transition finished, than I can click other view. struct ContentView: View { @State private var path: NavigationPath = NavigationPath() @Namespace private var namespace var body: some View { NavigationStack(path: $path) { VStack(spacing: 0) { ForEach(["aaa", "bbb"], id: \.self) { string in Text(string) .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2) .contentShape(Rectangle()) .onTapGesture { path.append(string) } .matchedTransitionSource(id: string, in: namespace) } } .navigationDestination(for: String.self, destination: { route in Text(route) .navigationTransition(ZoomNavigationTransition.zoom(sourceID: route, in: namespace)) }) } } } When using sheet on appearing view, It seems that the transition is finished immediately when the appearing view dismissed. extension String: Identifiable { public var id: String { return self } } struct ContentView: View { @State private var path: NavigationPath = NavigationPath() @Namespace private var namespace @State private var stringToSheet: String? var body: some View { NavigationStack(path: $path) { VStack(spacing: 0) { ForEach(["aaa", "bbb"], id: \.self) { string in Text(string) .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2) .contentShape(Rectangle()) .onTapGesture { stringToSheet = string } .matchedTransitionSource(id: string, in: namespace) } } .sheet(item: $stringToSheet) { newValue in Text(newValue) .navigationTransition(ZoomNavigationTransition.zoom(sourceID: newValue, in: namespace)) } } } }
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
78
Activity
Jun ’25
Ignore Home Screen Tint/Accents in Colored Components
I'm having some trouble getting my widget to display how I want when the user has a tint applied to their home screen. The issue I'm having is with a Text() element, as well as a LinearGradient I am displaying on top of my image. The text should always be white, and the gradient is always black with varying levels of opacity. I've managed to fix this issue with images displayed in my widget by leveraging widgetAccentedRenderingMode(.fullColor) however, there does not seem to be an equivalent of this for non-Image components. I'm aware of .widgetAccentable(false) but as I understand it, elements are already considered not accentable by default and you need to explicitly declare widgetAccentable(true) to add them to the accent group. I've tried specifying this to be false up and down my view hierarchy just to see if something will stick but no luck. Are there any other levers I can pull to preserve the declared colors for my text and gradient components? The images I am displaying is album artwork where preserving the original image is integral, but the tinted text color and overlaid gradient often clash or just looks bad in general. Is there a solution for colored primitive elements?
Replies
0
Boosts
0
Views
144
Activity
Aug ’25
iOS 17 Bug? Adding a .sheet to a .fullscreencover makes background opaque
I am working on creating a custom Popup View based on a .fullscreenCover. The .fullscreenCover is used to place the Popup content on screen on a semi-transparent background. While this works on iOS 18, there is a problem on iOS 17: When the Popup content contains a .sheet, the background is not transparent any more but opaque. Image: iOS 17. When showing the Popup an opaque background covers the main content. When tapping on the background it turns transparent. Image: iOS 18. Everything works as intended. When showing the Popup the main background is covered with a semi-transparent background. Removing the .sheet(...) from the Popup content solves the problem. It does not matter if the sheet is used or not. Adding it to the view code is enough to trigger the problem. Using a .sheet within a .fullscreenCover should not be a problem as far as I know. Is this a bug in iOS 17 or is there something wrong with my code? Code: struct SwiftUIView: View { @State var isPresented: Bool = false @State var sheetPresented: Bool = false var body: some View { ZStack { VStack { Color.red.frame(maxHeight: .infinity) Color.green.frame(maxHeight: .infinity) Color.yellow.frame(maxHeight: .infinity) Color.blue.frame(maxHeight: .infinity) } Button("Show") { isPresented = true } .padding() .background(.white) Popup(isPresented: $isPresented) { VStack { Button("Dismiss") { isPresented = false } } .frame(maxWidth: 300) .padding() .background( RoundedRectangle(cornerRadius: 20) .fill(.white) ) .sheet(isPresented: $sheetPresented) { Text("Hallo") } } } } } struct Popup<Content: View>: View { @Binding var isPresented: Bool let content: () -> Content init(isPresented: Binding<Bool>, @ViewBuilder _ content: @escaping () -> Content) { _isPresented = isPresented self.content = content } @State private var internalIsPresented: Bool = false @State private var isShowing: Bool = false let transitionDuration: TimeInterval = 0.5 var body: some View { ZStack { } .fullScreenCover(isPresented: $internalIsPresented) { VStack { content() } .frame(maxWidth: .infinity, maxHeight: .infinity) .background( Color.black.opacity(0.5) .opacity(isShowing ? 1 : 0) .animation(.easeOut(duration: transitionDuration), value: isShowing) .ignoresSafeArea() ) .presentationBackground(.clear) .onAppear { isShowing = true } .onDisappear { isShowing = false } } .onChange(of: isPresented) { _ in withoutAnimation { internalIsPresented = isPresented } } } } extension View { func withoutAnimation(action: @escaping () -> Void) { var transaction = Transaction() transaction.disablesAnimations = true withTransaction(transaction) { action() } } }
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
107
Activity
May ’25
How to obtain the physical memory size of VisionPro and how much memory is currently available
How to obtain the physical memory size of VisionPro and how much memory is currently available
Replies
0
Boosts
0
Views
135
Activity
Aug ’25
How to customize item transitions inside a Picker View?
I have a simple Picker where the options available change by the view state. I would like to have the transition animated but the default animation is not good so I tried setting a .transition() and or an .animation() inside an item on the picker but it is ignored. The same happens if the transition is set on the picker itself since it's always present. Am I doing it right and is just not posible or is there something else to do? Code to reproduce the issue: struct ContentView: View { @State var list: [String] = [ "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", ] @State var selected: String? @State var toggle: Bool = false var body: some View { VStack { Picker("List", selection: $selected) { ForEach(list, id: \.self) { Text($0).tag($0) // .transition(.opacity) } } .pickerStyle(.segmented) // .transition(.opacity) HStack { Button(action: swapOptions) { Text("Swap") } } } .padding() } } extension ContentView { func swapOptions() { withAnimation { toggle.toggle() switch toggle { case true: list = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", ] case false: list = [ "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", ] } } } } ``
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
99
Activity
May ’25
iOS 26 Beta 5 SwiftUI Picker(.pickerStyle(.segmented)) + Images(.symbolRenderingMode(.palette)) + Sheet = Freeze
App freezes when using a SwiftUI Picker with pickerStyle(.segment), Images with .symbolRenderingMode(.palette) and try to show a sheet. import SwiftUI enum Sample: String, CaseIterable, Identifiable { case aaa, bbb, ccc, ddd var id: Self { self } var image: Image { switch self { case .aaa: Image(systemName: "square.stack.3d.up.fill") case .bbb: Image(systemName: "square.and.arrow.up") case .ccc: Image(systemName: "square.and.arrow.up.fill") case .ddd: Image(systemName: "square.and.arrow.down") } } } struct PickerBug: View { @State private var selected: Sample = .aaa @State var showSheet = false var body: some View { List { Section { VStack { Picker("Qqq", selection: $selected) { ForEach(Sample.allCases) { sample in sample.image // .symbolRenderingMode(.palette) .foregroundStyle(.black) } } .pickerStyle(.segmented) } } Text("Aaa") } .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { showSheet.toggle() } label: { Text("A") } } } .sheet(isPresented: $showSheet) { Text("Aaaa") } } } #Preview { NavigationStack { PickerBug() } } Uncomment .symbolRenderingMode(.palette) show the picker and the app freezes. Xcode, Preview and Simulator, i could not test on a real device.
Replies
0
Boosts
0
Views
177
Activity
Aug ’25
Black flash when deleting list row during zoom + fullScreenCover transition in Light mode
[Submitted as FB20978913] When using .navigationTransition(.zoom) with a fullScreenCover, deleting the source item from the destination view causes a brief black flash during the dismiss animation. This is only visible in Light mode. REPRO STEPS Build and run the sample code below. Set the device to Light mode. Tap any row to open its detail view. In the detail view, tap Delete. Watch the dismiss animation as the list updates. EXPECTED The zoom transition should return smoothly to the list with no dark or black flash. ACTUAL A visible black flash appears over the deleted row during the collapse animation. It starts black, shortens, and fades out in sync with the row-collapse motion. The flash lasts about five frames and is consistently visible in Light mode. NOTES Occurs only when deleting from the presented detail view. Does not occur when deleting directly from the list. Does not occur or is not visible in Dark mode. Reproducible on both simulator and device. Removing .navigationTransition(.zoom) or using .sheet instead of .fullScreenCover avoids the issue. SYSTEM INFO Version 26.1 (17B55) iOS 26.1 Devices: iPhone 17 Pro simulator, iPhone 13 Pro hardware Appearance: Light Reproducible 100% of the time SAMPLE CODE import SwiftUI struct ContentView: View { @State private var items = (0..<20).map { Item(id: $0, title: "Item \($0)") } @State private var selectedItem: Item? @Namespace private var ns var body: some View { NavigationStack { List { ForEach(items) { item in Button { selectedItem = item } label: { HStack { Text(item.title) Spacer() } .padding(.vertical, 8) .contentShape(Rectangle()) } .buttonStyle(.plain) .matchedTransitionSource(id: item.id, in: ns) .swipeActions { Button(role: .destructive) { delete(item) } label: { Label("Delete", systemImage: "trash") } } } } .listStyle(.plain) .navigationTitle("Row Delete Issue") .navigationSubtitle("In Light mode, tap item then tap Delete to see black flash") .fullScreenCover(item: $selectedItem) { item in DetailView(item: item, ns: ns) { delete(item) selectedItem = nil } } } } private func delete(_ item: Item) { withAnimation { items.removeAll { $0.id == item.id } } } } struct DetailView: View { let item: Item let ns: Namespace.ID let onDelete: () -> Void @Environment(\.dismiss) private var dismiss var body: some View { NavigationStack { VStack(spacing: 30) { Text(item.title) Button("Delete", role: .destructive, action: onDelete) } .navigationTitle("Detail") .toolbar { Button("Close") { dismiss() } } } .navigationTransition(.zoom(sourceID: item.id, in: ns)) } } struct Item: Identifiable, Hashable { let id: Int let title: String } SCREEN RECORDING
Replies
0
Boosts
0
Views
82
Activity
Nov ’25
TabView Background Color
Hello I'm trying to use a TabView inside of the Sidebar in a NavigationSplitView. I'm wanting to use .listStyle(.sidebar) in order to get the Liquid Glass effect. However I can not find a way to remove the background of the TabView without changing the behavior of the TabView itself to paging with .tabViewStyle(.page) NavigationSplitView { TabView( selection: .constant("List") ) { Tab(value: "List") { List { Text("List") } } } } detail: { } Note: I wanting change the background of the TabView container itself. Not the TabBar.
Replies
0
Boosts
0
Views
142
Activity
Nov ’25
`Invalid frame dimension (negative or non-finite)` on iPhone 12 mini
Hi everyone, I’m encountering the following error when displaying a TextField inside a Form together with a ToolbarItem(placement: .keyboard): Invalid frame dimension (negative or non-finite). Environment This issue reproduces on iPhone 12 mini (iOS 18.6). The same code does not reproduce on iPhone 15. I confirmed that explicitly constraining the size of the TextField or Text with .frame(width:height:) does not resolve the issue. Minimal Reproducible Example import SwiftUI struct Test: View { @State var value: Int = 0 var body: some View { Form { TextField("0", value: $value, format: .number) } .toolbar { ToolbarItem(placement: .keyboard) { Text("Close") } } } } Has anyone else encountered this issue? Is this a known bug, or is there a recommended workaround for devices with smaller screen widths such as the iPhone 12 mini? Thanks in advance for your help! Best regards, Naoya Ozawa
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
111
Activity
Aug ’25
How to replicate Mail toolbar
The toolbar in the the Mail app uses seems to force a .soft scrollEdgeEffectStyle, however I can't seem to reproduce this. Even when putting .scrollEdgeEffectStyle(.soft, for: .top) all over my code, a NavigationSplitView seems to force a "classic" toolbar. Example, top is the mail app, bottom is my swiftUI app:
Replies
0
Boosts
0
Views
155
Activity
Jul ’25
iOS 26 ScrollView with static background image
I need a layout where I have a ScrollView with some content, and ScrollView has full screen background image. Screen is pushed as detail on stack. When my screen is pushed we display navigation bar. We want a new scrollEdgeEffectStyle .soft style work. But when we scroll the gradient blur effect bellow bars is fixed to top and bottom part of the scroll view background image and is not transparent. However when content underneath navigation bar is darker and navigation bar changes automatically to adapt content underneath the final effect looks as expected doesn't use background image. Expected bahaviour for us is that the effect under the navigation bar would not use background image but would be transparent based on content underneath. This is how it is intialy when user didn't interact with the screen: This is how it looks when user scrolls down: This is how it looks when navigation bar adapts to dark content underneath: Minimal code to reproduce this behaviour: import SwiftUI @main struct SwiftUIByExampleApp: App { var body: some Scene { WindowGroup { ContentView() } } } struct ContentView: View { var body: some View { NavigationStack { ScrollView(.vertical) { VStack(spacing: 0.0) { ForEach(1 ..< 101, id: \.self) { i in HStack { Text("Row \(i)") Spacer() } .frame(height: 50) .background(Color.random) } } } .scrollEdgeEffectStyle(.soft, for: .all) .scrollContentBackground(.hidden) .toolbar { ToolbarItem(placement: .title) { Label("My Awesome App", systemImage: "sparkles") .labelStyle(.titleAndIcon) } } .toolbarRole(.navigationStack) .background( ZStack { Color.white .ignoresSafeArea() Image(.sea) .resizable() .ignoresSafeArea() .scaledToFill() } ) } } } extension Color { static var random: Color { Color( red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1) ) } } We've also tried using ZStack instead of .background modifier but we observed the same results. We want to basically achieve the same effect as showcased here, but with the static background image: https://youtu.be/3MugGCtm26A?si=ALG29NqX1jAMacM5&t=634
Replies
0
Boosts
0
Views
245
Activity
Jul ’25
FileExporter's action label always says "Move"
I would like to implement an "Export" dialog using the .fileExporter() view modifier. The following code works correctly, but the FileExporter's action label always says "Move", which is inappropriate for the context. I would like to change it to say "Export", "Save", "Save as", or anything semantically correct. Button("Browse") { showingExporter = true } .buttonStyle(.borderedProminent) .fileExporter( isPresented: $showingExporter, document: document, contentType: .data, defaultFilename: suggestedFilename ?? fileUrl.pathComponents.last ?? "Untitled" ) { result in switch result { case .success(let url): print("Saved to \(url)") onSuccess() case .failure(let error): print(error.localizedDescription) onError(error) } } "document" is a custom FileDocument with a fileWrapper() method implemented like this: func fileWrapper(configuration: WriteConfiguration) throws -> FileWrapper { return FileWrapper(regularFileWithContents: data) } This was tested on iOS 26 beta 3.
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
124
Activity
Jul ’25
Lack of API to access scrubber preview time in AVPlayerViewController (scrubbingTime)
Hi everyone, I'm working with AVPlayerViewController in a tvOS/iOS app and ran into a limitation that I believe some developers face. When using player.currentItem?.currentTime(), we only get the playback time—which is fine while the video is playing. But when the player is paused and the user drags the scrubber, there's no public API to get the time that is currently being previewed under the scrubber thumb (stick), but there's no way to read it programmatically. This becomes a problem when trying to show thumbnail previews or display metadata tied to the scrubbed position.
Topic: UI Frameworks SubTopic: SwiftUI Tags:
Replies
0
Boosts
1
Views
103
Activity
Jun ’25
PKPass Framework
I am trying to work with the data inside the barcode string in shared PKPass. The documentation shows that is should look for @property (nonatomic, readonly, nullable) PKBarcode *primaryBarcode; I have tried to use it like this guard let code = pass.primaryBarcode?.message else { return } I get a constant message that PKPass has no member primaryBarcode The PKPass.h file in my IOS SDK does not seem to include the @property primaryBarcode or @property barcode. I am running Xcode 16.4 (16F6) and my app target is 17.6 + Is there a restriction on this property? I cannot find an SDK later than mine - the App Store does not offer one. I am unsure of this is a public or private issue - does anyone know? Thanks for reading this. Max
Topic: UI Frameworks SubTopic: SwiftUI
Replies
0
Boosts
0
Views
100
Activity
Jun ’25