Full Screen Navigation View over Tabbar in SwiftUI
In this blog, you can see how you can navigate a view over the Tabbar view in SwiftUI by using the reactive programming framework called Combine in IOS using Swift.
Create brand new SwiftUI project in XCode and start along with me. Don’t worry in bottom of that blog you can get the full source code of that project from GitHub.
First create create separate swift file and name it MainTabbedView. In this view create the tabbar by using the following code.
Create the tabbar and also create five simple views like HomeView, SearchView, SessionsView, ChatView & ProfileView which will be attached with the tabbar bar as you can see in the code above.
Now create a full screen navigation view which will take the thre arguments.
- isShowing binding property which will handle the view appearance
- content which will take a View to present in that view
- edgeTransition to handle the transition, right now we are transitioning the view left to right that’s why used the .trailing if you want view to appear from bottom then use .bottom.
FullScreenNavigationView is used for showing the passing content view into that view by using the ZStack. ZStack is used to show the views in z-axis.
After that create the FullScreenNavigationViewType, enum for any views that needs to be displayed in full screen from MainTabbedView.
You just need to create simple SecondView and ThirdView which are using into that enum. SecondView taking no argument but ThirdView is taking argument. I added the ThirdView to tell you how we will add the arguments into the view by using the enum.
We will use the .empty case for back navigation in a while.
Create AppEventManager which will handle the app events. AppEventManager will be the singleton class, thats why I have created it’s shared instance inside that class.
Right now we created one event which is called navigateFullScreen. I am using the PassthroughSubject which is the Combine framework property. PassthroughSubject is taking two arguments with types Bool and FullScreenNavigationViewType. In one place we will call that event by using it’s .send method and in second place we will right a subscriber which will listen that event and trigger some logic. You can see that in a while.
Create a SetReactiveMethods class which will be inhered with the ObservableObject. We are using the ObservableObject for publishing the values into the SwiftUI views.
Now create three properties
- presentFullScreenView: to presenting view over the tabbar
- viewToShow: the view that will present over the tabbar
- cancellable: for canceling the subscribers
Create a subscriber function to listen the navigationFullScreen event, when it’s getting called. Using the .receive and .sink Combine Framework’s functions for subscribing the navigationFullScreen event. receive function is used to tell in which queue we need to get this event and sink function will receive the values when the navigationFullScreen event trigger and after that we will get those values and use.
After creating that subscriber funtion, call this into the init and we will use that subscriber when we have the SetRactiveMethods object. Now create the SetReactiveMethods instance in MainTabbedView and use the FullScreenNavigationView into the MaintabbedView by using the ZStack as following.
When we are creating the SetReactiveMethods instance then the subscriberForFullScreen will initiate and when we trigger the navigateFullScreen event then the subscriber receive those values and update the presentFullScreenView and viewToShow values, and those values published and using into the FullScreenNavigationView and then presenting view over the tabbar as you can se above code.
Now, last step remaining to trigger the event. Right down the below code into the HomeView struct if you already created or create the HomeView struct.
Here we are triggering that navigateFullScreen event by using .send method and passing the two arguments one is boolean which tells use to navigate or not. If we need to navigate then we will pass true and if we want to back navigate then we will pass the false value here. Other parameter is FullScreenNavigateViewType, we will pass that type as well. By this, our event will call and subscriber receive these values and present the respective view over the tabbar by using the FullScreenNavigationView.
If you want to back navigate from FullScreenNavigationView then call the navigateFullScreen event and pass the false value and give the type .empty. Then FullScreenNavigationView will navigate back.
Remember by give just false value FullScreenNavigationView will back navigate. We are using the .empty by giving empty view to the viewToShow
If you need to navigate next from FullScreenNavigationView then use the NavigationLink to navigate forward.
Hope you understand this, if not then you can see the source code as well.
Thanks for reading this.
👨💻👨💻👨💻👨💻👨💻👨💻 Source Code 👨💻👨💻👨💻👨💻👨💻👨💻
GitHub - muhammadabbas001/FullScreenNavigationView: If you need to navigate view over the tabbar in…
If you need to navigate view over the tabbar in SwiftUI then, you can use this code base to understand how to navigate…