Embedded view partially refreshed (only for Android)

[lhoumeau]

This issue is not so far the previous one solved by @Vitorsilveira31.

With Skip Lite, I want to run a quiz (here an example with a Country / 4 Capitals). On button tap, the button turn to green or red if OK / not OK. A replay button allows to reset the game. BUT: on iOS, the deck is reset and all the buttons go back to white. On Android, the deck is reset but buttons don't go back (stay on red or white). An idea? (after many tries and searches)

import SwiftUI

struct QuizTestView: View {
    
    /// View properties
    
    struct country {
            let countryName: String
            let capital: String
    }
    let France = country(countryName: "France", capital: "Paris")
    let UK = country(countryName:"UK", capital:"London")
    let Germany = country(countryName:"Germany", capital:"Berlin")
    let Italy = country(countryName:"Italy", capital:"Rome")
    let Spain = country(countryName:"Spain", capital:"Madrid")
    let Portugal = country(countryName:"Portugal", capital:"Lisbon")
    let Greece = country(countryName:"Greece", capital:"Athens")
    
    @State private var refresh = false
    @State private var didTap: [Bool] = Array(repeating: false, count: 4)

    var body: some View {

        let countries: [country] = [France, UK, Germany, Italy, Spain, Portugal, Greece]

        var quizDeck = countries.shuffled().prefix(4)

        let theSolution: Int = Int.random(in: 0..<4)

        VStack {
            
            var didTap: [Bool] = Array(repeating: false, count: 4)
            
            HStack {
                VStack(alignment: .leading) {
                    ZStack {
                        
                        VStack {
                            HStack {
                                Spacer()
                                Button {
                                    
                                    refresh = !refresh
                                    didTap = Array(repeating: false, count: 4)
                                    quizDeck = countries.shuffled().prefix(4)

                                } label: {
                                    
                                    Text("Replay")
                                        .padding(.top)
                                        .foregroundStyle(.red)
                                }
                            }
                            Spacer()
                        }
                        
                        Text(quizDeck[theSolution].countryName)
                            .font(.title)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity, alignment: .center)
                    }
                }
            }
            .padding()
            .frame(maxWidth: .infinity, maxHeight: 250)
            .background(Color.black)

            LazyVGrid(columns: [GridItem(.adaptive(minimum: 150))]) {
                quizButton(capital: quizDeck[0].capital, isTheSolution: theSolution == 0, didTap: didTap[0])
                quizButton(capital: quizDeck[1].capital, isTheSolution: theSolution == 1, didTap: didTap[1])
                quizButton(capital: quizDeck[2].capital, isTheSolution: theSolution == 2, didTap: didTap[2])
                quizButton(capital: quizDeck[3].capital, isTheSolution: theSolution == 3, didTap: didTap[3])
            }

            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .id(refresh)
    }
}

struct quizButton: View {
    
    let capital: String
    let isTheSolution: Bool
    @State var didTap: Bool

    var body: some View {
        
        Button {
            didTap = true
        }
        label: {
            VStack {
                Text(capital)
                    .padding()
                    .foregroundStyle(didTap ? Color.white : Color.black)
                    .frame(width: 160, height: 160)
            }
            .foregroundStyle(.black)
            .background(didTap ? (isTheSolution ? Color.green : Color.red) : Color.white)
            .border(.gray)
        }
    }
}

[marcprux]

I'm not sure, but these variables in the View's body are concerning:

let countries: [country] = [France, UK, Germany, Italy, Spain, Portugal, Greece]
var quizDeck = countries.shuffled().prefix(4)
let theSolution: Int = Int.random(in: 0..<4)

Since you never know when body will be re-evaluated, these may have unpredictable/unexpected values.

What happens if you promote them to the View's state, like:

@State var countries: [country] = [France, UK, Germany, Italy, Spain, Portugal, Greece]
@State var quizDeck = countries.shuffled().prefix(4)
@State var theSolution: Int = Int.random(in: 0..<4)

[Vitorsilveira31]

I believe you can change from @State to @binding. That way, the state comes from QuizTestView instead of being recreated in quizButton every time

From:

struct quizButton: View {
….
    @State var didTap: Bool

To:

struct quizButton: View {
….
    @Binding var didTap: Bool

[lhoumeau]

Thank you vitor. When I apply your proposal, then the Android version is OK but the iOS version is down. Curious.

So I've a workaround with:

#if SKIP
@Binding var didTap:Bool
#else
@State var didTap: Bool
#endif

but there is an impact on the call method, different between iOS and Android

                #if SKIP
                quizButton(capital: quizDeck[0].capital, isTheSolution: theSolution == 0, didTap: $didTap[0])
                quizButton(capital: quizDeck[1].capital, isTheSolution: theSolution == 1, didTap: $didTap[1])
                quizButton(capital: quizDeck[2].capital, isTheSolution: theSolution == 2, didTap: $didTap[2])
                quizButton(capital: quizDeck[3].capital, isTheSolution: theSolution == 3, didTap: $didTap[3])
                #else
                quizButton(capital: quizDeck[0].capital, isTheSolution: theSolution == 0, didTap: didTap[0])
                quizButton(capital: quizDeck[1].capital, isTheSolution: theSolution == 1, didTap: didTap[1])
                quizButton(capital: quizDeck[2].capital, isTheSolution: theSolution == 2, didTap: didTap[2])
                quizButton(capital: quizDeck[3].capital, isTheSolution: theSolution == 3, didTap: didTap[3])
                #endif

Not very elegant (the reason why it's a workaround), but I don't have a better solution.

[lhoumeau]

The full script:

//
//  testquiz.swift
//  latinae-skip
//
//  Created by laurent Houmeau on 15/10/2025.
//


import SwiftUI

struct QuizTestView: View {
    
    /// View properties
    
    struct country {
            let countryName: String
            let capital: String
    }
    let France = country(countryName: "France", capital: "Paris")
    let UK = country(countryName:"UK", capital:"London")
    let Germany = country(countryName:"Germany", capital:"Berlin")
    let Italy = country(countryName:"Italy", capital:"Rome")
    let Spain = country(countryName:"Spain", capital:"Madrid")
    let Portugal = country(countryName:"Portugal", capital:"Lisbon")
    let Greece = country(countryName:"Greece", capital:"Athens")
    
    @State private var refresh = false
    @State private var didTap: [Bool] = Array(repeating: false, count: 4)

    var body: some View {

        let countries: [country] = [France, UK, Germany, Italy, Spain, Portugal, Greece]

        var quizDeck = countries.shuffled().prefix(4)

        let theSolution: Int = Int.random(in: 0..<4)

        VStack {
            
            HStack {
                VStack(alignment: .leading) {
                    ZStack {
                        
                        VStack {
                            HStack {
                                Spacer()
                                Button {
                                    
                                    refresh = !refresh
                                    didTap = Array(repeating: false, count: 4)
                                    quizDeck = countries.shuffled().prefix(4)

                                } label: {
                                    
                                    Text("Replay")
                                        .padding(.top)
                                        .foregroundStyle(.red)
                                }
                            }
                            Spacer()
                        }
                        
                        Text(quizDeck[theSolution].countryName)
                            .font(.title)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity, alignment: .center)
                    }
                }
            }
            .padding()
            .frame(maxWidth: .infinity, maxHeight: 250)
            .background(Color.black)

            LazyVGrid(columns: [GridItem(.adaptive(minimum: 150))]) {
                #if SKIP
                quizTestButton(capital: quizDeck[0].capital, isTheSolution: theSolution == 0, didTap: $didTap[0])
                quizTestButton(capital: quizDeck[1].capital, isTheSolution: theSolution == 1, didTap: $didTap[1])
                quizTestButton(capital: quizDeck[2].capital, isTheSolution: theSolution == 2, didTap: $didTap[2])
                quizTestButton(capital: quizDeck[3].capital, isTheSolution: theSolution == 3, didTap: $didTap[3])
                #else
                quizTestButton(capital: quizDeck[0].capital, isTheSolution: theSolution == 0, didTap: didTap[0])
                quizTestButton(capital: quizDeck[1].capital, isTheSolution: theSolution == 1, didTap: didTap[1])
                quizTestButton(capital: quizDeck[2].capital, isTheSolution: theSolution == 2, didTap: didTap[2])
                quizTestButton(capital: quizDeck[3].capital, isTheSolution: theSolution == 3, didTap: didTap[3])
                #endif
            }

            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .id(refresh)
    }
}

struct quizTestButton: View {
    
    let capital: String
    let isTheSolution: Bool
    #if SKIP
    @Binding var didTap:Bool
    #else
    @State var didTap: Bool
    #endif

    var body: some View {
        
        Button {
            didTap = true
        }
        label: {
            VStack {
                Text(capital)
                    .padding()
                    .foregroundStyle(didTap ? Color.white : Color.black)
                    .frame(width: 160, height: 160)
            }
            .foregroundStyle(.black)
            .background(didTap ? (isTheSolution ? Color.green : Color.red) : Color.white)
            .border(.gray)
        }
    }
}

[marcprux]

Are you sure the iOS side is really working with that workaround? The Button's color will change, but because quizTestButton.didTap is State and not a Binding, it won't be actually communicating the selection state up to QuizTestView.didTap.

I still think the use of local variables I mentioned in https://github.com/orgs/skiptools/discussions/515#discussioncomment-14690139 is problematic, especially that let theSolution: Int = Int.random(in: 0..<4). You don't ever know when body will be called, and how many times it might be called, so it seems to me that theSolution would be very unstable. Did you try promoting those all up the @State properties of QuizTestView?