implementation of infinite scroll carousel using SwiftUI

Carousel.swift

import SwiftUI

struct Carousel<Data: RandomAccessCollection, Content: View>: View where Data.Index: Hashable {
    let data: Data
    let content: (Data.Element) -> Content

    let shouldFitWidth: Bool
    let shouldFitHeight: Bool

    @Binding var currentIndex: Int
    @State private var selection = 0
    @State private var reachedLowerBound = false {
        didSet {
            guard reachedLowerBound else { return }
            selection = data.count - 1
        }
    }
    @State private var reachedUpperBound = false {
        didSet {
            guard reachedUpperBound else { return }
            selection = 0
        }
    }

    @State private var contentSize: CGSize?

    init(
        _ data: Data,
        currentIndex: Binding<Int>? = nil,
        shouldFitWidth: Bool = false,
        shouldFitHeight: Bool = true,
        @ViewBuilder content: @escaping (Data.Element) -> Content
    ) {
        self.data = data
        self.shouldFitWidth = shouldFitWidth
        self.shouldFitHeight = shouldFitHeight
        self.content = content
        self._currentIndex = currentIndex ?? Binding<Int> { 0 } set: { _ in }
        selection = self.currentIndex
    }

    var body: some View {
        if data.isEmpty {
            EmptyView()
        } else {
            TabView(selection: $selection) {
                GeometryReader { geometry in
                    contentView(data.last!)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .onAppear {
                            reachedLowerBound = 0 <= geometry.frame(in: .global).minX
                        }
                        .onChange(of: geometry.frame(in: .global)) { frame in
                            reachedLowerBound = 0 <= frame.minX
                        }
                }
                { array in
                    ForEach(array.indices, id: \.self) { index in
                        contentView(array[index])
                    }
                }(Array(data))
                GeometryReader { geometry in
                    contentView(data.first!)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .onAppear {
                            reachedUpperBound = geometry.frame(in: .global).minX <= 0
                        }
                        .onChange(of: geometry.frame(in: .global)) { frame in
                            reachedUpperBound = frame.minX <= 0
                        }
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .onChange(of: selection) {
                currentIndex = $0
            }
            .frame(
                maxWidth: shouldFitWidth ? contentSize?.height ?? .infinity : .infinity,
                maxHeight: shouldFitHeight ? contentSize?.height ?? .infinity : .infinity
            )
        }
    }

    @ViewBuilder
    func contentView(_ element: Data.Element) -> some View {
        if shouldFitWidth || shouldFitHeight {
            content(element)
                .background {
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                let effectiveSize = geometry.frame(in: .global).size
                                if let contentSize {
                                    self.contentSize = CGSize(
                                        width: max(contentSize.width, effectiveSize.width),
                                        height: max(contentSize.height, effectiveSize.height)
                                    )
                                } else {
                                    self.contentSize = effectiveSize
                                }
                            }
                    }
                }
        } else {
            content(element)
        }
    }
}

#Preview {
    struct DummyView: View {
        @State var currentIndex = 0

        var body: some View {
            Carousel(["hare", "tortoise", "dog", "cat", "lizard", "bird", "ant", "ladybug", "fish"], currentIndex: $currentIndex) {
                Image(systemName: $0)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding(24)
            }
            .overlay(alignment: .bottom) {
                Text(verbatim: "\(currentIndex) page")
            }
        }
    }

    return DummyView()
}

#Preview {
    struct Dummy: View {
        @State var selection = 0

        var body: some View {
            Carousel((0...3), currentIndex: $selection, shouldFitHeight: false) {
                Text(verbatim: "page \($0)")
            }
            .overlay(alignment: .bottom) {
                Text("selection: \(selection)")
            }
        }
    }
    return Dummy()
}