The new .navigationTransition feature introduced in SwiftUI for iOS 18+ offers an impressive animated screen transition. However, during the transition, the parent view shrinks, leaving a white margin (or black in dark mode) around the edges.
If the background color of the parent view matches this margin color, it appears seamless. However, as shown in the attached example, when using a custom color or gradient background, the margin becomes visually disruptive.
Is there a way to address this?
import SwiftUI
struct ContentView: View {
@Namespace var namespace
var body: some View {
NavigationStack {
Form {
NavigationLink {
ZStack {
Color.yellow.ignoresSafeArea()
Text("Detail View")
}
.navigationTitle("Transition")
.navigationTransition(.zoom(sourceID: "hellow", in: namespace))
} label: {
Text("Open")
.font(.largeTitle)
.matchedTransitionSource(id: "hellow", in: namespace)
}
}
.scrollContentBackground(.hidden)
.background(Color.mint.ignoresSafeArea())
}
}
}
#Preview {
ContentView()
}
Applying .ignoreSafeArea() to the background view doesn’t seem to resolve the issue, which suggests this margin might not be related to the safe area. Any insights or solutions would be greatly appreciated.
Post
Replies
Boosts
Views
Activity
The interactiveDismissDisabled() function in SwiftUI's Sheet no longer works as expected in iOS 18.1 (22B83). It was working as expected until iOS 18.0.1. Are there any other users experiencing the same issue?
struct ContentView: View {
@State private var openSheet = false
var body: some View {
NavigationStack {
Button("Open") {
openSheet = true
}
.sheet(isPresented: $openSheet) {
SheetView()
}
}
}
}
struct SheetView: View {
@Environment(\.dismiss) private var dismiss
var body: some View {
NavigationStack {
Text("This is the Sheet")
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel") { dismiss() }
}
}
.interactiveDismissDisabled()
}
}
}
Supplementary information: In iOS 18.1, even Apple's native Journal app allows users to swipe-to-dismiss the sheet when creating a new entry. Previously, a confirmation dialog would be displayed, but this is no longer the case.
The interactiveDismissDisabled() function in SwiftUI's Sheet no longer works as expected in iOS 18.1 (22B83). It was working as expected until iOS 18.0.1.
Are there any other users experiencing the same issue?
struct ContentView: View {
@State private var openSheet = false
var body: some View {
NavigationStack {
Button("Open") {
openSheet = true
}
.sheet(isPresented: $openSheet) {
SheetView()
}
}
}
}
struct SheetView: View {
@Environment(\.dismiss) private var dismiss
var body: some View {
NavigationStack {
Text("This is the Sheet")
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel") { dismiss() }
}
}
.interactiveDismissDisabled()
}
}
}
Supplementary information: In iOS 18.1, even Apple's native Journal app allows users to swipe-to-dismiss the sheet when creating a new entry. Previously, a confirmation dialog would be displayed, but this is no longer the case.
I'm struggling to recreate the UI of Apple's Journal app. The List in the Journal app has each element as an independent entity, and the swipe animations for deletion and editing are unlike anything I've seen before.
To replicate this, I attempted the following code, which seems to work initially. However, when I swipe to delete, a red area with mismatched sizing appears due to the plain List style.
import SwiftUI
struct ContentView: View {
@State private var items = Array(0...5)
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(String(item))
.padding()
.frame(maxWidth: .infinity)
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
}
.swipeActions(edge: .trailing){
Button(role: .destructive) { print("delete action.") } label: { Image(systemName: "trash.fill") }
}
}
.listStyle(.plain)
}
}
Does anyone have ideas or suggestions on how to recreate a List similar to the Journal app using SwiftUI or UIKit? Additionally, does anyone know how Apple might have implemented this?
Any comments, even minor ones, would be greatly appreciated. Thank you!
I frequently referred to Apple’s tutorial on SwiftData in Swift, but recently I haven’t been able to access it. Is there a reason why?
Create, update, and delete data - De velop in Swift Tutorials
https://developer.apple.com/tutorials/develop-in-swift/create-update-and-delete-data
With the introduction of the Tides app in watchOS 11, users can now view information about tides and swells along the coast. Is this data accessible to developers via WeatherKit?
In the Tides app, the data source for tides and weather is shown as WeatherKit.
Hello!
I want to use PhotosPicker, but I'm encountering an error with the line item.loadTransferable(type: Data.self) which says Instance method 'loadTransferable(type:)' requires that 'Data' conform to 'Transferable'. I cannot execute the code because of this error. Why is this happening? Any information would be helpful.
I tried changing type: Data.self to type: UIImage.self, but it still didn’t work.
I am using Xcode 15.4, and my target version is iOS 17.4.
import SwiftUI
import PhotosUI
struct PhotosPicker: View {
@State var selectedItems: [PhotosPickerItem] = []
@State var selectedImages: [UIImage] = []
var body: some View {
VStack {
if !selectedImages.isEmpty {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(selectedImages, id: \.self) { image in
Image(uiImage: image)
.resizable()
.scaledToFill()
.frame(width: 300, height: 200)
}
}
}
}
PhotosPicker(
selection: $selectedItems,
selectionBehavior: .ordered,
matching: .images
) {
Text("image!")
}
}
.onChange(of: selectedItems) { items in
Task {
selectedImages = []
for item in items {
guard let data = try await item.loadTransferable(type: Data.self) else { continue }
guard let uiImage = UIImage(data: data) else { continue }
selectedImages.append(uiImage)
}
}
}
}
}
I want to execute the modifyHeaders method using a Safari extension. However, it doesn't work when I execute it in Safari. It works in Chrome. Why is that? I used this document as reference:
Part of manifest.json
"declarative_net_request": {
"rule_resources": [{
"id": "ruleset",
"enabled": true,
"path": "rules.json"
}]
},
"host_permissions": [ "<all_urls>" ],
"permissions": [
"declarativeNetRequestWithHostAccess"
]
rules.json
[
{
"id": 1,
"priority": 1,
"action": {
"type": "modifyHeaders",
"responseHeaders": [
{
"header": "Content-Disposition",
"operation": "remove"
}
]
},
"condition": {
"regexFilter": ".*",
"resourceTypes": [
"main_frame",
"sub_frame"
]
}
}
]
[https://developer.apple.com/documentation/safariservices/safari_web_extensions/blocking_content_with_your_safari_web_extension]