How to create an instruction prompt after pressing a button?

Question

I'm creating an instruction dialog that will start after pressing a button. I want the instruction to be displayed in the same view and just get replaced after a few seconds to display the next instruction.

The instructions are stored in a text array.

Any help will be greatly appreciated as I'm having trouble finding a solution

@State var showPrompt = false
@State var textToUpdate = ""
let instructionTo = ["hi", "bye"]

VStack {

    Text(textToUpdate)
        .frame(width: UIScreen.main.bounds.width - 80, height: 350)
    Button(action: {
            if(self.showPrompt == false)
            {
                self.showPrompt = true
            }
            else{
                self.showPrompt = false
            }
        }) {
            if(self.showPrompt == false)
            {
                 Text("Start")
            }
            else
            {
                 Text("Stop")
                 // some for loop that would update the text
                 // and have a delay of 5 seconds between each 
                 // index in the array
            }
        }

}

please post some of your code and an image of what you're trying to achieve. — Mohammad Rahchamani, Sep 20 '20 at 19:49
@JohnB As an alternative you can look at the TabView with PageTabViewStyle - see [this answer](https://stackoverflow.com/a/63159912/8697793). It may help you if you want to create an onboarding view. — pawello2222, Sep 20 '20 at 20:50

score 0 · Answer 1 · answered Sep 20 '20 at 22:01

you can add another State variable for the Text value.

here is a sample code, assuming that you want to start changing the text after tapping on the start button after 5 seconds. I just added an empty string to show an empty text at first.

struct TestView: View {
    @State var showPrompt = false
    @State var textIndex = 0
    let instructionTo = ["", "hi", "bye"]
    
    var body: some View {
        
        VStack {

            Text(instructionTo[textIndex])
                .frame(width: UIScreen.main.bounds.width - 80, height: 350)
            Button(action: {
                    if(self.showPrompt == false)
                    {
                        self.showPrompt = true
                        // update text value
                        self.updateText()
                    }
                    else{
                        self.showPrompt = false
                    }
                }) {
                    if(self.showPrompt == false)
                    {
                         Text("Start")
                    }
                    else
                    {
                         Text("Stop")
                    }
                }

        }
    }
    
    func updateText() {
        if self.textIndex < self.instructionTo.count - 1 {
            // update text after 5 seconds
            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                self.textIndex += 1
                self.updateText()
            }
        }
    }

}

How to create an instruction prompt after pressing a button?

1 Answers1