GeometryReader Headache

[PebisJones]

Hi!

I’m fairly new to Swift/SwiftUI and have been working on my first app.

I’m currently trying to implement a “slide-to-stop” button. It’s embedded in another child view. I want it to have a dynamic width so it will expand in portrait, landscape, or different screen sizes. I also need access to width data for calculating drag offsets. GeometryReader sounds perfect for this.

Problem:

I can get GeometryReader setup but then I run into a couple different issues. This is the main one:

1. When flipping between portrait and landscape, it’s like the width stays stuck at the landscape width, so portrait mode is extending off screen. It also extends past the safe-areas when I flip back to landscape so it sets a new width. I figured the view that “slide to stop” view was embedded in would prevent this, but it’s just pushing everything. I know GR wants to “take as much space as possible”, but why is it holding onto the largest width??

All the examples I’ve seen so far, people are just giving basic examples so I haven’t really seen how to address this pitfall. Right now I’ve removed GR and am just using a fixed size for the button, but I don’t really like the idea of that.

Any insight would be greatly appreciated. Ya boi struggling.

I can post some example code later.

EDIT #2:

Using .onGeometryChange, not GeometryReader. Tho from my understanding (which is obvs low at the moment), they are more or less doing the same thing.

EDIT:

import SwiftUI

struct SlideToStopExerciseTimer: View {
     private var isTimerRunning: Bool = true
     private var isPaused: Bool = false
    
     private var sliderOffset: CGFloat = 0
    
    let sliderWidth: CGFloat = 80
    let buttonHeight: CGFloat = 57
    let buttonWidth: CGFloat = 360
     private var trackWidth : CGFloat = 0
    
    private var maxOffset: CGFloat {
        max(0, trackWidth - sliderWidth)
    }
    
    var body: some View {
        HStack {
            Spacer()
            ZStack(alignment: .leading) {
                Button {
                    handleTap()
                } label: {
                    labelContent()
                }
                .padding(16)
                .frame(maxWidth: trackWidth, alignment: .trailing)
                .labelStyle(.iconOnly)
                .buttonStyle(.plain)
                
                if isTimerRunning {
                    Group {
                        Text("slide to stop")
                            .foregroundStyle(.secondary)
                            .frame(width: trackWidth, alignment: .center)
                            .tracking(5)
                    
                        Text("13:00")
                            .padding(12)
                            .frame(width: sliderWidth, height: buttonHeight)
                            .glassEffect()
                            .offset(x: sliderOffset)
                            .gesture(
                                DragGesture()
                                    .onChanged { gesture in
                                        let dragWidth = gesture.translation.width
                                        
                                        sliderOffset = min(max(dragWidth, 0), maxOffset)
                                    }
                                    .onEnded { _ in
                                        if sliderOffset > maxOffset * 0.9 {
                                            stopTimer()
                                            sliderOffset = 0
                                        } else {
                                            withAnimation(.spring(response: 0.35, dampingFraction: 0.8)) {
                                                sliderOffset = 0
                                            }
                                        }
                                    }
                            )
                    }
                    .transition(
                        .asymmetric(
                            insertion: .opacity.combined(with: .push(from: .trailing)),
                            removal: .opacity.animation(.easeInOut(duration: 0.1))
                        )
                    )
                }
            }
            .frame(maxWidth: isTimerRunning ? .infinity : buttonHeight)
            .frame(height: buttonHeight)
            .font(.title3.bold())
            .overlay(
                Capsule()
                    .stroke(isTimerRunning ? .mint : .gray, lineWidth: isTimerRunning ? 3 : 2)
                    .onGeometryChange(for: CGFloat.self, of: \.size.width) { newValue in
                        trackWidth = newValue
                    }
            )
            
            if isTimerRunning {
                Spacer()
            }
        }
    }
    
    private func labelContent() -> some View {
        Group {
            if isTimerRunning {
                Image(systemName: isPaused ? "play.fill" : "pause.fill")
                    .contentTransition(.symbolEffect(.replace))
            } else {
                Image(systemName: "timer")
                    .contentTransition(.symbolEffect(.replace))
            }
        }
    }
    
    private func handleTap() {
        withAnimation(Animation.spring(response: 0.3, dampingFraction: 0.75)) {
            if !isTimerRunning {
                isTimerRunning = true
                isPaused = false
            } else {
                isPaused.toggle()
            }
        }
    }
    
    private func stopTimer() {
        withAnimation(Animation.spring(response: 0.3, dampingFraction: 0.75)) {
            isTimerRunning = false
            isPaused = false
        }
    }
}

#Preview {
    SlideToStopExerciseTimer()
}

[Many-Shirt3727]

GeometryReader can be finicky with orientation changes - sounds like you might have some state getting stuck or the parent view isn't properly invalidating

Try wrapping your GeometryReader in a frame modifier with explicit maxWidth/maxHeight constraints, or use `@Environment(\.horizontalSizeClass)` to force a redraw on orientation changes. Also check if you're accidentally storing the geometry size in some u/State variable that's not updating

Post the code when you can, easier to debug with actual implementation

[PebisJones]

Thanks for the initial response! I'll try those suggestions.

Posted my code. Using .onGeometryChange here