Latest Post

SwiftUI NavigationView and NavigationStack SwiftUI Show progress of the task using SwiftUI ProgressView Flutter Vs React Native which is better?

SwiftUI is a declarative data-driven framework that allows us to create complicated user interfaces by describing how data is shown on the screen. From the beginning, the framework’s biggest pain point was navigation. Fortunately, since WWDC 22, things have changed, and SwiftUI now includes the new data-driven Navigation API. We’ll learn how to utilise the new Navigation API to create complicated user flows this week.

SwiftUI NavigationView has been the framework’s Achilles heel since its inception. SwiftUI’s Navigation framework frequently pushed us to revert to utilising the UINavigationController, from not allowing lazy loading of destination views within NavigationLink at first (though this was eventually rectified) to its inability to programmatically browse deep connections.

A new NavigationStack that allows you to push and pop views from a stack, a NavigationPath for managing the routing stack, and a navigationDestination modifier for effectively traversing views programmatically are among the significant new Navigation API enhancements. They deprecated NavigationView in the same upgrade.

To offer a stack of views above a root view, use a navigation stack. Views may be added to the top of the stack by clicking or pressing a NavigationLink, and views can be removed by utilising built-in, platform-appropriate controls such as a Back button or a swipe motion. The stack always displays the most recently added view that has not been deleted and does not permit the removal of the root view.

SwiftUI NavigationView

First and foremost, the old NavigationView has been deprecated, and we should instead utilise the new NavigationStack. Consider the following example.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, coder")
        }
    }
}

Navigation views, you see, allow us to display additional content screens by sliding them in from the right side. Each screen may have its own title, and SwiftUI is responsible for ensuring that title is always visible in the navigation view – you’ll see the old title slide away as the new title animates in.

NavigationView with NavigationTitle

We can add the navigation Title in navigationView as shown in below code

NavigationView {
    Text("leadbycode")
    .navigationBarTitle("Title")
}

NavigationView are been customizable it can be customizable on the basis of .large , inline and automatic

The title is shown by adding a navigationBarTitleDisplayMode() modification, which gives us three options:

  • The .large option displays huge headlines, which are excellent for top-level navigation stack views.
  • Small titles are displayed using the.inline option, which is excellent for secondary, tertiary, or subsequent views in your navigation stack.
  • The.automatic option is the default, and it uses the previous view.

NavigationView with .large

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, coder")
        .navigationTitle("Popup").navigationBarTitleDisplayMode(.large)
        }
    }
}

NavigationView with .inline

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, coder")
        .navigationTitle("Popup").navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationView with .automatic

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, coder")
        .navigationTitle("Popup").navigationBarTitleDisplayMode(.automatic)
        }
    }
}

How to push new screen(View) onto NavigationView

NavigationView is the important control in the swiftUI in the below example we can navigate from first screen to second screen using NavigationLink. using NavigationLink we can push to newscreen . Using the destination we can pass the data to the next screen.

struct ContentView: View {
    var body: some View {
        NavigationView {
         NavigationLink(destination: Text("New Screen")) {
            Text("Hello, coder")
        .navigationTitle("Popup").navigationBarTitleDisplayMode(.large)
         }
        }
    }
}

When we have the two screen we can push from one screen to another using the navigationlink as shown below

Use NavigationLink – a button that activates a navigation presentation when hit – to implement the secondview and provide a second view on top of the first view in NavigationView:

When a detail view is displayed, the NavigationView handles the addition of the back button automatically.

Use the navigationBarTitle() modification within your SecondView body to add a title to the second view:

struct SecondView: View {
    var body: some View {
        Text("Second Screen")
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: SecondView()) {
                Text("Show second view")
            }
            .navigationBarTitle("First view").navigationBarTitleDisplayMode(.large)
        }
    }
}

Leave a Reply

Your email address will not be published.