In this article, I’ll show you how to create a custom tab bar in SwiftUI.
Here is the code: https://github.com/yyokii/SwiftUICustomTab
A custom tab bar is overlaid on top of the main View using ZStack. By using the .transition modifier, you can create smooth animations for screen transitions. When you have more than three tabs, retaining the previous tab can help in making the animation look more natural.
While similar functionality can be achieved with TabView, there are some drawbacks:
- When displaying scrollable content, the TabView area remains at the bottom.
- Using .tabViewStyle(.page(indexDisplayMode: .never)) can remove the default TabView display and enable paging. However, this can cause issues with the top inset when using NavigationStack.
To avoid making it difficult to use standard components like NavigationStack and ScrollView, it is better not to use TabView in this case.
I hope this is helpful to someone. Thank you!
