TabView tabItem image move to top

Question

I learned how to create a tabBar like UIKit tabBar in swiftUI. And I want to move the center tabItem to top . Is there any way I can achieve this?

TabView code

TabView {
        ViewTasks()
            .tabItem {
                Image(systemName: "list.bullet.below.rectangle")
                Text("View Tasks")
        }
        AddTask()
            .tabItem {
                Image(systemName: "plus.circle").font(.system(size: 60))
        }
        CategoriesTasks()
            .tabItem {
                Image(systemName: "square.grid.2x2")
                Text("Categories")
        }
    }

Visual Example

Answer 1

SWIFTUI 2

.onTapGesture usage sometimes causes unexpected behavior such as not displaying the overlay view (alert, sheets or fullscreen) or displaying it when you click another tab. The safer way is to set the selection value with the .onChange(of:) method:

struct TabViewModel: View {

@State var selection: Int = 0
var body: some View {

    ZStack {
        GeometryReader { geometry in
            TabView(selection: self.$selection) {
//...
                Text("plus")
                    .tabItem {
                        Text(" ")
                }.tag(1)
//...
            .onChange(of: selection) { _ in
                self.selection = 1
            }
// ...

}

Answer 2

First idea is to use ZStack so you can cover tabItem with your own tappable image. Here is example:

struct TabViewModel: View {

    @State var showActionSheet: Bool = false

    var body: some View {


        ZStack {
            GeometryReader { geometry in
                TabView {

                            Text("list")
                                .tabItem {
                                    Image(systemName: "list.bullet.below.rectangle")
                            }

                            Text("plus")
                                .tabItem {
                                    Text(" ")
                            }

                            Text("categories")
                                .tabItem {
                                    Image(systemName: "square.grid.2x2")
                            }
                        }

                Image(systemName: "plus.circle")
                    .resizable()
                    .frame(width: 40, height: 40)
                    .shadow(color: .gray, radius: 2, x: 0, y: 5)
                    .offset(x: geometry.size.width / 2 - 20, y: geometry.size.height - 80)
                    .onTapGesture {
                        self.showActionSheet.toggle()
                }
            }

        }
        .actionSheet(isPresented: $showActionSheet) {
            ActionSheet(title: Text("some actions"))
        }

    }
}

so some image will cover center tabView item, which will be invisible (Text(" ")):

update

if you still need to switch between these 3 views you can use @State var selection (don't forget to tag(...) tabItems):

struct TabViewModel: View {

    @State var selection: Int = 0
    var body: some View {

        ZStack {
            GeometryReader { geometry in
                TabView(selection: self.$selection) {
    //...
                    Text("plus")
                        .tabItem {
                            Text(" ")
                    }.tag(1)
    //...
                .onTapGesture {
                        self.selection = 1
                }
    // ...
}