SwiftUI: Animation covers text while in Zstack

Question

my app is having appearance dark , i don't know if its really matters or not but i am doing an animation on my app ( Complex UI - custom slide out menu ) then after i did everything good and layout for my dark appearance seems fine , every time i press a button for some reason it covers the button with the animation despite of using background & zstack to let show in the background but never show up .. please help me to find the problem ..

my code

---

import SwiftUI

struct CustomCorners: Shape {
    var corners : UIRectCorner
    var radius: CGFloat
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        
        return Path(path.cgPath)
        
    }
    
}

struct TabButton: View {

//properties
var image: String
var title: String

// selected tab..
@Binding var selectedTab: String
//hero animation slide
var  animation: Namespace.ID
var body: some View {
    Button(action: {
            withAnimation(.spring()){selectedTab = title}
    }, label: {
        HStack( spacing: 15){
                Image(systemName:  image)
                    .font(.title2)
                    .frame(width: 30)
                Text(title)
                    .fontWeight(.semibold)
            }
            .foregroundColor(selectedTab == title ? Color("yellow") : .black)
            .padding(.vertical,12)
            .padding(.horizontal,10)
        .background(
        ZStack{
            Color.white
                if selectedTab == title{
                    Color.yellow
                    .opacity(selectedTab == title ? 1 : 0 )
                    .clipShape(CustomCorners(corners: [.topRight,.topLeft], radius: 8))
                        .matchedGeometryEffect(id: "TAB", in: animation)
                
                }
                
       }
    )
    
    })
        
    
}
}

struct MnView: View {
    //selected tab
    @State var selectedTab = "Home"
    //animation namespace
    @Namespace var animation
    
    var body: some View {
        ZStack {
            Color("black")
                .ignoresSafeArea()
            
            //slide menu
        
            VStack(alignment: .leading, spacing: 15, content: {
                
                //profile file:
                Image("profile")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 70, height: 70)
                    .cornerRadius(10)
                
                //padding for top close button
                    .padding(.top,50)
                
                VStack(alignment: .leading, spacing: 6, content: {
                    Text("profile")
                        .font(.title)
                        .fontWeight(.heavy)
                        .foregroundColor(.white)
  
                    Button(action: {}, label: {
                        Text("View Profile")
                            .fontWeight(.semibold)
                            .foregroundColor(.yellow)
                            .opacity(0.7)
                    })
                
                })//vtsack
                
                
                //tab button
        
                
                VStack(alignment: .leading, spacing: 10){
                    
                    TabButton(image: "gearshape.2", title: "Settings", selectedTab: $selectedTab, animation: animation)
                        
                TabButton(image: "info.circle.fill", title: "About us", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "books.vertical.fill", title: "refernce", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "phone", title: "Contact Us", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "star.circle.fill", title: "Consult a Specialist ", selectedTab: $selectedTab, animation: animation)
                    
                    
                }//vstack
                .padding(.leading, -15)
                .padding(.top,50)
                
                Spacer()
            
                
            })//vstack
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            
            
            
        }//zstack
    }
}

struct MnView_Previews: PreviewProvider {
    static var previews: some View {
        MnView()
            
    }
}

Answer 1

I think it's pretty simple, I noticed you are making the background white in the TabButton's .background view modifier. Remove the line Color.white between the ZStack and the if statement. The other thing is the foregroundColor modifier. I think the colors are backwards. switch that around like:

.foregroundColor(selectedTab == title ? .black : .yellow)

I'm pretty sure that will take care of it.

If you want to learn more about dark mode handling you can checkout this blog article to learn about dynamic colors and how swiftui support that.