Mimic of NavigationView
+ ScrollView
, with ability to add any content under title of top bar. Support for iOS v15 and higher
Ever struggle to put some custom SwiftUI
view inside of bar of system NavigationView
?
Well, I struggled that too, so I came up with the solution. My goal was to imitate system navigation bar(or at least what it was up to iOS 17) as much as possible with ability to add some custom content to it's bottom, and reach that goal with pure SwiftUI
.
Repository includes a package with NavigationViewElastic for install and project with example of usage.
- Transparent navigation bar similar to system one's behaviour, support current device theme
- Ability to add any content you want at navigation’s bar bottom placement
- Optional Back button to use when NVE is nested in navigation hierarchy
- Editable configuration struct determines sizes of basic elements
- UDF-like API for «Pull-to-refresh» - you pass a closure to call after pull-gesture. When work is done, pass a
Bool
to NavigationViewElastic to hide progress indicator. When no closure is passed, progress indicator will not appear on pull-gesture.
SPM
installation: in Xcode tap «File → Add packages…», paste is search field the URL of this page and press «Add package».
Annotate SwiftUI
file with «import NavigationViewElastic». Then pass to NavigationViewElastic a content
with your main content, subtitleContent
with additional view for displaying at the bottom of navigation bar. Optionaly, you can use leadingBarItem
and trailingBarItem
viewbuilders or modifier-like functions: .refreshable()
for Pull-to-refresh ability, .navigationTitle()
and blurStyle()
.
For using NVE as nested view inside your navigation hierarchy you can optionally add a Back button to navigation toolbar. You can pick a system-like button NVE.BackButton()
, style it with custom title string, action or foreground color, or make your own view. When using NVE as nested navigation view, remember to hide outer NavigationView
with .navigationBarHidden(true)
.
var body: some View {
NavigationViewElastic {
VStack {
///...
}
} subtitleContent: {
Button("Subtitle button") { }
} trailingBarItem: {
Button("Bar button") { }
}
.navigationTitle("Title")
.refreshable(stopRefreshing: .constant(false), onRefresh: { } )
}
}