ios – Nested Tab Views Scrolling SwiftUI


I am facing an issue with nested TabViews for an iOS project with SwiftUI.
In the code below, you can see that I have 2 TabVies vertically stacked and each TabView has an inner TabView with three images. This works how I want it, meaning I always scroll element wise – nothing in between.

But when I scroll horizontally, and get to the first/last image and scroll again, nothing happens. Normally, in apps like Instagram or BeReal, when you scroll further, the last image is scrolled a bit to the side, but not more, because there is no next image. I am talking about the ‘animation’ that signals the user, that there is no further image, but his scrolling was recognised. In my current solution, it feels like the scrolling was not recognised.

I don’t know what the issue could be. For the outer TabView, it works and if I just have the inner Tab View for one image, it works too.

Hope somebody can help 🙂

`
import SwiftUI

struct ScrollablePieceView: View {

let pieces: [(name: String, amount: Int)] = [
    ("julz", 3),
    ("klara", 3)
]

var body: some View {
    GeometryReader { geometry in
        TabView {
            ForEach(pieces.indices, id: \.self) { pieceIndex in
                let piece = pieces[pieceIndex]
                let imageCount = piece.amount
                let imageNamePrefix = piece.name
                
                TabView {
                    ForEach(1...imageCount, id: \.self) { imageIndex in
                        ImageItemView(imageName: "\(imageNamePrefix)_\(imageIndex)")
                    }
                }
                .frame(
                    width: geometry.size.width,
                    height: geometry.size.height * 0.65
                )
                .rotationEffect(.degrees(-90))
                .tabViewStyle(PageTabViewStyle())
            }
        }
        .frame(
            width: geometry.size.height,
            height: geometry.size.width
        )
        .rotationEffect(.degrees(90), anchor: .topLeading)
        .offset(x: geometry.size.width)
        .tabViewStyle(
            PageTabViewStyle(indexDisplayMode: .never)
        )
    }
}

}
`

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img