arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Tappable Areas in a SwiftUI List Row
1 min read

Tappable Areas in a SwiftUI List Row

I have a problem with the tappable area in a SwiftUI list row: it doesn't cover the entire row.

Here is my code:

Section(header: Text("Latest Transit News").bold(), content: {
    HStack(alignment: .center) {
        Image("Twitter")
            .resizable()
            .renderingMode(.template)
            .frame(width: 18.33, height: 15.14)
            .foregroundColor(Color("TwitterBlue"))
        VStack(alignment: .leading) {
            Text("SBS Transit")
            Text("@SBSTransit_Ltd").font(.caption).foregroundColor(.secondary)
        }
        Spacer()
    }.onTapGesture {
        UIApplication
            .shared
            .open(SupportURL.sbs.url, 
                  options: [UIApplication.OpenExternalURLOptionsKey.universalLinksOnly : false], completionHandler: nil)
}

This produces the expected row:

The only tappable area in the entire row is enclosed in the red box: the Image and Text. My expectation is that the entire HStack should be tappable.

Am I doing something wrong or is there a solution? Please let me know.