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?

I’m developing an iOS app, and I’ve noticed that when the user enables Accessibility → Display & Text Size → Color Filters → Grayscale, my app icon loses a lot of visual contrast. The original colored version looks fine, but in grayscale it appears “flat” and harder to distinguish, unlike a pure black-and-white design. What I want to achieve: Ensure the app icon remains visually clear and high-contrast even when iOS renders it in grayscale. Ideally, provide an alternate “high-contrast” app icon version when grayscale mode is enabled. What I’ve tried: Increased color contrast in the original icon design. Added outlines and stronger shapes. Tested with grayscale filters in design tools. Researched Asset Catalog and alternate icons, but found no documented API to detect or respond to grayscale mode. Questions: Is there any API in iOS that allows detecting when the system is in grayscale mode so that I can programmatically switch to an alternate app icon? If not, are there Apple-recommended best practices for designing app icons that still look clear in grayscale? Are there any accessibility guidelines specifically addressing icon design for grayscale or color-blind modes? Additional info: iOS version tested: iOS 17.5 Development in Swift + SwiftUI, using Asset Catalog for icons. I am aware that iOS supports alternate icons via setAlternateIconName, but I haven’t found a trigger for grayscale mode.

Context & Issue I am developing an iOS application. My app icon uses colors that are relatively close to each other. When the user enables Accessibility → Display & Text Size → Color Filters → Grayscale (or similar modes), the icon becomes harder to distinguish because it loses color and contrast is reduced. Goal When iOS switches to grayscale mode, I want the app icon to maintain good contrast between its elements so it remains clearly recognizable. What I’ve tried Redesigned the icon with more contrasting colors. Added strokes/outlines, but it still doesn’t look much better in grayscale. Researched how iOS renders app icons when grayscale is enabled, but couldn’t find a way to override or provide an alternative icon. Specific questions Is there any API or mechanism in iOS that allows providing a different version of the app icon when the user has grayscale mode enabled? If there’s no direct API, are there any best practices for designing iOS app icons to ensure good contrast when converted to grayscale? Do we have to design grayscale version for app icon? Thank you!

On iOS 26 not able to control size of UITabBar. Sharing code below. Colour is applying correctly but somehow _UITabBarPlatterView which turns out as TabBar is not extending; leaving spaces on left, right & bottom sides. class CustomTabBar: UITabBar { override init(frame: CGRect) { super.init(frame: frame) backgroundColor = .red let firstItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0) let secondItem = UITabBarItem(title: "Search", image: UIImage(systemName: "magnifyingglass"), tag: 1) let thirdItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person.circle"), tag: 2) items = [firstItem, secondItem, thirdItem] selectedItem = firstItem } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } class ViewController: UIViewController { let tabBar: CustomTabBar = { let tb = CustomTabBar() tb.translatesAutoresizingMaskIntoConstraints = false return tb }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemBackground view.addSubview(tabBar) NSLayoutConstraint.activate([ tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25), tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -25), tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) ]) } } when specifying height in CustomTabBar explicitly... func alignInternalSubViews() { subviews.forEach { subView in subView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ subView.topAnchor.constraint(equalTo: topAnchor), subView.leadingAnchor.constraint(equalTo: leadingAnchor), subView.trailingAnchor.constraint(equalTo: trailingAnchor), subView.bottomAnchor.constraint(equalTo: bottomAnchor), subView.heightAnchor.constraint(equalToConstant: 62) ]) } } What should I need to do in order to get this capsule _UITabBarPlatterView and its subviews resize accordingly?

I currently have a custom UITextView that properly changes the color of a link to the custom color I have set, however, when I click and hold the link, and the animation plays that makes the link bigger and creates a boarder around the link before previewing the website, the link changes briefly back to the system default color, and when letting go, it changes back to my custom color. Is there anyway to have the link always be my custom color, even when clicking and holding? struct AutoDetectedClickableDataView: UIViewRepresentable { let text: String let dataDetectors: UIDataDetectorTypes @Binding var height: CGFloat private func dataDectectorValue(_ dataDectecor: UIDataDetectorTypes) -> UInt64 { var checkingTypes: [NSTextCheckingResult.CheckingType] = [] if dataDetectors.contains(.phoneNumber) { checkingTypes.append(.phoneNumber) } if dataDetectors.contains(.link) { checkingTypes.append(.link) } if dataDetectors.contains(.address) { checkingTypes.append(.address) } if dataDetectors.contains(.calendarEvent) { checkingTypes.append(.date) } if checkingTypes.isEmpty { return 0 } let intCheckingTypes: UInt64 = checkingTypes.reduce(0) { result, checkingType in UInt64(result) | UInt64(checkingType.rawValue) } return intCheckingTypes } func makeUIView(context: Context) -> UITextView { let textView = UITextView() textView.dataDetectorTypes = dataDetectors textView.isEditable = false textView.isScrollEnabled = false textView.backgroundColor = .clear textView.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: textView.traitCollection) textView.textColor = UIColor.label textView.adjustsFontForContentSizeCategory = true textView.textContainer.lineBreakMode = .byWordWrapping textView.textContainerInset = .zero textView.textContainer.lineFragmentPadding = 0 textView.translatesAutoresizingMaskIntoConstraints = false textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal) textView.setContentHuggingPriority(.defaultHigh, for: .horizontal) textView.linkTextAttributes = [.foregroundColor: JeromesColors.UILinkColor] textView.tintColor = JeromesColors.UILinkColor for gesture in textView.gestureRecognizers ?? [] { if gesture is UITapGestureRecognizer { gesture.view?.tintColor = JeromesColors.UILinkColor } } return textView } func updateUIView(_ uiView: UITextView, context: Context) { let font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: uiView.traitCollection) let color = UIColor.label let attributed = NSMutableAttributedString(string: text, attributes: [ .font: font, .foregroundColor: color ]) let detectorValue = dataDectectorValue(dataDetectors) var matchCount = 0 if !dataDetectors.isEmpty, detectorValue != 0 { let detector = try? NSDataDetector(types: detectorValue) detector?.enumerateMatches(in: text, options: [], range: NSRange(location: 0, length: text.utf16.count)) { match, _, _ in guard let match = match else { return } if match.resultType == .date, let date = match.date, date < Date() { return } else { attributed.addAttributes([ .foregroundColor: JeromesColors.UILinkColor, .underlineStyle: NSUnderlineStyle.single.rawValue, ], range: match.range) matchCount += 1 } } } uiView.attributedText = attributed if matchCount == 0 { uiView.isSelectable = false } else if matchCount > 0 { uiView.isSelectable = true } DispatchQueue.main.async { uiView.layoutIfNeeded() let fittingSize = CGSize(width: uiView.bounds.width, height: .greatestFiniteMagnitude) let size = uiView.sizeThatFits(fittingSize) height = size.height } } }

Hi all, After upgrading to the iOS 26 beta, the scrolling in my SwiftUI chat view is completely broken. The exact same code works perfectly on iOS 18. Context: I have a chat view using ScrollViewReader and a vertically-reversed ScrollView (with .rotationEffect(.degrees(180))). Each message row (MessageBubble) uses multiple simultaneousGesture handlers: Horizontal drag for swipe-to-reply (and other actions: pin, delete) Long press for showing popover/actions Vertical scroll for normal chat scrolling This was working great on iOS 18. In iOS 26 beta, the vertical scroll is either completely disabled, jittery, or hijacked by the message row’s drag gestures, even though .simultaneousGesture is used (see code below). Minimal Repro Sample MessageListView.swift swift Copy Edit ScrollViewReader { proxy in ScrollView(.vertical, showsIndicators: false) { LazyVStack(spacing: 0) { // ... grouped messages ForEach(...) { ... MessageBubble(...) // see below } Color.clear.frame(height: 8).id("BOTTOM_ANCHOR") } .padding(.horizontal, 4) .rotationEffect(.degrees(180)) } .rotationEffect(.degrees(180)) } MessageBubble.swift struct MessageBubble: View { // ... var body: some View { // horizontal swipe-to-reply gesture let dragGesture = DragGesture(minimumDistance: 10) // ... ZStack { // ... HStack { ... } // ... .simultaneousGesture( DragGesture(minimumDistance: 0) // for long press // ... ) .simultaneousGesture(dragGesture) // for horizontal swipe } // ... } }

Hello there, I ran into a very strange layout issue in SwiftUI. Here's the View: struct OnboardingGreeting: View { /// ... let carouselSpacing: CGFloat = 7 let carouselItemSize: CGFloat = 110 let carouselVelocities: [CGFloat] = [0.5, -0.25, 0.3, 0.2] var body: some View { ZStack(alignment: Alignment(horizontal: .center, vertical: .iconToCarouselBottom)) { VStack(spacing: carouselSpacing) { ForEach(carouselVelocities, id: \.self) { velocityValue in InfiniteHorizontalCarousel( albumNames: albums, artistNames: artists, itemSize: carouselItemSize, itemSpacing: carouselSpacing, velocity: velocityValue ) } } .alignmentGuide(.iconToCarouselBottom) { context in context[VerticalAlignment.bottom] } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top) LinearGradient( colors: [.black, .clear], startPoint: .bottom, endPoint: .top ) // Top VStack VStack(spacing: 0) { RoundedRectangle(cornerRadius: 18) .fill(.red) .frame(width: 95, height: 95) .alignmentGuide(.iconToCarouselBottom) { context in context.height / 2 } Text("Welcome to Music Radar!") .font(.title) .fontDesign(.serif) .bold() Text("Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum") .font(.body) .fontDesign(.serif) PrimaryActionButton("Next") { // navigate to the next screen } .padding(.horizontal) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) } .ignoresSafeArea(.all, edges: .top) .statusBarHidden() } } extension VerticalAlignment { private struct IconToCarouselBottomAlignment: AlignmentID { static func defaultValue(in context: ViewDimensions) -> CGFloat { context[VerticalAlignment.center] } } static let iconToCarouselBottom = VerticalAlignment( IconToCarouselBottomAlignment.self ) } At this point the view looks like this: I want to push the Button in the Top VStack to the bottom of the screen and the red rounded rectangle to stay pinned to the bottom of the horizontal carousel (hence the custom alignment guide being introduced). The natural solution would be to add the Spacer(). However, for some reason when I do it, it results in the button going all the way down to outside of the screen, which means that the bottom safe area isn't being respected. Using the alignment parameter in the flexible frame also doesn't work the way I want it to. I suspect that custom alignment guide can cause this behavior but I can't find the way to fix it. Help me out, please.

I’ve noticed with the new design language, SwiftUI views appear to not use color as much. Example, color modifiers for List View items like carets. Is this intended and can developers introduce color back into SwiftUI view elements, if desired, like in iOS/iPadOS 18? Specifically, accent color not been used in List disclosure outline carets.

Hi everyone, I’m currently testing iOS 26 on my iPhone as part of the developer program. According to Apple’s documentation and demo materials, a new screenshot animation was introduced in this version. However, when I take a screenshot on my device, the animation remains the same as in previous iOS versions. I’ve double-checked that I’m running the correct build of iOS 26, and I haven’t found any settings that might enable or disable this feature. Is anyone else experiencing the same issue? Could this new animation be device-specific, region-limited, or require additional configuration? Any insight would be appreciated! Thanks in advance, Alonso Rivera

Hey there! I'd love to know if theres a way where you can animate items between ZStack and VStacks? Just like the native iOS notifications on the Lockscreen stack at the bottom and if tapped, they convert from a Stack to a List - I have a list with items, displayed in a VStack, and I make the list collapsable when swiping down, where the items stack behind eachother with a progresisve reduction in opacity & scale, but I havent figured out a way to animate the items between the list and the stack - where you can visually see items starting to overlap and stack ontop of eachother when collapsing the list.

I'm reposting here my FB17602742, submitted yesterday: The strong wording of this message comes from years of Apple ignoring the needs of users who can't tolerate UI animations and convulsions. At this point, it's clear that Apple is either intentionally harming users like me or simply doesn't care about meeting even the most basic accessibility standards on macOS. Yes, many UI animations and convulsions can, fortunately, be disabled - but not through straightforward UI controls. Instead, users are forced to look for obscure Terminal commands found scattered across the Internet. The "Reduce motion" checkbox in System Settings is simply a fake control that doesn't do anything - instead of actually disabling all UI animations and convulsions. What's worse, two of the most offensive UI animations cannot be disabled at all. Apple has consistently dismissed requests to let users disable the following UI animations: Scroll bar rollover highlight effect (introduced on macOS 10.7.3). Every time the cursor passes over a scroll bar, it gets highlighted. This draws the user's attention to random scroll bars for no reason - just because the cursor happened to pass over them. It results in HUNDREDS of unnecessary, annoying events of distraction daily!
 Expand/collapse animation of NSOutlineView (e.g., when opening/closing folders in the list view in the Finder, or any other app using outline views). This animation is extremely distracting, irritating, and time-wasting. Global Accessibility Awareness Day is approaching. Dear Apple, Please adhere to the most basic accessibility standards. Stop the needless suffering of countless users like me. Let us disable the two aforementioned UI convulsions. Thank you for your attention to the issue.

I've been beating my head against the wall over a scrollview issue where the top and bottom are cut off in landscape mode. Portrait mode - everything runs swimmingly. The moment I flip the iPad on its side, though, I lose about a quarter of the view on the top and bottom. I thought this was something to do with framing or such; I ran through a myriad of frame, padding, spacer, geometry...I set it static, I set it to dynamically grow, I even created algorithms to try to figure out how to set things to the individual device. Eventually, I separated the tablet and phone views as was suggested here and on the Apple dev forums. That's when I started playing around with the background image. Right now I have.... ZStack { Image("background") .resizable() .scaledToFill() .ignoresSafeArea() ScrollView { VStack(spacing: 24) {.... The problem is the "scaledToFill". In essence, whenever THAT is in the code, the vertical scrollview goes wonky in landscape mode. It, in essence, thinks that it has much more room at the top and the bottom because the background image has been extended at top and bottom to fill the wider screen of the iPad in landscape orientation. Is there any way to get around this issue? The desired behavior is pretty straightforward - the background image fills the entire background, no white bars or such, and the view scrolls against it.

Is it actually possible to display animation (even a simple one) on Live Activity? But on these cases: The main app is terminated - of course, I know I can use the main app to keep updating the Live Activity to make simple animations work, but in this case, the main app is killed. Live Activity data is not updating - I also understand that the Live Activity can perform animations when its data is being update via push notification or other means, but the current case is the data is not being updated. I’ve tried several ways to achieve this, but nothing seems to work. Just when I was about to give up, I found this video from Apple’s official channel: https://www.youtube.com/watch?v=m6WMwSj_EbA At 4:14 in this video, you can see the text "Locating Driver" with the breathing animation. Could someone please help me understand how to implement that kind of animation in a Live Activity when: The main app is not running, and The Live Activity data is not updating?

So…I am hitting a wall here and could use some guidance towards best practice. I’ve developed an app in Xcode/SwiftUI that renders just fine on the iPhone - text, images, buttons, frames…everything is nicely centered on the screen or scrolls where and when I want. The iPad though…not so much. I’m having issues with tops and bottoms being cut off in scrollviews. These are just straight up text screens too - the ones with other elements/controls…they’re rendering fine. I’ve tried a mix of geometry, vstack, scrollview, padding, spacers…the lot of it. Nothing I seem to do works - the views do not want to fill and fit properly. And, of course, the issue becomes worse the moment you flip the iPad into landscape view. Or use the 13” models. I’d imagine others are battling these issues as well and found solutions, so I decided to hit up the brain trust.

I've just received an email from Apple regarding the Global Accessibility Awareness Day and some forthcoming sessions to promote their accessibility features. What a joke. For many years, Apple refuses to provide the most basic accessibility requirement on macOS: LET USERS DISABLE ALL NON-CONSENSUAL UNSOLICITED ANIMATIONS AND OTHER UI CONVULSIONS. The scourge of animations started from macOS Lion. Yes, many of them can be, fortunately, disabled through some obscure Terminal commands (that is, if the user is lucky enough to discover them on some obscure internet resources). The "Reduce motion" control in System Settings is a fake option that doesn't do anything. And there are two most glaring accessibility violations that cannot be disabled: Scroll bar rollover highlight effect introduced on macOS 10.7.3. Every time you move the cursor over a scroll bar, the bar gets highlighted. It results in bringing the user's attention to random scroll bars for no reason whatsoever just because the cursor happens to pass over the bar at some point. HUNDREDS of unnecessary, annoying events of distraction daily! Expand/collapse animation of NSOutlineView (such as when we open/close a folder in the list view in the Finder, as well as any other app that's using outline views). It's extremely annoying, distracting, and time-wasting. All feedback submitted about this through the years remains mostly ignored (except for a few cases where I received some ridiculous replies from employees who, apparently, are barely familiar with Macs in general). Apple does NOT care about accessibility. Not only this, but it's obvious that Apple is, in fact, intentionally abusing those users who can't tolerate distracting, time-wasting animations and UI convulsions.

I downloaded the official camera sample code（https://developer.apple.com/tutorials/sample-apps/capturingphotos-camerapreview ）it's a .swiftpm package and created a SwiftUI project. I copied the official sample code into this new project, build it, and ran it on an iPhone 13 for testing. I found that there were black empty areas on the top and bottom of the application interface, which means that the application interface cannot be previewed in full screen. I have tried many methods but cannot preview in full screen. How can I modify the code?

Hello everyone, I've been trying for a few weeks now to convert a sequential series of meshes into a stop-motion animation in USDZ format. In Unreal Engine, I’ve already figured out how to transform the sequential series of individual meshes into a smooth animation using the node system and arrays. Unfortunately, the node system cannot be exported as a usdz animation logic in either Unreal or Blender. Because of this, I have tried several other methods to incorporate the animation logic. Here’s what I’ve tried so far: I attempted to create the animation in Blender with Render-/Viewports and mapping it to keyframes. However, in my experience, Viewports are not supported in the conversion. I tried aligning the vertices of individual objects and merging the frames using the Shrinkwrap modifier in Blender, then setting up a morph animation with keyframes. However, because the individual meshes are too different, this results in artifacts, and manually editing each mesh is too difficult for me to handle. I placed all individual meshes at the same position and animated them sequentially by scaling them from 0 to 100 in keyframes (Frame 1 is visible for 10 frames, then scales down at frame 11, while Frame 2 becomes visible at frame 11, and so on). I also adjusted the keyframes so that the scaling happens in a "constant" manner rather than the default Bezier or linear interpolation. I then converted this animation to .abc, and the result initially looked good. However, some information is lost when converting it with OpenUSD. The animation does not maintain its intended jump-like behavior in USDZ format, and instead, the scaling of individual files is visible in the animation. I tried using a Blender add-on (StepMotion), which allows the animation to be exported as .abc, but it can only be read in Blender or Unreal. Even in the preview, the animation is not displayed correctly, so converting the animation logic does not work either. 
Unfortunately, I have no alternative way to create the animation, as the individual frames have been provided to me as meshes. So far, I haven’t found a way to implement this successfully. I would be very grateful for any tips or ideas, as I am running out of options on how to make this work. Thanks in advance!

Hi! I wanted to use Lottie in my swiftpm app, but I've been running into errors and I'm not sure if it's possible. When I try to run the app, it crashes and I get errors saying that the library isn't loaded and the files aren't found (basically these: https://github.com/lottie-react-native/lottie-react-native/issues/373 , https://github.com/airbnb/lottie-ios/issues/2233 ). But moving the framework file into the PackageFrameworks folder doesn't work, and also I'm getting the error that swiftpm cannot distribute packages containing binary frameworks and from what I understand that just isn't something that swiftpm can do. So I was wondering if anyone knows any workarounds to this, or if I should just ditch Lottie? Any help or advice would be greatly appreciated!

I'm currently building an App using a TabView as the main navigation method. In my app I would like to build a page similar to the Top Charts in the native App Store App with two lists side by side: So far I came up with this code (simplified demo): import SwiftUI struct Demo: View { var body: some View { TabView { Tab("Main Tab", systemImage: "tray.and.arrow.down.fill") { NavigationStack { HStack { List { Text("Left List") } List { Text("Right List") } } .navigationTitle("Demo") .navigationBarTitleDisplayMode(.inline) } } } } } #Preview { Demo() } However, I’m encountering a couple of issues: • Scrolling to the top of the left list doesn’t trigger the toolbar background effect, and the content overlaps with the tabs in a strange way. Scrolling to the top of the right list works as expected. • The navigation title is always hidden. I haven’t been able to find a solution to these problems. What would be the correct approach? Thank you!

I'm trying to achieve a specific UI design in SwiftUI where the bottom section of my List has a different background color than the top section. For example in the Medications portion of the Health app, the "Your Medications" Section has a different background than the top "Log" Section. How do I achieve this?: Here some example code. I wonder if I am supposed to use two Lists instead. If I use two Lists though and nest it in a ScrollView, the height of the lists needs to be specified. I am working with dynamic content, though so I don't think that is ideal. class ProtocolMedication {} // Example model struct HomeView: View { @Query private var protocolMedications: [ProtocolMedication] var body: some View { NavigationStack { List { // Upper sections with default background Section { Text("Content 1") } header: { Text("Log") } // Bottom section that needs different background Section { ForEach(protocolMedications) { medication in Text(medication.name) } } header: { Text("Your Medications") } } .listStyle(.insetGrouped) } } }