SwiftUI: Tabview, keep state when changing tab

Question

I create an application, with several tabs, for each tab there is a webview.

My webview:

struct WebView : UIViewRepresentable {

    let request: URLRequest


    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }

}

The problem when im changing tab, the web view recreate again. I want create the webviews only once, then every time I change tab, it keeped state And webview will not recharge each time

My code:

struct ContentView: View {

    var body: some View {
        TabView {
            WebView(request: URLRequest(url: URL(string: "https://www.google.com/")!))
                    .tabItem {
                        Image(systemName: "1.circle")
                        Text("Messenger")
                    }.tag(0)

            WebView(request: URLRequest(url: URL(string: "https://facebook.com/login")!))
                    .tabItem {
                        Image(systemName: "2.circle")
                        Text("Trello")
                    }.tag(1)
        }
    }

}

Possible duplicate of [TabView resets navigation stack when switching tabs](https://stackoverflow.com/questions/57772137/tabview-resets-navigation-stack-when-switching-tabs) — LuLuGaGa, Sep 24 '19 at 19:49

score 4 · Answer 1 · answered Nov 10 '19 at 15:10

Well, SwiftUI views are values, so they are always copied, but WKWebView are objects, so you don't have to re-create them (as you do in UIViewRepresentable) but you can keep reference somewhere once created.

Here is an example code that shows how this could be done. For simplicity of demo I used static, but the cache container can leave wherever suitable.

struct WebView : UIViewRepresentable {

    // static is only for demo, this can be some external model
    static var cache = [URL: WKWebView]()

    let request: URLRequest

    func makeUIView(context: Context) -> WKWebView  {
        guard let url = request.url else { fatalError() }

        if let webView = WebView.cache[url] {
            return webView
        }

        let webView = WKWebView()
        WebView.cache[url] = webView
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        if uiView.url == nil {
            uiView.load(request)
        }
    }

}

I kept the same code: how do I reset the webpage (reloading the same host URL) when selecting the tab. Basically, I have 2 tabs that load web view with different URLs, and when the user selects one tab and navigate through the webpage. When the user taps the same tab again it should reload the URL instead of keeping the old webview. How can i do that? Hope you can help on this — nickypatson, Jun 22 '21 at 15:41

SwiftUI: Tabview, keep state when changing tab

1 Answers1