79182376

Date: 2024-11-12 18:56:54
Score: 0.5
Natty:
Report link

You don't need to use .tabViewStyle(.page(indexDisplayMode: .never)) modifier to achieve this, you can do this by binding the selectedTab with TabView.

struct ContentView: View {

  @State var selectedTab = 0

  var body: some View {
    ZStack(alignment: .bottom) {
        TabView(selection: $selectedTab) {
            HomeView(page: 0)
                .tag(0)
            
            HomeView(page: 1)
                .tag(1)
            
            HomeView(page: 2)
                .tag(2)
            
            HomeView(page: 3)
                .tag(3)
            
            HomeView(page: 4)
                .tag(4)
        }
        
        RoundedRectangle(cornerRadius: 25)
            .frame(width: 350, height: 70)
            .foregroundColor(.white)
            .shadow(radius: 0.8)

        HStack {
            ForEach(0..<5, id: \.self) { index in
                    Button {
                        selectedTab = index
                    } label: {
                        CustomTabItem(imageName: "cross", title: "Item \(index)", isActive: (selectedTab == index))
                    }
            }
        }
        .padding(.horizontal, 30)
        .frame(height: 70)
    }
  }

  @ViewBuilder func CustomTabItem(imageName: String, title: String, isActive: Bool) -> some View{
    VStack(alignment: .center) {
        HStack(alignment: .center) {
            Spacer()
            Image(systemName: imageName)
                .resizable()
                .renderingMode(.template)
                .foregroundColor(isActive ? .purple : .gray)
                .frame(width: 25, height: 25)
            Spacer()
        }
        Text(title)
            .foregroundColor(isActive ? .purple : .gray)
    }
  }
}

struct HomeView: View {

  var page: Int

  var body: some View {
    NavigationView {
        VStack {
            NavigationLink(destination: HomeDetailView()) {
                Text("Tab \(page) is selected")
            }
        }
        .background(.red)
    }
    .navigationViewStyle(.stack)
  }
}

struct HomeDetailView: View {
  var body: some View {
    Rectangle()
        .fill(.orange)
  }
}

enter image description here

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Akash Gupta