SwiftUI: navigate to another view with .onTapGuesture{}

Question

For the following CardView(), I want the user to tap on it to navigate to the a WebView() with the link string in post.article_url.

ForEach(self.posts.reversed(), id: \.id) {post in
    GeometryReader{geo -> AnyView in
        return AnyView(
            CardView (index: self.getPostIndex(post: post),
                      title: post.title,
                      image: post.cover_image,
                      author: post.author, 
                      source: post.source, description: post.description,
                      imageWidth: self.cardWidth, 
                      imageHeight: self.imageHeight(index: self.getPostIndex(post: post))
            )
            .animation(.spring())
            .frame(width: self.widthAmount(index: self.getPostIndex(post: post)), 
                   height: self.heightAmount(index: self.getPostIndex(post: post)))
            .offset(x: self.CardOffsetAmountHorizontal(index: self.getPostIndex(post: post)),
                    y: self.CardOffsetAmountVertical(index: self.getPostIndex(post: post)))
            .onTapGesture{
                // navigate to a webview with url: post.article_url
            }
        )}}

I tried to wrap CardView() with NavigationLink(). The navigation is successful, but it turned the image and text on the CardView() into complete blue. Maybe this can be solved through some other means (such as with some codes in .onTapGuesture{})?

Also, as this is a card stack that is supposed to be swiped. The NavigationLink() also blocks the dragging gesture on these cards.

Thanks in advance!

This should solve the issue of the blue color in the NavigationLink [How to turn off NavigationLink overlay color in SwiftUI?](https://stackoverflow.com/questions/57177989/how-to-turn-off-navigationlink-overlay-color-in-swiftui) — Andrew, Jul 12 '20 at 12:39
This explains how to use NavigationLink programmatically https://stackoverflow.com/questions/57889990/use-navigationlink-programmatically-in-swiftui — Andrew, Jul 12 '20 at 12:41
@Andrew Thanks, but this works only for `Image()` views. This `CardView()` contains a customized `UrlImageView()` that fetches image from url. And if I use `.renderingMode(.original)` on `CardView()` directly, it will have an error and crash the app. — Charlotte L., Jul 12 '20 at 12:50
Then your customised UrlImageView should use the renderingMode at the appropriate point, on the underlying Image. — Andrew, Jul 12 '20 at 13:13

score 2 · Accepted Answer · answered Jul 12 '20 at 12:47

Introduce a variable (Bool) which you monitor with an empty NavigationLink. When capturing the tab toggle this variable which will then activate the Redirect

// This variable 
@State private var goToNewView: Bool = false

ForEach(self.posts.reversed(), id: \.id) {post in
    GeometryReader{geo -> AnyView in
        return AnyView(
            CardView (index: self.getPostIndex(post: post),
                      title: post.title,
                      image: post.cover_image,
                      author: post.author, 
                      source: post.source, description: post.description,
                      imageWidth: self.cardWidth, 
                      imageHeight: self.imageHeight(index: self.getPostIndex(post: post))
            )
            .animation(.spring())
            .frame(width: self.widthAmount(index: self.getPostIndex(post: post)), 
                   height: self.heightAmount(index: self.getPostIndex(post: post)))
            .offset(x: self.CardOffsetAmountHorizontal(index: self.getPostIndex(post: post)),
                    y: self.CardOffsetAmountVertical(index: self.getPostIndex(post: post)))
            .onTapGesture{
                // navigate to a webview with url: post.article_url

                // Toggle the variable here
                self.goToNewView.toggle()
            }
        )}}


// Put this in your view. It will not be visible
NavigationLink(destination: MyOtherView(), isActive: self.$goToNewView) { EmptyView() }

Thanks, it works. I also added another state variable to carry along the article url. However, when I close the new page, it will reopen itself again somehow. And only if I close it for the second time will it not show up again. Is there a way to modify the new page programmatically? For example, when I turn this off, I can make `goToNewView = false`? Moreover, the top bar with "back" button has occupied more than one line (and at least three lines) of spaces. Can I also modify that? — Charlotte L., Jul 12 '20 at 13:11
It should not reopen the ```MyOtherView``` when going back unless you press again. When you go back the State of ```goToNewView``` will be set back to false. There seems to be an issue somewhere else in our code. — Simon, Jul 12 '20 at 13:32

SwiftUI: navigate to another view with .onTapGuesture{}

1 Answers1