Guide to Naming SwiftUI Components

Guide to Naming SwiftUI Components

Learn to name SwiftUI components effectively by replacing 'View' with root view names. Enhance code readability with this simple guide.

·

2 min read

Have you gotten into the habit of ending your component names with View? Follow these steps to give your components better descriptive names.

  1. Look at the root view in your body i.e. Image, Text, Label, Button, List etc.

  2. Replace your component's View suffix with that root view name.

Some examples below could be achieved by using …Style, however these examples are purposely kept brief and the idea still applies as your components grow beyond the capability of …Style.

Examples

The following design is taken as inspiration.

// ✅ TransactionCategoryImage instead of...
struct TransactionCategoryView: View {
    let image: String
    var body: some View {
        Image(image)
            .resizable()
            .frame(width: 20, height: 20)
    }
}
// ✅ TransactionDescriptionText instead of...
struct TransactionDescriptionView: View {
    let description: String
    var body: some View {
        Text(description)
            .font(.caption2)
            .foregroundStyle(.primary)
    }
}
// ✅ TransactionCostLabel instead of...
struct TransactionCostView: View {
    let amount: Double
    var body: some View {
        Label(String(describing: amount), systemImage: "dollarsign")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
}
// ✅ TransactionButton instead of...
struct TransactionView: View {
    let transaction: Transaction
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            HStack {
                TransactionCategoryImage(image: transaction.image)
                TransactionDescriptionText(description: transaction.description)
                TransactionCostLabel(amount: transaction.amount)
            }
        }
    }
}
// ✅ TransactionsList instead of...
struct TransactionsView: View {
    let transactions: [Transaction]
    var body: some View {
        List(transactions) { transaction in
            TransactionButton(transaction: transaction) { }
        }
        .listStyle(.plain)
    }
}

Conclusion

If you're finding too many instances of components named with View in your code, leading you to open files just to check what's inside, this tip may be for you.

P.S. if you’re looking to get rid of tracking identifiers from links on iOS, check out my app https://cleanshare.app