Adding a TextField to NavigationBar with SwiftUI - swift

Question

I've been fooling around with Xcode 11 and SwiftUI for the past few hours, attempting to implement a TextField in the NavigationBar. Generally, the first "Hello, World"-type application I build is a simple web browser: TextField and WKWebView.
However, I'm having an exceptionally difficult time trying to implement the TextField in a fixed .inline NavigationBar. Furthermore, I can't seem to find a single tutorial or piece of code anywhere online. I've gone through pages and pages of Google, as well as projects on GitHub, with no luck.
The only results that mention this topic in specific are Reddit threads and forum discussion posts – all of which ask the same question: "Has anyone been able to successfully implement a TextField in the NavigationBar?" No one has yet to respond with a solution.
Here's my current ContentView.swift – I have removed all of my programmatic attempts at implementing a TextField as it either crashes or throws errors:
import SwiftUI
import WebKit
let address = "https://developer.apple.com"
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
WebView(request: URLRequest(url: URL(string: address)!))
.edgesIgnoringSafeArea(.bottom)
.edgesIgnoringSafeArea(.leading)
.edgesIgnoringSafeArea(.trailing)
}
.navigationBarTitle("TextField Placeholder", displayMode: NavigationBarItem.TitleDisplayMode.inline)
}
}
}
struct WebView: UIViewRepresentable {
let request: URLRequest
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(request)
}
}

Answer 1

I don't know if it's exactly what you're trying to achieve, I think it might be a good solution:
import SwiftUI
import WebKit
let address = "https://developer.apple.com"
struct ContentView: View {
#State private var text = ""
var body: some View {
NavigationView {
GeometryReader { geometry in
VStack {
WebView(request: URLRequest(url: URL(string: address)!))
.edgesIgnoringSafeArea(.bottom)
.edgesIgnoringSafeArea(.leading)
.edgesIgnoringSafeArea(.trailing)
}
.navigationBarItems(leading:
HStack {
TextField("Type something here...", text: self.$text)
.background(Color.yellow)
}
.padding()
.frame(width: geometry.size.width)
.background(Color.green)
)
}
}
}
}
struct WebView: UIViewRepresentable {
let request: URLRequest
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(request)
}
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
Copy-paste the code here above and let me know if I can try to improve my solution with something else. I coloured a couple of views of green and yellow just for a matter of debugging.

Answer 2

There is a new method in iOS 14+ that populates the toolbar or navigation bar with the specified items:
func toolbar<Content>(content: () -> Content) -> some View where Content : ToolbarContent

Answer 3

NavigationView {
GeometryReader { geometry in
ZStack {
Text("Hello")
}
.navigationBarTitle(" ", displayMode: .inline)
.navigationBarItems(leading:
HStack {
TextField("Seach for products, brands and more", text: self.$searchText)
}
.frame(width: geometry.size.width - 35,
height: 38,
alignment: .center)
.background(Color.white)
)
.background(NavigationConfigurator { nc in
nc.navigationBar.barTintColor = UIColor(red: 104.0/255.0, green: 194.0/255.0, blue: 25.0/255.0, alpha: 1.0)
})
}
}
.navigationViewStyle(StackNavigationViewStyle())
struct NavigationConfigurator: UIViewControllerRepresentable {
var configure: (UINavigationController) -> Void = { _ in }
func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfigurator>) -> UIViewController {
UIViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
if let nc = uiViewController.navigationController {
self.configure(nc)
}
}
}