How to Clone Instagram Home Page in SwiftUI

Learn it the right way and develop in lesser time

4 min readMay 1, 2021

SwiftUI was firstly introduced in WWDC19 and the API has been rapidly improved in every single day. Since last year, Apple has made huge improvement in SwiftUI including layouts, animation and graphics.

There are so many sources that we can use to learn SwiftUI. But, which one will be the best to help us to quickly understand the whole concept. However, it depends and I won’t say that my approach will be the best for everyone. At least, after going through these steps, I can understand (not the whole) how to develop iOS apps in SwiftUI. The good thing when we understand the idea, we perhaps will be able to solve the future problem - know how to search and find references.

Best Learning Source

Here is the main source that I had gone through in my initial learning stage.

Apple SwiftUI tutorial
The author always know what are better for their consumer
Apple WWDC2020 Videos for SwiftUI introduction and the “What’s new”
Understand Data flow (@State, @Binding and @EnvironmentObject) in these two videos (Data flow and Data essential)
There are still a bunch of great SwiftUI guides provided by Apple in order for us to understand deeply
Start looking for other simple tutorials and implementation
Make a simple project with UI only
Start integrating with navigation, static data and API request

Awesome! Now, let see how we could clone the Instagram home UI.

Project Scope

This article will be focusing on UI development and demonstrate how to quickly create layouts using SwiftUI. Please take note, that I am not using the actual fonts, icons and colours as currently implemented in the Instagram apps. All these cosmetic things you may easily update later. Also, no API data will be integrated into this project.

Let’s Begin!

Before we start, let see how we can break down this page into smaller components (that’s the purpose of SwiftUI - clean and maintainable)

We have divided it into 3 main components. You may break more on the PostView if needed.

Create New Project

Open Xcode and create a new project. Make sure to select SwiftUI for “Interface” and “Life Cycle”

See the main ContentView.swift file with the beautiful “Hello world” text.

The best practice is to rename the file using “refactor” (as shown in the image below). Change the name to HomeView.

Image Placeholder and Demo Data

1. Add a placeholder image to “Assets”. I just added a plain grey image and name it as “placeholder”. We are going to use this image everywhere.

2. Create a DemoStore.swift to supply a sample data to our Views later.

Three Main Components

1. TitleView

Create a new file with type “SwiftUI View”, called TitleView (as the first View at the top), and paste this code (explanation is inside the code). I believe that everyone is familiar with the Stack, button, and text. You may notice that I simply use the system icon to make it quick.

2. StoryView

Create a new file with the type “SwiftUI View”, namely StoryView and add StoryView and StoryItemView as shown in below codes.

In this section, we are going to use scroll view with horizontal Stack. Create the StoryItem first as the individual View.

3. PostView

This view will be quite a long code, but as we can see all just about HStack and VStack. Then, some resize and frame updates.

Update HomeView

Great, all child views are done. Now, we can add up into our main HomeView.

Simply add the PostView in few lines. Later, you can change it to support dynamic data. Also. notice that I am using LazyVStack to keep the performance of the app as stated in the document that it will not create items until it needs to render them onscreen.

Cool, let’s try to run the code and check the result. The preview already display the expected UI. Yeaaay! we are done. Please clap to your self 🤗