SwiftUI Introduction or tutorial controller on app

Question

I am trying to add an introduction to my SwiftApp like I did before in Objective-C with EAIntroView:

https://github.com/ealeksandrov/EAIntroView

I am working with SwiftUI for the first time and I have a lot of lacks. At this moment, I have my app showing the main view like this:

    var body: some View {
        Group {
            if mainhomeMode == .mylists {
                MyLists()
                .onReceive(publisher) { (payload) in
                    self.toggleMainView()
                }

            } else {
                CarsHome()
                .onReceive(publisher) { (payload) in
                    self.toggleMainView()
                }
            }
        }
     }

This is a body in a swift view showing MyLists() or CarsHome() when the app loads, but I need to load an intro view when the app loads for the first time or show the same intro view on button tap as many times the user wants.

How can I implement an intro controller with several scrolling views like EAIntroView?

Answer 1

You'll need to use a View that inherits from UIViewRepresentable:

https://developer.apple.com/documentation/swiftui/uiviewrepresentable

A view that represents a UIKit view.

import SwiftUI
import EAIntroView

struct ContentView: UIViewRepresentable {
    let sampleDescription1 = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    let sampleDescription2 = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore."
    let sampleDescription3 = "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."
    let sampleDescription4 = "Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit."

    class Coordinator: NSObject, EAIntroDelegate {
        var parent: ContentView

        init(_ parent: ContentView) {
            self.parent = parent
        }

        func introDidFinish(_ introView: EAIntroView!, wasSkipped: Bool) {
            if (wasSkipped) {
                print("Intro skipped")
            } else {
                print("Intro finished")
            }
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> EAIntroView {
        let view = UIView(frame: UIScreen.main.bounds)

        let page1 = EAIntroPage()
        page1.title = "Hello world"
        page1.desc = sampleDescription1
        page1.bgImage = UIImage(named: "bg1")
        page1.titleIconView = UIImageView(image: UIImage(named: "title1"))

        let page2 = EAIntroPage()
        page2.title = "This is page 2"
        page2.desc = sampleDescription2
        page2.bgImage = UIImage(named: "bg2")
        page2.titleIconView = UIImageView(image: UIImage(named: "title2"))

        let page3 = EAIntroPage()
        page3.title = "This is page 3"
        page3.desc = sampleDescription3
        page3.bgImage = UIImage(named: "bg3")
        page3.titleIconView = UIImageView(image: UIImage(named: "title3"))

        let page4 = EAIntroPage()
        page4.title = "This is page 4"
        page4.desc = sampleDescription4
        page4.bgImage = UIImage(named: "bg4")
        page4.titleIconView = UIImageView(image: UIImage(named: "title4"))

        let intro = EAIntroView(frame: view.bounds, andPages: [page1, page2, page3, page4]);
        intro?.delegate = context.coordinator
        intro?.skipButtonAlignment = .center
        intro?.skipButtonY = 80
        intro?.pageControlY = 42
        intro?.show(in: view, animateDuration: 0.3)

        view.addSubview(intro!)

        return intro!
    }

    func updateUIView(_ view: EAIntroView, context: Context) {

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

NOTE: You will need to import the images from the example project folder here.