How to hide disclosure indicator from NavigationLink in SwiftUI
List is one of the most used views in SwiftUI. List makes it easy to show scrollable rows of content on a view without much setup and its memory efficient.
List items can be tapped on to show more details, iOS adds a disclosure indicator for convenience, which is great as it shows users that there is more if they tap on the row but sometimes we may need to hide it to either replace it with our own custom indicator or hide it completely.
Hiding disclosure indicator is not provided out of the box so in this article we will build a custom solution.
Let’s start by setting up the view. We will use small set of DevTechie video courses for our example and show them inside a list.
struct DevTechieRemoveDisclosureExample: View {
var devTechieCourses = [
"Mastering SwiftUI 3",
"Machine Learning in iOS",
"Goals app in SwiftUI",
"E-Commerce App in SwiftUI 3"
]
var body: some View {
}
}Inside the view’s body, we will add a NavigationView and add a List which will have a NavigationLink to show detail of the course. To keep things simple, we will simply show course’s title(if you wanna check out the course please visit https://devtechie.com for more details.)
struct DevTechieRemoveDisclosureExample: View {
var devTechieCourses = [
"Mastering SwiftUI 3",
"Machine Learning in iOS",
"Goals app in SwiftUI",
"E-Commerce App in SwiftUI 3"
]
var body: some View {
NavigationView {
List(devTechieCourses, id: \.self) { course in
NavigationLink(destination: Text(course)) {
Text(course)
}
}
.navigationTitle("DevTechie Courses")
}
}
}Build and run:
We can see our app working as expected and the disclosure indicator is there too. Let’s hide the indicator now. We will start by replacing List body with a ZStack and move NavigationLink inside the ZStack.
List(devTechieCourses, id: \.self) { course in
ZStack {
NavigationLink(destination: Text(course)) {
Text(course)
}
}
}Since ZStack stacks views on top of each other, we will take advantage of that and place a Text view on top of NavigationLink and replace Text view in the body of NavigationLink with an EmptyView
List(devTechieCourses, id: \.self) { course in
ZStack {
Text(course)
NavigationLink(destination: Text(course)) {
EmptyView()
}
}
}Next, we will set the ZStack alignment to leading and add opacity modifier with 0.0 value to the NavigationLink.
List(devTechieCourses, id: \.self) { course in
ZStack(alignment: .leading) {
Text(course)
NavigationLink(destination: Text(course)) {
EmptyView()
}
.opacity(0.0)
}
}Build and run:
Notice that the disclosure indicator is not there anymore.
Let’s build a custom view for our cell and move this logic into the cell.
struct ListCell: View {
var title: Stringvar body: some View {
ZStack(alignment: .leading) {
HStack {
Image(systemName: "books.vertical.fill")
Text(title)
Spacer()
Image(systemName: "rectangle.trailinghalf.inset.filled.arrow.trailing")
}
NavigationLink(destination: Text(title)) {
EmptyView()
}
.opacity(0.0)
}
.frame(height: 50)
.padding(.horizontal)
.background(Color.orange.gradient, in: RoundedRectangle(cornerRadius: 20))
.foregroundColor(.white)
.listRowSeparator(.hidden)
}
}Let’s use this cell view inside our view.
struct DevTechieRemoveDisclosureExample: View {
var devTechieCourses = [
"Mastering SwiftUI 3",
"Machine Learning in iOS",
"Goals app in SwiftUI",
"E-Commerce App in SwiftUI 3"
]
var body: some View {
NavigationView {
List(devTechieCourses, id: \.self) { course in
ListCell(title: course)
}
.listStyle(.plain)
.navigationTitle("DevTechie Courses")
}
}
}
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com