Geek Culture
Published in

Geek Culture

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.

Tabbar

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.

FullScreenNavigationView

Now create a full screen navigation view which will take the thre arguments.

  1. isShowing binding property which will handle the view appearance
  2. content which will take a View to present in that view
  3. 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.

FullScreenNavigationViewType

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.

AppEventManager

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.

SetReactiveMethods

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

  1. presentFullScreenView: to presenting view over the tabbar
  2. viewToShow: the view that will present over the tabbar
  3. 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.

Last Step:

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.

If you need to navigate next from FullScreenNavigationView then use the NavigationLink to navigate forward.

That’s it…..

Hope you understand this, if not then you can see the source code as well.

Thanks for reading this.

👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻 Source Code 👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻

Patreon

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store