SwiftUI TabView with .page Style: GeometryReader minX Not Updating on Page Scroll

Question

Created 1d

Replies 1

Boosts 0

Participants 2

I am working on a SwiftUI TabView with the .page style (indexDisplayMode: .never). I want to track the minX property of each tab's view using GeometryReader. However, I noticed inconsistent behavior when scrolling between pages.

Here's the simplified code:

import SwiftUI

struct ContactScreenView: View {
    let text: String
    var body: some View {
        ZStack {
            Color.red.opacity(0.4).ignoresSafeArea()
            
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
            }
            .padding()
        }
    }
}

struct DemoView: View {
    @State private var selectedTab: Int = 0
    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                ContactScreenView(text: "followers")
                    .background(
                        GeometryReader(content: { geometry -> Color in
                            let minX = geometry.frame(in: .global).minX
                            print(minX)
                            return Color.clear
                        })
                    )
                    .tag(0)
                ContactScreenView(text: "following")
                    .tag(1)
                ContactScreenView(text: "blocked")
                    .tag(2)
                ContactScreenView(text: "Shared")
                    .tag(3)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
        }
    }
}

#Preview {
    DemoView()
}

Observed Behavior:

When I scroll to the second page (index 1), the minX value updates correctly to screenWidth * 1, as expected.

When I scroll to the third page (index 2), the minX value doesn't update at all.

The ideal behavior would be for minX to update to screenWidth * 2 for the third page and so on, for subsequent pages.

Expected Behavior:

The minX value should correctly reflect the global position of each page as I scroll through the TabView. For example: Page 0: minX = 0 Page 1: minX = screenWidth * 1 Page 2: minX = screenWidth * 2 And so on.

Boost

Answer 1

DTS Engineer OP

Apple

1d

@appleDev132 Could you try reading the frame within the context of the View. For example:

struct ContactScreenView: View {
    let text: String
    var body: some View {
        ZStack {
            Color.red.opacity(0.4).ignoresSafeArea()
            
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
            }
            .padding()
        }
        .background(
            GeometryReader(content: { geometry -> Color in
                let minX = geometry.frame(in: .global).minX
                print(minX)
                return Color.clear
            })
        )
    }
}

0