Show partial previous and next item on PageTabViewStyle (SwiftUI 2.0) or PageViewController/PageView (with UIKit interface)

Question

I am working with SwiftUI 2.0 and actually, I am happy that Apple introduced PageTabViewStyle to simply create a pager. But unfortunately, I am not able to implement it in a way I would like to. Is it possible to create a pager (PageTabViewStyle) that shows a little piece of the previous and next item?

Picture 1: Desired behavior

I tried it with the new PageTabViewStyle and some combinations of paddings and/or offsets and I also tried to interface with UIKit (PageView / PageViewController / PAgeViewControl). But same behavior here, I only see the selected item, even if it doesn’t cover the entire width.

Picture 2: Current behavior

SwiftUI 2.0 - PageTabViewStyle integration

The following code snipped is a very simple implementation of the PageTabViewStyle, but if you have ideas, you can show me on this example what I can do to make it work:

import SwiftUI

struct ContentView: View {

    let colors: [Color] = [.red, .green, .yellow, .blue]
    
    var body: some View {
        
        TabView {
            ForEach(0..<6) { index in
                HStack() {
                    Text("Tab \(index)")
                        .font(.title)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(colors[index % colors.count])
                        .cornerRadius(8)
                }
                .frame(width: 300, height: 200)
            }
        }.tabViewStyle(PageTabViewStyle())
    }
}

UIKit interfacing

The following code is from the example by Apple, maybe you can show me here how to get the desired behavior:

PageViewController

/*
See LICENSE folder for this sample’s licensing information.

Abstract:
A view that wraps a UIPageViewController.
*/

import SwiftUI
import UIKit

struct PageViewController: UIViewControllerRepresentable {
    var controllers: [UIViewController]
    @Binding var currentPage: Int

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .horizontal,
            options: [UIPageViewController.OptionsKey.interPageSpacing: 5]
        )
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

    func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
        pageViewController.setViewControllers(
            [controllers[currentPage]], direction: .forward, animated: true)
    }

    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: PageViewController

        init(_ pageViewController: PageViewController) {
            self.parent = pageViewController
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index == 0 {
                return parent.controllers.last
            }
            return parent.controllers[index - 1]
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index + 1 == parent.controllers.count {
                return parent.controllers.first
            }
            return parent.controllers[index + 1]
        }

        func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
            if completed,
                let visibleViewController = pageViewController.viewControllers?.first,
                let index = parent.controllers.firstIndex(of: visibleViewController) {
                parent.currentPage = index
            }
        }
    }
}

PageView

/*
See LICENSE folder for this sample’s licensing information.

Abstract:
A view for bridging a UIPageViewController.
*/

import SwiftUI

struct PageView<Page: View>: View {
    var viewControllers: [UIHostingController<Page>]
    @State var currentPage = 0

    init(_ views: [Page]) {
        self.viewControllers = views.map { UIHostingController(rootView: $0) }
    }

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            PageViewController(controllers: viewControllers, currentPage: $currentPage)
            PageControl(numberOfPages: viewControllers.count, currentPage: $currentPage)
                .padding(.trailing)
                
        }
    }
}

Thanks, Sebastian