In this tutorial, we will learn how to build a horizontal scroll view for displaying ratings and reviews in a SwiftUI app. The ratings and reviews feature is a valuable addition to various types of applications, including e-commerce apps, gaming apps, and many others. By providing users with the ability to view and write reviews, you can enhance user engagement, build trust, and gather valuable feedback for your app.

We will create a SwiftUI view that displays a list of reviews, with each review having a title, body, star rating, username, and timestamp. Users will be able to scroll through the reviews horizontally, making it easy to read multiple reviews in a visually appealing manner.

First, we need to define the Review struct, which will hold the properties of each review. Add the following code to your SwiftUI file:

struct Review {
    var id = UUID()
    var title: String
    var body: String
    var starRating: Int
    var username: String
    var timestamp: Date
}

1. Define the Review Struct:

In the ContentView struct, declare a constant array of Review objects to represent the reviews data. You can use the example reviews provided or customize them with your own data. Additionally, define a constant for the left and right padding to adjust the spacing within the horizontal scroll view.

import SwiftUI

var leftRightPadding: CGFloat = 20

struct ContentView: View {
    let reviews: [Review] = [
        // Add your Review objects here or use the example reviews
    ]

    // The rest of the code will be added in subsequent steps...
}

2. Set Up the ContentView:

Inside the ContentView struct, set up the horizontal scroll view to display the reviews. We will use GeometryReader to get the screen's size and ensure that our layout works well across different devices.

struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                // The rest of the code will be added in the next step...
            }
        }
    }

    // ...
}

3. Create the Horizontal Scroll View:

Within the VStack, add a ScrollViewReader to handle scrolling to a specific review when it is tapped. Inside the ScrollViewReader, create a ScrollView with a horizontal orientation and set showsIndicators to false to hide the scroll indicators.

struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ZStack {
                    VStack {
                        Image("IMG_3201")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                        Spacer()
                    }
                    .opacity(0)

                    VStack {
                        VStack(spacing: 23) {
                            // Reviews list
                            ScrollViewReader { proxy in
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 10) {
                                        // The rest of the code will be added in the next step...
                                    }
                                    .fixedSize(horizontal: false, vertical: true)
                                    .padding([.leading, .trailing], leftRightPadding)
                                }
                            }
                        }
                        .padding(.top, 0)
                        Spacer()
                    }
                    .padding(.top, 10)
                }
            }
        }
    }

    // ...
}

4. Set Up the Reviews List:

Inside the HStack, use a ForEach loop to iterate through the reviews array and display individual reviews as cards. Each card will have the review's title, date, star ratings, username, and a truncated body.

struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ZStack {
                    VStack {
                        Image("IMG_3201")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                        Spacer()
                    }
                    .opacity(0)

                    VStack {
                        VStack(spacing: 23) {
                            // Reviews list
                            ScrollViewReader { proxy in
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 10) {
                                        ForEach(reviews, id: \.id) { review in
                                            VStack(spacing: 3) {
                                                // Review title & date
                                                HStack(spacing: 10) {
                                                    Text(review.title)
                                                        .font(.system(size: 15.2, weight: .semibold))
                                                    Spacer()
                                                    Text(dateFormatter.string(from: review.timestamp))
                                                        .font(.system(size: 15, weight: .regular))
                                                        .foregroundColor(.gray)
                                                }

                                                // Star ratings & username
                                                HStack(spacing: 10) {
                                                    HStack(spacing: 2.5) {
                                                        ForEach(Array((1...review.starRating).enumerated()), id: \.offset) { index, element in
                                                            Image(systemName: "star.fill")
                                                                .resizable()
                                                                .frame(maxWidth: 12, maxHeight: 12)
                                                                .foregroundColor(.orange)
                                                        }
                                                    }
                                                    Spacer()
                                                    Text(review.username)
                                                        .font(.system(size: 15.3, weight: .regular))
                                                        .foregroundColor(.gray)
                                                }

                                                // Body
                                                Text(review.body)
                                                    .frame(maxWidth: .infinity, alignment: .leading)
                                                    .disabled(true)
                                                    .font(.system(size: 15.1, weight: .regular))
                                                    .padding(.top, 9)
                                                    .lineSpacing(4.3)
                                                    .lineLimit(7)
                                                Spacer()
                                            }
                                            .padding(.top, 16)
                                            .padding(.bottom, 23)
                                            .padding([.leading, .trailing], 20)
                                            .frame(width: geometry.size.width - ((leftRightPadding * 2)))
                                            .frame(maxHeight: .infinity)

                                            .background(Color(uiColor: .secondarySystemBackground).opacity(1))
                                            .cornerRadius(10)

                                            // Scroll to item on tap
                                            .gesture(
                                                TapGesture()
                                                    .onEnded { _ in
                                                        withAnimation {
                                                            proxy.scrollTo(review.id, anchor: .center)
                                                        }
                                                    }
                                            )
                                        }
                                    }
                                }
                            }
                        }
                        .padding(.top, 0)
                        Spacer()
                    }
                    .padding(.top, 10)
                }
            }
        }
    }

    // ...
}

5. Display Individual Reviews:

You can customize the appearance of the reviews cards by adjusting the fonts, colors, and other styling properties to match the theme of your app. Feel free to experiment with the layout and make it more visually appealing.

6. Customize the UI:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

7. Preview the ContentView

Congratulations! You have successfully built a horizontal scroll view for displaying ratings and reviews in a SwiftUI app. This feature can be a valuable addition to various types of apps, allowing users to share their experiences and providing potential customers with valuable insights about your app's quality.
Remember, the provided code is just a starting point, and you can further enhance the feature by adding functionalities like writing new reviews, sorting reviews based on ratings or timestamps, and more. Have fun exploring and improving your SwiftUI app with this new ratings and reviews component!

Conclusion:

Download full project files above.

Any questions, let me know in the comments.

Salman B.

First, we need to define the Review struct, which will hold the properties of each review. Add the following code to your SwiftUI file:
```
struct Review {
    var id = UUID()
    var title: String
    var body: String
    var starRating: Int
    var username: String
    var timestamp: Date
}
```

In the ContentView struct, declare a constant array of Review objects to represent the reviews data. You can use the example reviews provided or customize them with your own data. Additionally, define a constant for the left and right padding to adjust the spacing within the horizontal scroll view.
```
import SwiftUI

var leftRightPadding: CGFloat = 20

struct ContentView: View {
    let reviews: [Review] = [
        // Add your Review objects here or use the example reviews
    ]

    // The rest of the code will be added in subsequent steps...
}
```

Inside the ContentView struct, set up the horizontal scroll view to display the reviews. We will use GeometryReader to get the screen's size and ensure that our layout works well across different devices.
```
struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                // The rest of the code will be added in the next step...
            }
        }
    }

    // ...
}
```

Within the VStack, add a ScrollViewReader to handle scrolling to a specific review when it is tapped. Inside the ScrollViewReader, create a ScrollView with a horizontal orientation and set showsIndicators to false to hide the scroll indicators.
```
struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ZStack {
                    VStack {
                        Image("IMG_3201")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                        Spacer()
                    }
                    .opacity(0)

                    VStack {
                        VStack(spacing: 23) {
                            // Reviews list
                            ScrollViewReader { proxy in
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 10) {
                                        // The rest of the code will be added in the next step...
                                    }
                                    .fixedSize(horizontal: false, vertical: true)
                                    .padding([.leading, .trailing], leftRightPadding)
                                }
                            }
                        }
                        .padding(.top, 0)
                        Spacer()
                    }
                    .padding(.top, 10)
                }
            }
        }
    }

    // ...
}
```

Inside the HStack, use a ForEach loop to iterate through the reviews array and display individual reviews as cards. Each card will have the review's title, date, star ratings, username, and a truncated body.
```
struct ContentView: View {
    // ...

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ZStack {
                    VStack {
                        Image("IMG_3201")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                        Spacer()
                    }
                    .opacity(0)

                    VStack {
                        VStack(spacing: 23) {
                            // Reviews list
                            ScrollViewReader { proxy in
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 10) {
                                        ForEach(reviews, id: \.id) { review in
                                            VStack(spacing: 3) {
                                                // Review title & date
                                                HStack(spacing: 10) {
                                                    Text(review.title)
                                                        .font(.system(size: 15.2, weight: .semibold))
                                                    Spacer()
                                                    Text(dateFormatter.string(from: review.timestamp))
                                                        .font(.system(size: 15, weight: .regular))
                                                        .foregroundColor(.gray)
                                                }

                                                // Star ratings & username
                                                HStack(spacing: 10) {
                                                    HStack(spacing: 2.5) {
                                                        ForEach(Array((1...review.starRating).enumerated()), id: \.offset) { index, element in
                                                            Image(systemName: "star.fill")
                                                                .resizable()
                                                                .frame(maxWidth: 12, maxHeight: 12)
                                                                .foregroundColor(.orange)
                                                        }
                                                    }
                                                    Spacer()
                                                    Text(review.username)
                                                        .font(.system(size: 15.3, weight: .regular))
                                                        .foregroundColor(.gray)
                                                }

                                                // Body
                                                Text(review.body)
                                                    .frame(maxWidth: .infinity, alignment: .leading)
                                                    .disabled(true)
                                                    .font(.system(size: 15.1, weight: .regular))
                                                    .padding(.top, 9)
                                                    .lineSpacing(4.3)
                                                    .lineLimit(7)
                                                Spacer()
                                            }
                                            .padding(.top, 16)
                                            .padding(.bottom, 23)
                                            .padding([.leading, .trailing], 20)
                                            .frame(width: geometry.size.width - ((leftRightPadding * 2)))
                                            .frame(maxHeight: .infinity)

                                            .background(Color(uiColor: .secondarySystemBackground).opacity(1))
                                            .cornerRadius(10)

                                            // Scroll to item on tap
                                            .gesture(
                                                TapGesture()
                                                    .onEnded { _ in
                                                        withAnimation {
                                                            proxy.scrollTo(review.id, anchor: .center)
                                                        }
                                                    }
                                            )
                                        }
                                    }
                                }
                            }
                        }
                        .padding(.top, 0)
                        Spacer()
                    }
                    .padding(.top, 10)
                }
            }
        }
    }

    // ...
}
```

```
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```