SwiftUI Tutorial: Make your own Expandable List from scratch

How to make an Expandable List for iOS 13

Figure 1.

Every year, SwiftUI is becoming better and better with more built-in modifiers to make developer’s job more efficient. But since the framework is still new, you cannot use everything in production yet.

Let’s assume that you’re about to add an OutlineGroup modifier to your app, but suddenly realize that you can’t do it on your production which is still iOS 13. You ask your boss when will the company upgrade it’s minimum compatibility. Unfortunately, you have to wait for another year or two.

Worry not, in this tutorial, we will make a SwiftUI ExpandableList from scratch using only iOS 13 compatible Views. By the end of this tutorial, we’re going to make a UI like the one shown in figure 1 canvass.

Creating the Expandable List

We’re not just going to create a view for single use only. We’re going to make a reusable one, since it will be used multiple times. Let’s begin writing the properties. Here’s the code:

struct ExpandableView<Header: View, Content: View>: View {
    
    @State var isExpanded: Bool = true
    
    var background: Color
    var label: () -> Header
    var content: () -> Content
    
}