Modal view content disappears upon dismissal

[maxkazakov]

When I set the parent’s destination state to nil or call dismiss using the dismiss dependency in the child view, the child view content turns white (gets wiped out) before the dismissal animation begins. This looks glitchy and doesn’t occur when using the native fullScreenCover methods. Is there a known workaround for this?

Tested on iOS 18.5, both simulator and device.

RocketSim_Recording_iPhone_16_6.1_2025-06-13_23.37.27.mp4

import SwiftUI
import ComposableArchitecture

@Reducer
struct ContentFeature {
    @ObservableState
    struct State {
        @Presents var destination: Destination.State?
    }

    enum Action {
        case buttonTapped
        case destination(PresentationAction<Destination.Action>)
    }

    @Reducer
    enum Destination {
        case modal(ModalFeature)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .buttonTapped:
                state.destination = .modal(.init())
                return .none
            case .destination(.presented(.modal(.tapNilOutDestination))):
                state.destination = nil
                return .none
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination) {
            Destination.body
        }
    }
}

@Reducer
struct ModalFeature {

    @Dependency(\.dismiss) var dismiss

    @ObservableState
    struct State: Equatable {}

    enum Action {
        case tapNilOutDestination
        case tapCallDismiss
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .tapNilOutDestination:
                return .none
            case .tapCallDismiss:
                return .run { _ in await self.dismiss() }
            }
        }
    }
}

struct ContentView: View {
    @Bindable var store: StoreOf<ContentFeature>

    var body: some View {
        VStack {
            Button("Present modal") {
                store.send(.buttonTapped)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.black)
        .fullScreenCover(
            store: self.store.scope(state: \.$destination.modal, action: \.destination.modal),
            content: { ModalView(store: $0) }
        )
    }
}

struct ModalView: View {
    @Bindable var store: StoreOf<ModalFeature>

    var body: some View {
        VStack {
            Text("This is a fullscreen modal")
                .font(.title)
                .padding()

            Button("Nil out destination") {
                store.send(.tapNilOutDestination)
            }

            Button("Call dismiss()") {
                store.send(.tapCallDismiss)
            }
            .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.red))
    }
}

#Preview {
    NavigationStack {
        ContentView(
            store: Store(
                initialState: ContentFeature.State(),
                reducer: ContentFeature.init
            )
        )
    }
}

[mbrandonw]

Hi @maxkazakov, this API for fullscreenCover is old and deprecated:

.fullScreenCover(
  store: self.store.scope(state: \.$destination.modal, action: \.destination.modal),
  content: { ModalView(store: $0) }
)

The modern style is this:

.fullScreenCover(
  item: $store.scope(state: \.destination?.modal, action: \.destination.modal)
) { 
  …
}

This is the style recommended throughout the documentation and in the migration guide for 1.7, where this tool was introduced.

[maxkazakov]

Thank you so much, @mbrandonw ! My bad, I didn't complete the migration properly.