Hey @DTS Engineer, thanks for the suggestion. I tried it and whilst it seems better than it was I can still clearly see that the image isn't centered properly. I just cannot comprehend the way UINavigationController affects the layout. Edit: Also, there is this strange behavior with scrollViewDidZoom(_:) method that I found. Basically, when I present this PhotoViewController inside the UINavigationController context either as a root view controller or as a pushed view controller scrollViewDidZoom(_:) always gets called instantly even before the user actually zooms. However, when I present PhotoViewController outside the UINavigationController hierarchy then scrollViewDidZoom(_:) method doesn't get called until the user starts zooming. I have no idea why that happens

@DTS Engineer Ended up making it work with a VStack after trying different other options. I dropped the custom alignment guide in favor of using offset. Here is the code if anyone is interested: struct OnboardingGreeting: View { let carouselSpacing: CGFloat = 7 let carouselItemSize: CGFloat = 110 let carouselVelocities: [CGFloat] = [0.5, -0.25, 0.3, 0.2] let iconSize: CGFloat = 95 var body: some View { VStack(spacing: 0) { VStack(spacing: carouselSpacing) { ForEach(carouselVelocities, id: \.self) { velocityValue in InfiniteHorizontalCarousel( albumNames: albums, artistNames: artists, itemSize: carouselItemSize, itemSpacing: carouselSpacing, velocity: velocityValue ) } } .overlay { LinearGradient( stops: [ .init(color: .black.opacity(0.5), location: 0.07), .init(color: .clear, location: 0.12) ], startPoint: .bottom, endPoint: .top ) } VStack(spacing: 8) { RoundedRectangle(cornerRadius: 18) .fill(.red) .frame(width: iconSize, height: iconSize) Text("Welcome to Music Radar") .font(.title) .fontDesign(.serif) .bold() Text("It's your place to find new friends and share your tastes with the world. Enjoy!") .font(.body) .fontDesign(.serif) } .offset(y: -(iconSize/2)) Spacer() PrimaryActionButton("Next") { // navigate to the next screen } .padding(.horizontal) } .ignoresSafeArea(edges: .top) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) .statusBarHidden() } } and the final result:

@DTS Engineer Regarding the choice of ZStack, I figured that would be an appropriate choice for my use case, I have a carousel that acts like a background, then a LinearGradient as a middle layer and top layer VStack with the main content. If you have other suggestions, I would love to hear them. Also you said that higher z-axis value is probably the reason why my layout breaks. Could you elaborate on it a little bit more? I just don't understand how that would cause the issue in my case. Lastly, there is the snippet that reproduces the issue: // 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() // swiftlint:disable:next line_length 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) Spacer() PrimaryActionButton("Next") { // navigate to the next screen } .padding(.horizontal) } .border(.red) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) Here is the result:

struct Book: Hashable { let name: String static let preview = [ Book(name: "1"), Book(name: "2"), Book(name: "3") ] } struct Library: View { @State var books: [Book] = [] @State private var isShowingSheet = false var body: some View { VStack { ForEach(books, id: \.self) { book in Text(book.name) } Button("add Book") { isShowingSheet = true } } .sheet(isPresented: $isShowingSheet) { Button("Add Book") { books.append(Book(name: "example")) } } } } #Preview { Library(books: Book.preview) } That works

@DTS Engineer Thank you for your reply. I now understand the problem I had. I just have another question now. If I want to move all of this code to HealthKitManager class is this the optimal way to do it? struct WorkoutDetailView: View { @Environment(HealthKitManager.self) var healthKitManager let workout: HKWorkout var body: some View { ScrollView { VStack(alignment: .leading) { //... } .task { do { workoutLocations = try await healthKitManager.retrieveWorkoutRoute(for: workout) } catch { fatalError("error while fetching workout route: \(error)") } } } } } @Observable class HealthKitManger { private var healthStore: HKHealthStore? //... func retrieveWorkoutRoute(for workout: HKWorkout) async throws -> [CLLocation] { guard let store = self.healthStore else { fatalError("retrieveWorkoutRoute(): healthStore is nil. App is in invalid state.") } let currentWorkoutPredicate = HKQuery.predicateForObjects(from: workout) let routeSamplesQuery = HKAnchoredObjectQueryDescriptor(predicates: [.workoutRoute(currentWorkoutPredicate)], anchor: nil) let queryResults = routeSamplesQuery.results(for: store) let task = Task { var workoutRouteLocations: [CLLocation] = [] for try await result in queryResults { let routeSamples = result.addedSamples for routeSample in routeSamples { let routeQueryDescriptor = HKWorkoutRouteQueryDescriptor(routeSample) let locations = routeQueryDescriptor.results(for: store) for try await location in locations { workoutRouteLocations.append(location) } } return workoutRouteLocations } return workoutRouteLocations } return try await task.value } }