2

I'm writing a new SwiftUI app that heavily use NavigationView to move across various views.

The behaviour of the navigationBarTitle however is really strange: when moving to a page with a long, scrollable content and getting back, the displayMode, which is changed from .large to ´.inline´ as per scrolling behaviour, does not reset to .large as code require.

Check out this video I made: https://i.stack.imgur.com/1K95m.jpg

For your convenience, here's also the code I used to make the video (previews edited for brevity)


import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Home()
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct Home: View {
    var body: some View {
        VStack {
            Text("The quick brown fox jumps over the lazy dog.")
                .padding()

            NavigationLink(destination: Page2()) {
                Text("Go to page 2")
                    .padding()
            }

            NavigationLink(destination: Page3()) {
                Text("Go to page 3")
                    .padding()
            }

            Spacer()
        }
        .navigationBarTitle("Test app", displayMode: .large)
    }
}

struct Page2: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare consequat orci, sed tempus turpis laoreet id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget auctor justo. Quisque pulvinar sodales dui, a dictum mi sodales et. Morbi volutpat diam quis congue rutrum. Vestibulum efficitur orci imperdiet, congue neque non, finibus est. Nulla vestibulum blandit feugiat. Curabitur id ipsum sed eros sodales pretium.")
                    .padding()

                Text("Aenean non laoreet nibh, in faucibus lorem. Maecenas ipsum tellus, iaculis et ex in, gravida finibus lorem. Mauris faucibus, justo nec ultrices molestie, mi tellus imperdiet purus, quis imperdiet purus enim a augue. Fusce et neque nec quam ornare ultricies. Mauris dolor nibh, dictum id suscipit consectetur, malesuada sed mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet consequat leo. Duis convallis libero purus, eget mollis nibh ornare vitae. Fusce dictum erat sit amet interdum dapibus. Fusce quis consectetur augue, sit amet aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ultricies porta lacus at venenatis. Aliquam sollicitudin mi ac enim malesuada vulputate. Donec vulputate lorem non nisi feugiat, nec luctus tellus vehicula.")
                    .padding()

                Text("Etiam ac commodo elit. Phasellus luctus, erat sed tempus viverra, arcu urna placerat nunc, at tincidunt nibh odio non ante. Donec ac rutrum augue, vel ultrices felis. Proin varius neque mauris, semper sodales risus ultricies semper. Duis sit amet iaculis velit, sed pretium sem. Nulla at aliquet augue, nec dignissim purus. Vestibulum eget posuere elit. Donec rutrum mollis elementum. Etiam finibus in diam vel consectetur. Donec ut interdum quam. Mauris quis risus lacus. Duis nisi magna, tempor eu mi eleifend, vehicula posuere erat. Proin eu turpis et tortor viverra condimentum. Fusce ac ultricies massa, sit amet dignissim arcu.")
                    .padding()

                Text("Duis ultrices ut orci quis scelerisque. Nulla id pellentesque diam, eleifend dignissim mauris. Sed sollicitudin lobortis mauris sed mattis. Nulla ac metus vitae sem fermentum iaculis. Suspendisse iaculis tristique leo, mattis imperdiet nisi eleifend vitae. Pellentesque mollis consequat dui, venenatis finibus augue porttitor tincidunt. Quisque at turpis auctor, mollis lorem eu, viverra ante. Nulla facilisi. Morbi vestibulum ante at vestibulum faucibus. Suspendisse commodo elementum sapien, eget tincidunt diam euismod ac. Nunc nec tristique purus, eget venenatis neque.")
                    .padding()

                Text("Morbi pretium velit massa, a tristique enim ultrices ut. Nullam id massa auctor, sollicitudin neque vitae, vestibulum risus. Curabitur ut risus vitae massa finibus varius ac eu tortor. Quisque luctus ultrices fermentum. Mauris sem lectus, accumsan non consectetur quis, pellentesque ut ipsum. Integer sed nisl ex. Aliquam vitae rutrum tortor. Nam ac lobortis est. Nulla facilisi. Nulla mollis libero porta nunc tincidunt, ut dapibus diam commodo. In vel erat odio. Morbi pretium facilisis aliquet. Cras aliquam dui accumsan risus gravida, ut dapibus ipsum ultrices.")
                    .padding()
            }
        }
        .navigationBarTitle("Page 2", displayMode: .large)
    }
}

struct Page3: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("The quick brown fox jumps over the lazy dog.")
                    .padding()

                Spacer()
            }
        }
        .navigationBarTitle("Page 3", displayMode: .large)
    }
}

Any help is appreciated!

Edit: I need to support IOS 13 so I can't still ditch deprecated features right now

Valerio
  • 3,297
  • 3
  • 27
  • 44

1 Answers1

0

One of the solutions to set display mode separately:

.navigationBarTitle("Page 3")
.navigationBarTitleDisplayMode(.large)

Hope this helps ;)

Whole code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Home()
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct Home: View {
    var body: some View {
        VStack {
            Text("The quick brown fox jumps over the lazy dog.")
                .padding()

            NavigationLink(destination: Page2()) {
                Text("Go to page 2")
                    .padding()
            }

            NavigationLink(destination: Page3()) {
                Text("Go to page 3")
                    .padding()
            }

            Spacer()
        }
        .navigationBarTitle("Test app")
        .navigationBarTitleDisplayMode(.large)
    }
}

struct Page2: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare consequat orci, sed tempus turpis laoreet id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget auctor justo. Quisque pulvinar sodales dui, a dictum mi sodales et. Morbi volutpat diam quis congue rutrum. Vestibulum efficitur orci imperdiet, congue neque non, finibus est. Nulla vestibulum blandit feugiat. Curabitur id ipsum sed eros sodales pretium.")
                    .padding()

                Text("Aenean non laoreet nibh, in faucibus lorem. Maecenas ipsum tellus, iaculis et ex in, gravida finibus lorem. Mauris faucibus, justo nec ultrices molestie, mi tellus imperdiet purus, quis imperdiet purus enim a augue. Fusce et neque nec quam ornare ultricies. Mauris dolor nibh, dictum id suscipit consectetur, malesuada sed mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet consequat leo. Duis convallis libero purus, eget mollis nibh ornare vitae. Fusce dictum erat sit amet interdum dapibus. Fusce quis consectetur augue, sit amet aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ultricies porta lacus at venenatis. Aliquam sollicitudin mi ac enim malesuada vulputate. Donec vulputate lorem non nisi feugiat, nec luctus tellus vehicula.")
                    .padding()

                Text("Etiam ac commodo elit. Phasellus luctus, erat sed tempus viverra, arcu urna placerat nunc, at tincidunt nibh odio non ante. Donec ac rutrum augue, vel ultrices felis. Proin varius neque mauris, semper sodales risus ultricies semper. Duis sit amet iaculis velit, sed pretium sem. Nulla at aliquet augue, nec dignissim purus. Vestibulum eget posuere elit. Donec rutrum mollis elementum. Etiam finibus in diam vel consectetur. Donec ut interdum quam. Mauris quis risus lacus. Duis nisi magna, tempor eu mi eleifend, vehicula posuere erat. Proin eu turpis et tortor viverra condimentum. Fusce ac ultricies massa, sit amet dignissim arcu.")
                    .padding()

                Text("Duis ultrices ut orci quis scelerisque. Nulla id pellentesque diam, eleifend dignissim mauris. Sed sollicitudin lobortis mauris sed mattis. Nulla ac metus vitae sem fermentum iaculis. Suspendisse iaculis tristique leo, mattis imperdiet nisi eleifend vitae. Pellentesque mollis consequat dui, venenatis finibus augue porttitor tincidunt. Quisque at turpis auctor, mollis lorem eu, viverra ante. Nulla facilisi. Morbi vestibulum ante at vestibulum faucibus. Suspendisse commodo elementum sapien, eget tincidunt diam euismod ac. Nunc nec tristique purus, eget venenatis neque.")
                    .padding()

                Text("Morbi pretium velit massa, a tristique enim ultrices ut. Nullam id massa auctor, sollicitudin neque vitae, vestibulum risus. Curabitur ut risus vitae massa finibus varius ac eu tortor. Quisque luctus ultrices fermentum. Mauris sem lectus, accumsan non consectetur quis, pellentesque ut ipsum. Integer sed nisl ex. Aliquam vitae rutrum tortor. Nam ac lobortis est. Nulla facilisi. Nulla mollis libero porta nunc tincidunt, ut dapibus diam commodo. In vel erat odio. Morbi pretium facilisis aliquet. Cras aliquam dui accumsan risus gravida, ut dapibus ipsum ultrices.")
                    .padding()
            }
        }
        .navigationBarTitle("Page 2")
        .navigationBarTitleDisplayMode(.large)
    }
}

struct Page3: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("The quick brown fox jumps over the lazy dog.")
                    .padding()

                Spacer()
            }
        }
        .navigationBarTitle("Page 3")
        .navigationBarTitleDisplayMode(.large)
    }
}
Okonov Urmat
  • 319
  • 2
  • 8
  • As I stated, I need to support ios13, and ´navigationBarTitleDisplayMode´ is IOS14+ – Valerio Sep 20 '21 at 10:35
  • You are probably going to have to do version checks and run different code for 13. There have been huge changes from 13 to 15 with regard to SwiftUI. – Yrb Sep 20 '21 at 12:51
  • Version checking isn't the problem, the real one is that for ios13/14 this does not work. – Valerio Sep 20 '21 at 14:48