Building pure SwiftUI Search bar with UIKit like Animations

  1. 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:

  1. Scroll is going into safe area.
  2. The background of search bar is of default header view.
  3. Search bar frame is smaller.
textCase(.none)
.background(
GeometryReader { proxy in
Color(UIColor.systemBackground)
.frame(width: proxy.size.width * 1.3, height: 100) ///100 => search bar + top padding
.fixedSize()
.offset(CGSize(width: -20.0, height: -50.0))
})
.frame(height: 50)

iOS Developer | Swift | Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store