Building pure SwiftUI Search bar with UIKit like Animations

Xcode 12 — iOS 14

In this tutorial, We are going to implement a UIKit like search without using any UIViewRepresentable.

We are going to divide the problem in following segments

1. Create a search bar UI
2. Add this search bar to List header

Create a search bar UI:

Search bar have a magnifying glass, an x button if text visible, and the cancel button to dismiss the search. We going to put all this in HStack with show/hide animation for cancel and x button.

Add this search bar to List header

We are going to use this Search bar in a list leader like following: