Instagram Feed in SwiftUI. Demo: https://twitter.com/fabiogiolito/status/1136037146756866049

InstagramFeed.swift

//
//  InstagramFeed.swift
//  Landmarks
//
//  Created by Fabio Giolito on 04/06/2019.
//  Copyright © 2019 Apple. All rights reserved.
//

// ===================================================
//  This is just a quick UI test.
//  Not passing any data, and using just basic elements as a starting point.
//  Extracted some things into their own component to have some separation.
//  If you prefer to see the entire screen in one code block check out this other gist:
//  https://gist.github.com/fabiogiolito/881d5fcd3c7193a767062caa76e29ae0

import SwiftUI

// FEED VIEW
struct InstagramFeed : View {
    var body: some View {
        List(0 ..< 5) { item in
            Post()
        }
    }
}

// Load feed view in the preview
#if DEBUG
struct InstagramFeed_Previews : PreviewProvider {
    static var previews: some View {
        InstagramFeed()
    }
}
#endif

// ===================================================

// Appending other components here for easy reading.
// They should be in their own file.

// ===================================================
// POST COMPONENT
// Grouping other components and handling image

struct Post : View {
    var body: some View {
        return VStack(alignment: .leading, spacing: 0) {
            
            UserBar()
            Image("turtlerock").resizable().frame(height: 414)
            ActionBar()
            PostInfo()
            
        }.padding(.horizontal, -20)
    }
}

// ===================================================
// USER BAR COMPONENT

struct UserBar : View {
    var body: some View {
        return HStack(alignment: .center, spacing: 12) {
            
            Image("turtlerock")
                .frame(width: 40, height: 40)
                .clipShape(Circle())
            
            VStack(alignment: .leading, spacing: 2) {
                Text("Display Name")
                    .font(.subheadline)
                    .bold()
                Text("Location")
                    .font(.caption)
            }
            
            Spacer()
            
            Image(systemName: "ellipsis")
            }
            .padding(.horizontal)
            .padding(.vertical, 8)
    }
}

// ===================================================
// ACTION BAR COMPONENT

struct ActionBar : View {
    var body: some View {
        return HStack(spacing: 16) {
            Image(systemName: "heart").imageScale(.large)
            Image(systemName: "bubble.right").imageScale(.large)
            Image(systemName: "arrowshape.turn.up.right").imageScale(.large)
            Spacer()
            Image(systemName: "bookmark").imageScale(.large)
            }
            .frame(height: 32)
            .padding(.horizontal)
            .padding(.top, 12)
    }
}

// ===================================================
// POST INFO COMPONENT

struct PostInfo : View {
    var body: some View {
        return VStack(alignment: .leading, spacing: 8) {
            Text("6 172 likes")
                .font(.subheadline)
                .bold()
            
            HStack {
                Text("username")
                    .font(.subheadline)
                    .bold()
                Text("Post caption")
                    .font(.subheadline)
            }
            
            // ADD COMMENT
            HStack(alignment: .center, spacing: 8) {
                Image(systemName: "circle")
                    .imageScale(.large)
                Text("Add a comment…")
                    .font(.subheadline)
                    .color(Color.gray)
                Spacer()
            }
            .padding(.vertical, 8)
            
            Text("2 DAYS AGO")
                .font(.caption)
                .color(Color.gray)
            
            }
            .padding()
    }
}