Creating an Animated Tab Bar in SwiftUI

A GIF showing the animated underline tab bar, that will be made in this article.

Introduction

Today we’re going to use the power of SwiftUI to make a simple animation of the underline bar moving from tab to tab. This’ll literally only take a couple minutes.

The Inner Views

So first things first, we need to create a couple of views to present. In my case, I just created a couple of variables for demonstration purposes.

var view1: some View {
   Color.red.opacity(0.2).edgesIgnoringSafeArea(.all)
}
var view2: some View {
  Color.blue.opacity(0.2).edgesIgnoringSafeArea(.all)
}
var view3: some View {    Color.yellow.opacity(0.2).edgesIgnoringSafeArea(.all)
}

Tab View

And then with these views, you can simply place them inside of a TabView which is embedded inside of a ZStack. The ZStack allows for us to place the tab bar on top of the TabView.

The .tabViewStyle(.page(indexDisplayMode: .never)) allows us to swipe between the tabs and gets rid of the bottom dots. The .edgesIgnoringSafeArea is completely optional, it just makes the colors fill the entire screen.

@State var currentTab: Int = 0
@Namespace var namespace
...