How to Create a View in SwiftUI

What you’ll build or solve

Create a SwiftUI view by defining a struct that conforms to View and returning a single root view from body. You’ll generate a new view file in Xcode and confirm the view renders in the preview.

When this approach works best

Creating a view in SwiftUI works best when:

• You need a new screen or reusable component, like a settings row or a profile card.
• You want to split UI into smaller pieces to keep ContentView from getting too large.
• You are iterating on UI quickly using previews.

This is a bad idea if your project is UIKit-only and you are not using SwiftUI. In that case, create a UIView or UIViewController instead.

Prerequisites

• Xcode installed
• A SwiftUI project (or a new iOS App project using SwiftUI)
• Basic Swift knowledge (structs and properties)

Step-by-step instructions

Step 1: Create a SwiftUI view struct

Option A (most common): Create a SwiftUI View file in Xcode

In Xcode:

• Right-click your project folder in the Project Navigator.
• Choose New File.
• Select SwiftUI View.
• Name it something like ProfileView.swift.

Xcode creates a view with the standard structure:

importSwiftUI

structProfileView:View {
varbody:someView {
Text("Hello, world!")
    }
}

#Preview {
ProfileView()
}

Option B: Create it manually in a Swift file

Create a new Swift file and add the same structure:

importSwiftUI

structProfileView:View {
varbody:someView {
Text("Hello, world!")
    }
}

#Preview {
ProfileView()
}

What to look for

• The type conforms to View (struct ProfileView: View)
• body returns some View
• body returns a single root view. If you need more than one element, wrap them in a container like VStack or HStack.
• The preview instantiates your view. If the view needs parameters, the preview must pass them.

Examples you can copy

Example 1: Minimal view skeleton

importSwiftUI

structEmptyStateView:View {
varbody:someView {
Text("No results")
    }
}

#Preview {
EmptyStateView()
}

Example 2: View with required properties

importSwiftUI

structGreetingView:View {
letname:String

varbody:someView {
Text("Hello, \(name)")
    }
}

#Preview {
GreetingView(name:"Alex")
}

Example 3: View that returns a container as the root

importSwiftUI

structProfileView:View {
varbody:someView {
VStack {
Text("Jordan Lee")
Text("iOS Developer")
        }
    }
}

#Preview {
ProfileView()
}

Common mistakes and how to fix them

Mistake 1: Forgetting to conform to View

What you might do:

importSwiftUI

structProfileView {
varbody:someView {
Text("Hello")
    }
}

Why it breaks: SwiftUI expects your type to conform to View.

Correct approach:

importSwiftUI

structProfileView:View {
varbody:someView {
Text("Hello")
    }
}

Mistake 2: Returning multiple views without a single root view

What you might do:

importSwiftUI

structProfileView:View {
varbody:someView {
Text("Name")
Text("Role")
    }
}

Why it breaks: body must return one view.

Correct approach:

importSwiftUI

structProfileView:View {
varbody:someView {
VStack {
Text("Name")
Text("Role")
        }
    }
}

Troubleshooting

• If you see Type does not conform to protocol 'View', check that your struct includes : View.
• If previews fail to build, confirm the file imports SwiftUI and the view compiles without errors.
• If the preview shows an error about missing arguments, pass required parameters in #Preview.
• If Xcode cannot find #Preview, you may be using an older Xcode version. Use the older preview format:

importSwiftUI

structProfileView:View {
varbody:someView {
Text("Hello, world!")
    }
}

structProfileView_Previews:PreviewProvider {
staticvarpreviews:someView {
ProfileView()
    }
}

Quick recap

• Create a struct that conforms to View
• Add a body property that returns some View
• Return a single root view from body (use a stack to group multiple views)
• Add a preview that instantiates the view (with required arguments if needed)