SwiftUI Bring Down Navigation Items

Question

In my SwiftUI app, I would like to bring the navigation bar items down like in Apple's own UIKit apps.

Seen below is a screenshot from the Health app. Notice how the profile picture is in line with the 'Summary' text. This is what I am looking to achieve.

I have tried using .padding(.top, 90) but this has not worked as it does not bring down the virtual box that allows the button to be clicked. Using padding means that you have to tap the button above the image/text.

Thank you.

Answer 1

Unfortunately I didn't find any solution for changing navigation bar height in iOS 13 with SwiftUI, and had the same issues earlier. Solution below will fit you, if your navigation bar is always only black and you're ok with gap on the top:

struct NavBarCustomItems: View {

    init() {
        setNavigationBarToBlackOnly()
    }

    func setNavigationBarToBlackOnly() {
        let blackAppearance = UINavigationBarAppearance()
        blackAppearance.configureWithOpaqueBackground()
        blackAppearance.backgroundColor = .black
        blackAppearance.shadowColor = .clear // to avoid border line

        UINavigationBar.appearance().standardAppearance = blackAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = blackAppearance
    }

    var body: some View {

        NavigationView {

            VStack {

                NavigationBarMimicry()

                // here is your content
                HStack {
                    Text("Favorites")
                    Spacer()
                    Button(action: {}) { Text("Edit") }
                }
                .padding()


                Spacer()

                VStack {
                    Text("Main screen")
                }
                // you need spacer(s) to be sure, that NavigationBarMimicry is always on the top
                Spacer()

            }

        }

    }

}

// MARK: here is what you need in navigation bar
struct NavigationBarMimicry: View {

    var body: some View {
        HStack {

            Text("Summary")
                .bold()
                .font(.system(size: 40))
                .foregroundColor(.white)
                .padding(.horizontal)

            Spacer()

            Rectangle()
                .foregroundColor(.white)
                .frame(width: 40)
                .padding(.horizontal)

        }
        .background(Color.black)
        .frame(height: 40)
        .navigationBarTitle("", displayMode: .inline)
        // you can add it to hide navigation bar, navigation will work via NavigationLink
//        .navigationBarHidden(true) 
    }

}

struct NavBarCustomItems_Previews: PreviewProvider {
    static var previews: some View {
        NavBarCustomItems().environment(\.colorScheme, .dark)
    }
}

the result should be like this:

P.S. maybe the other ways are:

• Put views in this order: VStack { NavigationBarMimicry(); NavigationView {...}};
• uncomment line of code: .navigationBarHidden(true);