Why NavigationView is shown inline when using emojis in navigationTitle in SwiftUI?

Question

I'm new in SwiftUI and I have come to a weird behavior that is driving me nuts. I'm using the following code as an example:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink(
                    destination: NonEmojiView(),
                    label: { Text("NON-emoji view.") }
                )
                Spacer()
                NavigationLink(
                    destination: EmojiView(),
                    label: { Text("Emoji view.") }
                )
            }
            .navigationTitle("I love emojis")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct EmojiView: View {
    var body: some View {
        Text("Testing emojis in navigation titles.")
        .navigationTitle("♥️")
    }
}

struct NonEmojiView: View {
    var body: some View {
        Text("Testing emojis in navigation titles.")
        .navigationTitle("Boring title")
    }
}

When I run this app (iOS 14, XCode 12.2) and tap on the Emoji view (second navigation link), and then the "< Back" button in the navigation bar, the inline title style is shown in the navigation bar (image1) instead of the expected one (image 2). Any clue why? Anything am I doing wrong? Is that a SwiftUI bug? The only difference is the emoji in the title.

EDIT: As pointed out by Luffy, if the navigationTitle in ContentView contains an emoji too, it works well. May be related to the height of the title? More points for this to be a SwiftUI bug.

Thanks!!

Answer 1

If you add emoji in a ContentView's navBarTitle, it will work. If you remove it, then it won't. I think it's a SwiftUI bug.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink(
                    destination: NonEmojiView(),
                    label: { Text("NON-emoji view.") }
                )
                Spacer()
                NavigationLink(
                    destination: EmojiView(),
                    label: { Text("Emoji view.") }
                )
            }
            .navigationBarTitle(Text("I ❤️ emojis"), displayMode: .large) // <~ HERE
        }
    }
}

struct EmojiView: View {
    let emoji = Image(systemName: "heart.fill")
    var body: some View {
        Text("Testing emojis in navigation titles.")
            .navigationBarTitle(Text("❤️"), displayMode: .large)
    }
}

struct NonEmojiView: View {
    var body: some View {
        Text("Testing emojis in navigation titles.")
            .navigationBarTitle(Text("Boring title"), displayMode: .large)
    }
}