How to change SwiftUI TabView dot indicator position?

Question

this is my TabView, and I'd like to change the dot indicator's position to right-bottom. How?

   TabView {
        ForEach (modelData.features, id: \.id) { landmark in
            landmark.image
                .resizable()
                .scaledToFill()
                .frame(height: 200)
                .clipped()
        }
    }
    .frame(height: 200)
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
    .indexViewStyle(PageIndexViewStyle()

Answer 1

I battled with this for a little bit but found this works way better than any other solution. With this approach, you get to keep the native behaviour with scrubbing & the dots that fade away. Along with the flexibility of positioning it anywhere.

struct CustomPageControl: UIViewRepresentable {
    
    let numberOfPages: Int
    @Binding var currentPage: Int
    
    func makeUIView(context: Context) -> UIPageControl {
        let view = UIPageControl()
        view.numberOfPages = numberOfPages
        view.backgroundStyle = .prominent
        view.addTarget(context.coordinator, action: #selector(Coordinator.pageChanged), for: .valueChanged)
        return view
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.numberOfPages = numberOfPages
        uiView.currentPage = currentPage
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent: CustomPageControl
        
        init(_ parent: CustomPageControl) {
            self.parent = parent
        }
        
        @objc func pageChanged(sender: UIPageControl) {
           withAnimation {
             parent.currentPage = sender.currentPage
           }
        }
    }
}

@State var selectedTabIndex: Int = 0

          TabView(selection: $selectedTabIndex) {
                ForEach(Array(zip(images.indices, images)), id: \.0) { index, item in
                    HStack(alignment: .top) {
                        Image(item.imageName)
                            .resizable()
                            .scaledToFill()
                            .tag(index) // <- 'tag' must match 'selectedTabIndex'
                    }
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .indexViewStyle(.page(backgroundDisplayMode: .never))


CustomPageControl(numberOfPages: images.count, currentPage: $selectedTabIndex)