Send value from one view to another – Swift UI

by Posted on

We will create a text field in one view and send its value into another view. We will be taking an example of a search, you write a text to search in one view and the second view will show you the text you had written on the first view.

Note: When implementing a complete search functionality, you usually show the searched data based on a text query. But this is just an example of how you can implement this.

Video tutorial:

@State property wrapper

We will create 2 @State property wrappers, one to save the value from the text field and the second to show the search page when the user hits the return key.

// string variable to store search query
@State var searchedText: String = ""

// boolean variable to show search view
@State var showSearch: Bool = false

Text field

Now we will create a text field and binds its value to our first variable. As the user types in the input field, we will have its value in that variable.

TextField("Search here...", text: $searchedText, onCommit: {
    // this will be called when the search is clicked
    self.showSearch = true
})
.padding(8)
.keyboardType(.webSearch)
.background(Color(.systemGray6))
.disableAutocorrection(true)
.cornerRadius(5)

Following are the things which needs to understand from above code:

  1. TextField’s first parameter is the string that will be shown to the user.
  2. The second parameter is the binding which will store the text field value in the given variable.
  3. onCommit: is called when the user hits the return key. In this callback, we are setting the showSearch value to true. Note: We will come back to this later.
  4. padding(8): sets the margin between text content and text field borders.
  5. keyboardType(.webSearch): will show a full keyboard with a search icon on bottom right.
  6. background(Color(.systemGray6)): will set the background color of text field to light gray.
  7. disableAutocorrection(true): will disable the auto-correction on this field.
  8. cornerRadius(5): this will make the corners of the text field a little rounded rather than squares.

Pass value to next view

Now we will pass this text field value to next view. This can be done using navigation link:

// goto search view
NavigationLink (destination: SearchView(searchedText: $searchedText), isActive: $showSearch) {
    EmptyView()
}

destination is the view which will be shown when the value in isActive becomes true.

Right now, you will get an error in SearchView because we haven’t created that view yet. Also, we are sending searchedText as a parameter which means that we have to create a @Binding property wrapper in search view.

The EmptyView() is the label that is shown in the first view. But we don’t want any text to be displayed on the initial value, so we are making it an empty view.

When using navigation link, you must wrap your outer parent with navigation view. So your view body will be like this:

NavigationView {
    VStack {
        
        // goto search view
        NavigationLink (destination: SearchView(searchedText: $searchedText), isActive: $showSearch) {
            EmptyView()
        }
        
        TextField("Search here...", text: $searchedText, onCommit: {
            // this will be called when the search is clicked
            self.showSearch = true
        })
        .padding(8)
        .keyboardType(.webSearch)
        .background(Color(.systemGray6))
        .disableAutocorrection(true)
        .cornerRadius(5)
        
    }.padding()
}

Search view

Now, create another view file in your project named SearchView.swift. As we are sending a searched text in its constructor, so we must add a @Binding variable in it:

// @Binding is used when variables need to be passed between 2 views
@Binding var searchedText: String

Now, you might get the error in your preview provider code. It is because we need to pass the value from here as well. Replace your preview provider body code with the following:

// when using @Binding, @State static must be used to show preview
@State static var searchedText: String = ""

static var previews: some View {
    SearchView(searchedText: $searchedText)
}

Now, inside the body of view, we are simply displaying the searched value in a text. But you can use it in any way you want.

// show searched text in this view
        
VStack {
    Text(self.searchedText)
}

That’s how you can send value from one view to another using Swift UI.

[wpdm_package id=’865′]

Post Views: 279

Published by adnanafzal565