Whenever I was using Instagram I used to think I want to make the animated searchBar like that. Finally, I set down and did it.

Let's dive into the code and see how it works.

The first thing we do is create a SearchBarView struct. This view has three state variables: searchText, isEditing, and currentPlaceholderIndex. searchText stores the user input text, isEditing tracks whether the user is currently editing the search bar, and currentPlaceholderIndex keeps track of which placeholder text to display.

swiftCopy codestruct SearchBarView: View {
    @State private var searchText = ""
    @State private var isEditing = false
    @State private var currentPlaceholderIndex = 0

Next, we create an array called placeholders that contains the different placeholder texts that we want to display.

swiftCopy codelet placeholders = ["Search for Books", "Search for Dress", "Search for Place", "Search for Food"]

We then create a timer that will fire every 3 seconds and switch to the next placeholder text.

swiftCopy codeprivate let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()

Now, let's move on to the body of the view. We start by creating a ZStack that will hold our search bar.

swiftCopy codevar body: some View {
    ZStack(alignment: .leading) {

We create a Rectangle that will act as the background of the search bar. We give it a gray color and round the corners with a corner radius of 10.

swiftCopy codeRectangle()
    .foregroundColor(Color(UIColor.systemGray6))
    .frame(height: 40)
    .cornerRadius(10)

Next, we create an HStack that will hold the magnifying glass icon and the TextField. We start by adding the magnifying glass icon, which is an SF Symbol. We color it gray to match the color of the text field.

swiftCopy codeHStack {
    Image(systemName: "magnifyingglass")
        .foregroundColor(Color(UIColor.systemGray2))

We then add the TextField. We pass in the current placeholder text as the default text, bind it to the searchText state variable, and set the isEditing state variable based on whether the user is currently editing the text field. We also set the text color to primary.

swiftCopy codeTextField(placeholders[currentPlaceholderIndex], text: $searchText, onEditingChanged: { isEditing in
    self.isEditing = isEditing
})
.foregroundColor(.primary)

Finally, we add an onReceive modifier to the TextField that listens to the timer we created earlier. Whenever the timer fires, we switch to the next placeholder text with a simple modulo operation. We wrap the operation with a withAnimation block to animate the transition between placeholder texts.

swiftCopy code.onReceive(timer) { _ in
    withAnimation {
        currentPlaceholderIndex = (currentPlaceholderIndex + 1) % placeholders.count
    }
}

Lastly, we add some padding to the HStack and the ZStack to give the search bar some breathing room.

swiftCopy code.padding(.horizontal, 24)
}
.padding(.horizontal)
}

And that's it! With just a few lines of code, we've created an animated search bar that will keep your users engaged and entertained. So go ahead and add this to your app and watch your users smile!

Final Result -

Check the full code here - raaulc/AnimatedSearchBar (github.com)