r/SwiftUI

When you push a new view on to the stack, a dark overlay covers the previous view as it is pushed back.

Does anybody know how to remove that overlay?

Hey everyone,

I’m currently working on an iOS app and I already have parts of the UI built in HTML/CSS. Now I’m trying to bring that design into SwiftUI, but I’m honestly not sure what the best workflow is.

What’s the easiest/most efficient way to convert or recreate HTML + CSS layouts in SwiftUI?

- Are there tools that help with this?
- Should I completely rebuild everything manually in SwiftUI?
- Is embedding web content with WebView a bad idea for production apps?
- How do you usually handle responsive CSS concepts in SwiftUI?

I mainly struggle with translating flexbox/grid styling into SwiftUI stacks and spacing.

Would really appreciate any advice, resources, GitHub repos, tutorials, or examples from people who’ve done this before

I made a macOS menu bar app called Cordon. It blocks ads and trackers on your Mac using a local proxy and filter lists.

How it works:

Install a local certificate once
Turn on protection from the menu bar
Cordon filters traffic on your Mac

What you get:

Works across browsers and most apps
Live view of blocked requests
Filter lists for ads, privacy, malware and more
Custom rules if you want them

This is the first release (v0.0.1), so expect rough edges. Some apps ignore the system proxy or break with HTTPS filtering. You can add ignored hosts in Settings for sites that need to be skipped.

It only protects the Mac it runs on. It does not block ads on phones, TVs or other devices on your network.

GitHub: https://github.com/31d4r/cordon

Would love feedback, especially on certificate install, browser compatibility and anything that breaks with protection on.

https://preview.redd.it/1e21kgrplb2h1.png?width=1664&format=png&auto=webp&s=85dccf1dc3d39d3f818f7640014be6157b2c7b4c

me and a friend built a disaster mesh app in Expo/RN for a kaggle competition and had to write a custom Swift native module for MultipeerConnectivity since it's not exposed to React Native. it's the only transport that needs zero infrastructure so it was non-negotiable.

the app meshes phones together in airplane mode, runs gemma 4 on-device, and has an offline map with signed incident pins. open source under CC-BY 4.0

https://www.kaggle.com/competitions/gemma-4-good-hackathon/writeups/new-writeup-1778607604484
repo can be found here

was rebuilding the same color/spacing/radii setup for the 3rd app and finally got fed up. consolidated everything into a single DesignSystem.swift. one source of truth, one place to redesign. wanna share bc i see a lot of swiftui posts where ppl have Color.blue.opacity(0.8) scattered across 40 files.

basic structure:

enum DS {
  enum Color {
    static let primary = SwiftUI.Color("Primary")
    static let surface = SwiftUI.Color("Surface")
    static let textPrimary = SwiftUI.Color("TextPrimary")
  }
  enum Spacing { static let xs: CGFloat = 4, sm: CGFloat = 8, md: CGFloat = 16, lg: CGFloat = 24 }
  enum Radius { static let sm: CGFloat = 8, md: CGFloat = 12, lg: CGFloat = 20 }
  enum Surface { case flat, bordered, elevated, glass, liquidGlass }
}

then a View extension .surface(.glass) reads from this and applies background + border + shadow accordingly. one place to change shadows, one place to change radii. every screen stays consistent w/o thinking about it.

things that made it actually useful for me:

1. surfaces as an enum not separate modifiers - way easier to reason about levels of elevation. flat -> bordered -> elevated -> glass. you're never confused which one to use.
2. dark mode handled in the asset catalog, not in code. one Color asset, two values. zero colorScheme == .dark ? .x : .y in views.
3. animated backgrounds live in the design system too. a mesh gradient component i can drop behind onboarding screens. saves 30 min per new app.
4. liquid glass surface on iOS 18+ is criminally underused. one modifier, looks premium, works on the new ipads/macs too.

the boring thing nobody talks about: just doing this consistently for one weekend will save you days across multiple apps. it's the swiftui equivalent of tailwind config but for native.

Lemme know if you want the access to the complete code (i have to put this in a repo lol)

anyone else doing this differently? curious if there's a pattern i'm missing.

Hi everyone,
I'm struggling with a persistent layout/animation issue in a standard SwiftUI TabView. Every time I switch tabs, the new view doesn't just appear instantly; it seems to perform a subtle "scale 0 to 1" or "fade-in with expansion" animation. Additionally, there’s a noticeable vertical layout shift (jump) where the content (like text) appears lower for a split second and then snaps higher to its final position.

The Issue:

1. Visual Glitch: The view seems to animate its entry even though no animations are explicitly defined.
2. Layout Shift: Content jumps vertically after appearing. (See attached video/photos).
3. Reproducibility: This happens even with the most basic setup (just a ZStack with a Color and Text).

I have already tried (None of these fixed it):

1. Removing all animations: Checked for withAnimation blocks and used .animation(nil, value: selectedTab).
2. Safe Area Modifiers: Removed all .ignoresSafeArea() modifiers. The issue persists with or without them.
3. Custom vs Native TabBar: I initially had a custom TabBar, but I reverted to the 100% native TabView for testing. The glitch is still there.
4. Hiding/Showing TabBar: Tried UITabBar.appearance().isHidden = true and the modern .toolbar(.hidden, for: .tabBar). No difference.
5. Transaction blocking: Added .transaction { $0.animation = nil } to the TabView.
6. View Hierarchy: Simplified the views to just a Color and a single Text. The text still jumps upwards after the tab is selected.
7. NavigationStack: Added/removed NavigationStack from individual tabs to see if it was a Safe Area calculation mismatch.

The Question:
Has anyone encountered this specific "jump" in TabView? I don't want to use a custom ZStack based router because I want to keep the native TabView lifecycle. Why does a "vanilla" TabView perform this jump/scale on tab change?
Any help or deep-dive technical explanation would be much appreciated! Thanks!

Link to code:
https://pastebin.com/CL700PXf

Link to video (Slow Animations mode):
https://streamable.com/35l1fw

Link to video (Standard speed):
https://streamable.com/8vllhq

Hello! I'm working on a personal pet project in SwiftUI and trying to utilize all of its newest features. Along the way, I realized that traditional MVVM often feels like it's fighting against SwiftUI. TCA feels too heavy and complicated for small-to-medium projects. Unlike Google, Apple doesn't really provide definitive, official architecture recommendations.

Because of this, I designed a testable, protocol-based architecture focused on high separation of concerns and reusability.

Core points:

• Logic Injection via Extensions: Business logic is not inside the View or a ViewModel, but in a Protocol extension. This is "Composition over Inheritance."
• Direct Environment Access: The View accesses dependencies (SettingsManager, RoleService) directly via \@Environment, eliminating the need for manual dependency injection pass-through.
• Separation of State and Behavior: The u/Observable class holds what the data is (State), while the Protocol defines what happens to it (Behavior).
• Self-Initialization: The View is responsible for fetching its own dependencies and initializing its own state, removing the need for parent "Factory" views.
• Reduced Boilerplate: Eliminates the need for a separate ViewModel class file and the verbose binding syntax often associated with MVVM.

In this pattern:

1. The Protocol defines the contract: the required dependencies (services, modelContext) and the functions (business logic).
2. The Protocol Extension provides the default implementation of the logic. This allows the code to be written once and reused by any view conforming to the protocol.
3. The View conforms to the protocol. It holds the UI layout, declares its dependencies using u/Environment, and manages a separate u/Observable State class to hold data.
4. The State is a pure data class (ViewState) that handles the mutable properties, ensuring the View struct remains lightweight while keeping data persistence correct.

Check it out here: https://github.com/nusov/SwiftUI-POV-Architecture/tree/main

Your business logic stays on the same View level, no more optionals, initializer chains.

does anyone here know how Apple Music make lyrics scroll, I can't get it to be the same

does anyone know how?

Hey everyone! for AI features/chat in SwiftUI apps, do you prefer using Apple Intelligence / native APIs or integrating third-party models like OpenAI, Claude, etc.?

Main thing I’m interested in is MCP-style tools/functions where the AI can directly interact with app features and state. Curious what architectures people here prefer and why.

I’ve been experimenting with WidgetKit and finding animation support pretty restrictive compared with regular SwiftUI views. For those who have shipped widgets, do you use any animation at all, or do you mostly design around static/timeline-driven updates?

I’d be interested in hearing what’s actually possible, what Apple allows, and any practical workarounds.

I have a TikTok‑style vertical paging feed inside a NavigationStack.

The issue: On initial load there's an unwanted gap between the toolbar and the first card — as if the navigation bar's safe‑area inset is applied twice, or the paging offset starts from a wrong origin.

• Scrolling down a few points (not enough to snap) makes the gap disappear.
• Scrolling back up those few points brings it back.
• Every subsequent page snaps correctly — only the first one is affected.

Simplified code:

NavigationStack {
  ExploreView()
}

// ExploreView
struct ExploreView: View {
    let posts: [Post]
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                ForEach(posts) { post in
                    PostCard(post: post)
                        .containerRelativeFrame(.vertical)
                        .padding(.horizontal, 32)
                }
            }
        }
        .scrollTargetBehavior(.paging)
        .scrollIndicators(.hidden)
        .toolbarRole(.editor)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Explore")
                    .font(.title)
            }
        }
    }
}

What I've tried that didn't work:

• .scrollTargetBehavior(.viewAligned(limitBehavior: .alwaysByOne)) + .scrollTargetLayout() on the LazyVStack — the gap is identical, no improvement
• Removing .toolbarRole(.editor) — no change

Is this expected behavior? Any workaround to keep the native toolbar?

https://reddit.com/link/1tfpidd/video/yxw0dxyz8p1h1/player

Would you/ have you built an entire app with virtually no custom components? So, using pretty much only what SwiftUI gives you – like its TextField, its navigation bar, its List, and so – instead of DIY-ing that stuff. If yes, how did it turn out?

Can you give any examples of apps on the App Store that look good and highly Apple-like?