CODEWITHSUNDEEP
iosswiftfirebaseswiftui
Kate Throw
Kate Throw

Reputation: 119

SwiftUI: Navigation bar duplicates after opening external link and returning to app

I'm experiencing an issue with my SwiftUI app where the navigation bar duplicates after opening an external link and returning to the app. This happens both on a physical iPhone 11 device and in the simulator. Here's a simplified version of my DetailView:

swift struct DetailView: View { let item: RSSItem

var body: some View {
    ScrollView {
        VStack(alignment: .leading) {
            Button(action: {
                openURL(item.url)
            }) {
                Text(item.title)
                    .font(.title)
                    .padding(.bottom)
            }
            
            Text(item.text)
                .font(.body)
            
            // More content...
        }
        .padding()
    }
    .navigationBarTitle(item.title, displayMode: .inline)
}

func openURL(_ urlString: String) {
    guard let url = URL(string: urlString) else {
        print("Invalid URL: \(urlString)")
        return
    }
    
    UIApplication.shared.open(url)
}

}

And here's how I'm setting up the navigation bar in the parent view (FirestoreDataView): swift struct FirestoreDataView: View { // ... other state variables and properties

var body: some View {
    NavigationView {
        List {
            // ... list content
        }
        .listStyle(PlainListStyle())
        .navigationBarItems(leading: leadingBarItems, trailing: trailingBarItems)
        .navigationBarTitleDisplayMode(.inline)
    }
    .background(Color.white.edgesIgnoringSafeArea(.all))
    .onAppear {
        fetchData()
        customizeNavigationBar()
    }
}

@ViewBuilder
private var leadingBarItems: some View {
    HStack {
        Button("All Read") {
            markAllAsRead()
        }
        
        Button(showUnreadOnly ? "Unread" : "All") {
            showUnreadOnly.toggle()
        }
    }
}

@ViewBuilder
private var trailingBarItems: some View {
    HStack {
        Toggle("KI Only", isOn: $showKIOnly)
            .toggleStyle(CheckboxToggleStyle())
        
        Toggle("Gut", isOn: $showGutOnly)
            .toggleStyle(CheckboxToggleStyle())
        
        Picker("Category", selection: $selectedCategory) {
            Text("All").tag("")
            ForEach(categories, id: \.self) { category in
                Text(category).tag(category)
            }
        }
    }
}

func customizeNavigationBar() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    appearance.backgroundColor = .clear
    appearance.titleTextAttributes = [.font: UIFont.systemFont(ofSize: 16)]
    let desiredHeight: CGFloat = 44.0 / 3.0 // Adjust the height as needed
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().compactAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
    UINavigationBar.appearance().frame.size.height = desiredHeight
}

}

The issue occurs when I tap the title button in the DetailView, which opens the URL in the default browser. When I return to the app, the navigation bar is duplicated, showing all buttons twice.

I've tried the following solutions, but the issue persists: Removed the navigationBarTitle modifier from the VStack and applied it to the ScrollView instead. Wrapped the ScrollView with a NavigationView and applied the navigationBarTitle modifier to it. Used a ZStack instead of a ScrollView and applied the navigationBarTitle modifier to the ZStack. Implemented a custom SafariViewController to open the link within the app. Added .navigationViewStyle(StackNavigationViewStyle()) to the main NavigationView in the parent view. Tried using WKWebView instead of UIApplication.shared.open(url) to open the link within the app. Removed the customizeNavigationBar() function to see if the custom appearance was causing the issue. None of these solutions have resolved the issue. The navigation bar still duplicates when returning to the app after opening an external link.

Additional information: The app uses Firebase Firestore for data storage and retrieval. The issue occurs consistently across different iOS versions (14, 15, and 16). The problem persists even after cleaning the build folder and restarting Xcode. Has anyone encountered a similar issue or can suggest a solution? Any help would be greatly appreciated!

Upvotes: 0

Views: 73

Answers (1)

Kate Throw
Kate Throw

Reputation: 119

Thanks a lot for your help! I changed NavigationView to NavigationStack and now the menu bar works as expected!

Upvotes: 0

Related Questions