SwiftUI - modifiying variable foreach on View before onTapGesture()

Question

Foreach on view must be presented with a View to process.

struct Home : View {

  private var numberOfImages = 3
  @State  var isPresented : Bool = false  
  @State  var currentImage : String = ""

  var body: some View {
    VStack {
      TabView {
        ForEach(1..<numberOfImages+1, id: \.self) { num in
    
        Image("someimage")
            .resizable()
            .scaledToFill()
            .onTapGesture() {
                currentImage = "top_00\(num)"
                isPresented.toggle()
            }
        }
    }.fullScreenCover(isPresented: $isPresented, content: {FullScreenModalView(imageName: currentImage) } )
  }
}

I'm trying to display an image in fullScreenCover. My problem is that the first image is empty. Yes, we can solve this defining at the beginning, however, this will complicate the code according to my experiences.

My question is, is it possible to assign a value to currentImage before the onTapGesture processed.

In short, what is the good practice here.

Answer 1

What you need is to use this modifier to present your full screen modal:

func fullScreenCover<Item, Content>(item: Binding<Item?>, onDismiss: (() -> Void)? = nil, content: @escaping (Item) -> Content) -> some View where Item : Identifiable, Content : View

You pass in a binding to an optional and uses the non optional value to construct a destination:

struct ContentView: View {
    
    private let imageNames = ["globe.americas.fill", "globe.europe.africa.fill", "globe.asia.australia.fill"]
    @State var selectedImage: String?
    
    var body: some View {
        VStack {
            TabView {
                ForEach(imageNames, id: \.self) { imageName in
                    Image(systemName: imageName)
                        .resizable()
                        .scaledToFit()
                        .padding()
                        .onTapGesture() {
                            selectedImage = imageName
                           
                        }
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .automatic))
            .fullScreenCover(item: $selectedImage) { imageName in
                Destination(imageName: imageName)
            }
        }
    }
}

struct Destination: View {
    
    let imageName: String
    
    var body: some View {
        ZStack {
            Color.blue
            Image(
                systemName: imageName
            )
            .resizable()
            .scaledToFit()
            .foregroundColor(.green)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

You will have to make String identifiable for this example to work (not recommended):

extension String: Identifiable {
    public var id: String { self }
}