Navigation and navigation controllers have been around for a long time. They play a critical role in the user experience and overall user flow by presenting the primary content and task-specific navigation to users. They also help us to understand what we can and can’t do within the app, which is really important. When Apple introduced the navigation controller in iOS6, they made a big deal about how it simplified and optimized navigation.
With the amount of data we consume in day to day life, the need for better design solutions to keep up with all our apps becomes more and more apparent.
The SwiftUI framework is an open source library for displaying information in UIs. It is lightweight and easy to use, and is highly customizable. It has support for Swift programming language and iOS programming language.
sRouting
SwiftUI’s lightweight navigation framework.
Overview
SwiftUI’s native navigation system is used for sRouting. sRouting makes it simple to navigate between displays. A transition from inside(view) to outside(view model) the view may be triggered by the Router.
Requirements
- iOS 14 and above
- Xcode 13 or above is required.
Documentation is required.
Explore DocC to learn more about sRouting and how to get started with it. For additional details, see this WWDC presentation.
From xCode select Product -> Build Doccumentation -> Explore.
Alternatively, you may download the document archive from the release page.
Arrangements
Add sRouting to the project’s dependencies. More information on how to use Swift packages in your project can be found in this WWDC presentation. As the sRouting package link, use https://github.com/ThangKM/sRouting.git.
Using sRouting for the First Time
Set up RootView and get Router to function
Overview
With RootView, you may make own root view. Declares your chosen path. ScreenView and Router are used in this project.
Make a path.
We must follow the Route Protocol in order to build a Route.
case login case home var screen: some enum AppRoute: Route case.login: LoginScreen() case.home: HomeScreen() view switch self
Create a Root View.
Set up your app’s RootView.
@struct main App… @SceneBuilder var body: some Scene BookieApp: App… @SceneBuilder var body: some Scene BookieApp: App… @SceneBuilder var body: NavigationView AppRoute.home.screen.navigationViewStyle(.stack) WindowGroup RootView(rootRouter:.init()) NavigationView AppRoute.home.screen.navigationViewStyle(.stack)
Creating a Screen and Using a Router
ScreenView will generate a hidden NavigatorView underneath the content view in a ZStack when you build a screen using it. Transactions emitted by Router will be handled by the NavigatorView.
@Environment(.presentationMode) private var presentation struct HomeScreen: View Router =.init mode @StateObject private var router: Router =.init mode @StateObject private var router: Router =.init mode @S () body variable: some ScreenView(router: router, presentation) is a method for seeing a screen. … (Mode: presentationMode)…
We utilize the Router/trigger(to:with:) method in the Router to go to a screen that must be in AppRoute.
Push:
trigger.router (to: .loginScreen, with: .push)
Display in full screen mode:
router.trigger (with:.present, to:.loginScreen)
Sheet:
trigger.router (to: .loginScreen, with: .sheet)
The Router/show(alert:) function is used to display an alert.
alert.init(title: Text(“Alert”), message: Text(“Message”), dismiss) router.show(alert: Alert.init(title: Text(“Alert”), message: Text(“Message”), dismiss) router.show(alert: Alert.init( .cancel(Text(“OK”)) Button
The Router/show(error:and:) method is used to display an error message.
router.show(error:NetworkingError.lossConnection)
The Router/dismiss() method is used to dismiss or pop the screen.
router.dismiss()
The Router/dismissAll() method is used to dismiss the root view. The root view must be a RootView.
router.dismissAll()
The Router/selectTabbar(at:) function is used to select the Tabbar item. RootRouter’s TabView selection binding was required.
router.selectTabbar(at:0)
In a ViewModel, Using Router
A ViewModel may also make advantage of the router.
Router is a class that represents a home view model. …,,,,,,,,,,,,,,,,, @Environment(.presentationMode) private var presentation struct HomeScreen: View private var view @StateObject mode Model:.init HomeViewModel () body variable: some (router: viewModel, presentation) View ScreenView … (Mode: presentationMode)…
That’s pretty amazing, right? You can now go to a new screen in HomeViewModel.
Note
Ensure that the transfer is done on MainThread.
Conclusion
Because sRouting is a lightweight and flexible framework, you may handle navigations as you wish.
GitHub
https://github.com/ThangKM/sRouting
SwiftUI is an open source UI toolkit for iOS which is very minimalistic and lightweight. It is meant to be easy to use and it features a very small footprint. It is used by developers who want to build clean and fast UIs without the clutter.. Read more about swiftui router and let us know what you think.
