Navigation in Swift UI

After blooming of Swift UI, Many iOS developers switch to this new era of iOS. Many are learning elements of UI and propagating via screen in swift UI. Here I am going to implement a simple forward propagation to screen with Swift UI. All we need is a cup of coffee. Lets start here!

Propagating via Screens:

Usually we use Segues, Push and Present for propagating via view controller from one view controller.

Segues:

A segue defines a transition between two view controllers in your app’s storyboard file. The starting point of a segue is the button, table row, or gesture recognizer that initiates the segue. The end point of a segue is the view controller you want to display. A segue always presents a new view controller, but you can also use an unwind segue to dismiss a view controller. — by Apple

Push:

The view controller to push onto the stack. This object cannot be a tab bar controller. If the view controller is already on the navigation stack, this method throws an exception.

Present:

The view controller is present on the another view controller. You can dismiss by drag down the present view controller.

How to propagate screens in Swift UI

Here am going to tell how to propagate screens by pushing and presenting view from one view in swift UI. Here we all need a Content view for first view.

Here the first view compress all the logic for present and push. So start with body.

struct ContentView: View {
   @State var presentingModal = false //look it later
   var body: some View {
       Text("Push to View")
    }
}

For Push propagation

NavigationLink — A view that controls a navigation presentation.
Here we use navigation link to push to another view. You can add action to Text to navigate to other view.

struct ContentView: View {
   @State var presentingModal = false //look it later
   var body: some View {
       NavigationView{
           VStack{
              Image("Push")
              .resizable()
              .frame(height: 200)
              NavigationLink(destination: SecondView()) {
                 Text("Push to View")
                 .font(.headline)
                 .foregroundColor(Color.purple)
              }
       .navigationTitle("Navigation")
       }
    }
}

I put a vertical stack with with image and text for better UI. Here we applied navigation link to text.

NavigationLink(destination: SecondView()) {
                 Text("Push to View")
                 .font(.headline)
                 .foregroundColor(Color.purple)
  }

SecondView is the destination view. Here is the SecondView. Here for UI i had added two textview and one image.

struct SecondView: View{
  var body: some View{
    VStack(alignment: .center, spacing: 5, content: {
      Text("Second View")
      .font(.largeTitle)
      Text("Push From First View")
      Image("Push")
      .resizable()
      .frame(height: 300)
    })
   .navigationBarTitle("Push View", displayMode: .automatic)
  }
}

Here is the output for Push view controller.

Push to View

For Presenting View:

We need some more thing to present a view. But its a bit simple. So First need to create a view need to present over a current view.
Here it is.

struct ThirdView: View {
  @Binding var presentedAsModal: Bool
    var body: some View {
      Text("Third View")
      .font(.largeTitle)
      Image("Present")
      .resizable()
      .frame(height: 500)
      Text("Present From First View")
    }
}

Binding is variable is like getter and setter properties of a variable. A property wrapper type that can read and write a value owned by a source of truth. We need a binded type boolean to do present view for animating.

Now we have add code for presenting view

Button("Present a View") { self.presentingModal = true }
.sheet(isPresented: $presentingModal) { ThirdView(presentedAsModal: self.$presentingModal) }
}

Heres the output:

Happy Coding!💜