Swift UI list animation for expanding cells with dynamic heights

I struggled with this for a while, and visited a bunch of the existing solutions on Stack Overflow, but they all seemed too complicated, especially now in 2023.

What I eventually stumbled on was instead of putting the content inside of a List you can just put it inside of a ScrollView. Then you will get nice, clean animations without any weird hacks with custom height modifiers or having to know the height of your container before hand. You'll just need to add a bit of extra styling to get it to look as nice as a List does by default.

struct Cell: View {
    @ObservedObject var item: Item
    @State var showExtra = false

    var body: some View {
        VStack {
            Text("tap me")
                .onTapGesture {
                    withAnimation{
                        showExtra.toggle()
                    }
                }
            if showExtra {
                Text("I'm extra text")
            }
        }
    }
}

struct ContenetView: View {
    var items = [ ... ] // your items
    var body: some View {
        ScrollView {
            ForEach(items) { item in
                Cell(item: item)
            }
        }
    }
}

This answer is based off Oliver Rider's answer. I believe it works because SwiftUI Lists respond to the changed ID as if the list row has been replaced with a new one, and by default SwiftUI animates the creation or insertion of new rows. It seems to work as well with a dynamic list as with a fixed one.

You only need to alter the ID of the row item, and you can keep the ID of your object the same. In this example I just concatenate the object ID with the stringified bool value for isExpanded to make the changing List Row id.

import SwiftUI

struct SOAnswerEditedView: View {
    @State private var elements = [Element(id: UUID()),
                                   Element(id: UUID()),
                                   Element(id: UUID())]
    
    var body: some View {
        List($elements) { element in
            ListRowEdited(element: element)
        }
        .listStyle(.plain)
    }
}

struct ListRowEdited: View {
    @Binding var element: Element
    @State var isExpanded: Bool = false
    
    var body: some View {
        VStack (alignment: .leading) {
            Text("\(element.id.uuidString)")
                .font(.caption2)
            Circle().fill(.red)
            
            Button {
                withAnimation {
                    isExpanded.toggle()
                }
            } label: {
                Image(systemName: isExpanded ? "arrow.up" : "arrow.down")
            }
            .buttonStyle(.bordered)
        }
        .frame(maxHeight: isExpanded ? 200 : 100)
        .id(element.id.uuidString + String(isExpanded))
    }
}

struct Element: Identifiable {
    var id: UUID
}

im still new to SwiftUi but managed to get something working by using the below code. I can't get multiple of the listRow's to animation if I just ForEach loop over list row but in this example but this approach does seam to work. Maybe someone could take it the next step to work out why the animations work in this method.

I feel its something todo with the list not knowing which row is which or something, hence me adding the id property. I also couldn't get any animations on anything in the view until the id property was changed. hence the onChange modifier.

love some feedback and ideas on it.

struct testViewTwo: View {

@State private var id1 = UUID()
@State private var id2 = UUID()

var body: some View {
    List {
        listRow(id: $id1)
        listRow(id: $id2)
    }
    .listStyle(.plain)
}}


struct listRow: View {
@Binding var id: UUID
@State private var isShowingRow: Bool = false
@State private var animateView: Bool = false

var body: some View {
    Group {
        VStack (alignment: .leading) {
            Text("\(id.uuidString)")
                .font(.caption2)
            Text("Animation test")
            Button {
                withAnimation {
                    //MARK: tirggers animation OF view
                    id = UUID()
                }
                isShowingRow.toggle()
            } label: {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(animateView ? .blue : .red)
                    .animation(.easeInOut(duration: 2), value: animateView)
            }
            .buttonStyle(.bordered)
            VStack {
                if isShowingRow {
                    Text("Hello, world!")
                    Text("Hello, world!")
                    Text("Hello, world!")
                }
                else {
                    EmptyView()
                }
            }
        }
        .padding()
    }
    .id(id)
    .onChange(of: id) { newValue in
        //MARK: triggers animations IN view
        animateView.toggle()
    }
}}