Reproducing Apple’s Journal App List UI & Swipe Animations

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!

Answered by max_us in 809172022

The issue where the height of the swipe buttons was not aligned was resolved by using listRowSpacing. This modifier is excellent!

Accepted Answer

The issue where the height of the swipe buttons was not aligned was resolved by using listRowSpacing. This modifier is excellent!

Reproducing Apple’s Journal App List UI & Swipe Animations
 
 
Q