Pull down to close gesture was reseted if there is a timer running

[steventong]

When a timer is started, the pull down gesture will be reseted.

Environment and sdk:
iOS 18 SDK / macOS 15

sample code: https://github.com/steventong/MusicDemo

2024-10-05.17.26.11.mp4

If the timer is not started, the animation is perfect. (0:00 ~ 0:14 / 00:36 ~ end)
But if there is a timer(like a music player progress time), the close animation will be broken. (14s~36s)

[LeoNatan]

This is probably some conflict with the state. Please attach the project in the video so I can take a look. Thanks

[steventong]

Hi Leo

After try some times, let me describe it more, the parent view is stable, was not been redrawn, but the conflict was still there.

The global state object was been created in top App class, and pass it to it's children views. Maybe it's not a good design ,but I think its's a common usage?

I just update my codes to abvow project, maybe you can check it later when it's convenient for you.

Additionally, I add a extra "close" button, when click the "Close" button, #56 this issue was reproduced. Hope this can help you as well.

Really appreciate.

Some codes:

@main
struct MusicDemoApp: App {
    @StateObject private var musicPlayerEnv = MusicPlayerEnv()
    @StateObject private var musicPlayerTimerEnv = MusicPlayerTimerEnv()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(musicPlayerEnv)
                .environmentObject(musicPlayerTimerEnv)
        }
    }
}

struct ContentView: View {
    @EnvironmentObject var musicPlayerEnv: MusicPlayerEnv

    var body: some View {
        print("the root view is being redrawn")

        return VStack {
            Text("Root View")
                .font(.largeTitle)
                .padding(20)
        }
        .popup(isBarPresented: $musicPlayerEnv.isBarPresented,
               isPopupOpen: $musicPlayerEnv.isPopupOpen) {
            // player view
            PlayerView()
                .popupTitle(musicPlayerEnv.title, subtitle: musicPlayerEnv.subTitle)
        }
        .popupBarStyle(.floating)
        .popupInteractionStyle(.customizedSnap(percent: 0.2))
        .popupCloseButtonStyle(.none)
        .popupBarProgressViewStyle(.none)
    }
}

struct PlayerView: View {
    @EnvironmentObject var musicPlayerEnv: MusicPlayerEnv
    @EnvironmentObject var musicPlayerTimerEnv: MusicPlayerTimerEnv

    var body: some View {
        print("the player view is being redrawn")

        return VStack {
            Spacer()

            Text("Player View")
                .font(.largeTitle)

            Text("Timer: \(musicPlayerTimerEnv.progress)")
                .font(.largeTitle)
                .padding(20)

            Button(action: {
                musicPlayerTimerEnv.startOrPauseTimer()
            }, label: {
                Text(musicPlayerTimerEnv.isPlaying ? "PAUSE" : "PLAY")
                    .background(.red)
                    .font(.largeTitle)
                    .padding()

            })

            Button(action: {
                musicPlayerEnv.isPopupOpen = false
            }, label: {
                Text("Close Player View")
                    .background(.green)
                    .font(.title)
                    .padding()
            })

            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.blue)
    }
}

class MusicPlayerEnv: ObservableObject {
    @Published var isBarPresented = true
    @Published var isPopupOpen = false

    @Published var title = "Title"
    @Published var subTitle = "SubTitle"

}


class MusicPlayerTimerEnv: ObservableObject {
  
    @Published var progress: Double = 0

    @Published var isPlaying = false
    @Published var timerCancellable: Cancellable?

    func startOrPauseTimer() {
        if isPlaying {
            stopTimer()
        } else {
            startTimer()
        }
    }

    func startTimer() {
        isPlaying = true
        timerCancellable = Timer.publish(every: 0.1, on: .main, in: .common)
            .autoconnect()
            .sink { _ in
                self.progress += 0.1
            }
    }

    func stopTimer() {
        isPlaying = false
        timerCancellable?.cancel()
    }
}

[steventong]

2024-10-05.20.15.42.mp4

[LeoNatan]

More than likely there is some improvement necessary in the framework. I was just saying in general. I’m not super familiar with how SwiftUI decides what it looks at when deciding which view hierarchy to invalidate, especially with the relatively new observation stuff. That’s why I have a distinct dislike for React/SwiftUI style UI frameworks; it’s all black-box magic with unstable and unpredictable results across runs or OS updates.

[LeoNatan]

I think I understand why the issue happens. Your container view is not being redrawn, but your content view is, which sets popup stuff, which triggers state reapply.

the player view is being redrawn
handlePopupState
the player view is being redrawn
handlePopupState
the player view is being redrawn
handlePopupState

I’ll create an issue from this discussion.

[LeoNatan]

#58