Implement Geometryreader in a tabview

Hello,

I'm trying to implement Geometryreader in a tabview and I'm having difficulties.

My application is divided in 4 parent views and on which we go with a tabBar. In the first view "Home", there is also a custom tabBar.

I would like that when I scroll the child view given by the custom tabview, the title of the mother view "Home //(Accueil)" moves in the toolbar.

When I follow the tutorials on internet to print the minY when I scroll, nothing appears.

Here is the code of my mother view:


struct HomeView: View {

    @State var top = UIApplication
                        .shared
                        .connectedScenes
                        .flatMap { ($0 as? UIWindowScene)?.windows ?? [] }
                        .first { $0.isKeyWindow }

    @State var currentTab: Int = 0

    var body: some View {
    
    VStack(alignment: .leading){
    
        VStack {
 
               HStack{

                    friendsButton
                    Spacer()
                    profilButton
                    settingsButton
                }
                .padding()
            }
            title
            ZStack(alignment: .topLeading){

                //selectedView
                TabView(selection: self.$currentTab){               
  
                    NewsView() .tag(0)
                    ProgressView().tag(1)
                    MyTrophiesView().tag(2)                      
                }
                .tabViewStyle(.page(indexDisplayMode: .never)).edgesIgnoringSafeArea(.all)
                   
                //tabBar
                TabBarHomeView(currentTab: self.$currentTab)
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {

    static var previews: some View {

        HomeView()

    }

}



extension HomeView{

    private var settingsButton: some View{...}
    private var profilButton: some View{...}
    private var friendsButton: some View{...}
    private var title: some View{...}
    }

      

Here is the code for my child view "News":


    @State var offset: CGFloat = 0
  
    var body: some View {
        ScrollView(showsIndicators: false){

            VStack{
                Spacer()
                    .frame(height:50)

                SeasonPopUpView()
                newPoisView()
                randomDrawView()
                toursView()
                Spacer()
            }            
        }
        .padding(.top, 10)
        .overlay(
            GeometryReader{proxy -> Color in
                let minY = proxy.frame(in: .global).minY
          
                print(minY)

                return Color.clear
        }
        )
    }
}

Here is the code of my custom tabBar:


import SwiftUI



//TabBar Model

struct TabBarHomeView: View{

    @Binding var currentTab: Int

    @Namespace var namespace

    var tabBarOptions: [String] = ["Actualité", "Progression", "Trophées"]

    var body: some View{

        

            HStack(spacing: 0){

                ForEach(Array(zip(self.tabBarOptions.indices, self.tabBarOptions)),

                        

                        id:\.0,

                        content: {

                    index, name in

                    TabBarHomeItem(currentTab: self.$currentTab,

                                   namespace: namespace.self,

                                   tabBarItemName: name,

                                   tab: index)

                })

            }

            .padding(.horizontal)

            .background(.ultraThinMaterial)

            .frame(height: 43)

            .cornerRadius(5)

            .padding(.horizontal, 5)

            .padding(.vertical, 0)

        //.edgesIgnoringSafeArea(.all)

    }

}





// TabBar buttons model 

struct TabBarHomeItem: View{
    @Binding var currentTab: Int

    let namespace: Namespace.ID
    var tabBarItemName: String
    var tab: Int
    var body: some View{

        Button{
            self.currentTab = tab
        } label: {
            VStack(spacing:7){
                Spacer(minLength: 3)
                Text(tabBarItemName)
                    .font(.title3)
                    .fontWeight(.medium)

                if currentTab == tab{

                    Color.primary
                        .frame(height: 5)
                        .matchedGeometryEffect(id: "underline",

                                               in: namespace,

                                               properties: .frame)

                }else{

                    Color.clear.frame(height: 5)
                }
            }
            .animation(.spring(), value: self.currentTab)
         
        }
        .buttonStyle(.plain)
    }
}

My goal is that the title appear in small between the top buttons, that the custom tabBar come to stay blocked under the toolBar (like a pinned section title in a list), and that the whole takes the background color of the custom tabBar in its initial state.

Here is a picture of the HomeView:

If you have any hints I'm interested.

Thanks for reading.

Answered by -Pacman in 740767022

It was necessary to implement geometryreader inside the tabView.


                        

                    

                    ScrollView(.vertical, showsIndicators: false, content:{

                                NewsView()
                                    .tag(0)
                                    .padding(.top, 10)
                                    .overlay(
                         

                                        GeometryReader{proxy -> Color in
                                      
                                            let minY = proxy.frame(in: .global).minY
                                           
                                            print(minY)                                          

                                            return Color.clear
                                        }
                                        .frame(width: 0, height: 0)
                                    )
                    }            
                    )
                    ProgressView().tag(1)
                    MyTrophiesView().tag(2)                
                }
                .tabViewStyle(.page(indexDisplayMode: .never)).edgesIgnoringSafeArea(.all)
Accepted Answer

It was necessary to implement geometryreader inside the tabView.


                        

                    

                    ScrollView(.vertical, showsIndicators: false, content:{

                                NewsView()
                                    .tag(0)
                                    .padding(.top, 10)
                                    .overlay(
                         

                                        GeometryReader{proxy -> Color in
                                      
                                            let minY = proxy.frame(in: .global).minY
                                           
                                            print(minY)                                          

                                            return Color.clear
                                        }
                                        .frame(width: 0, height: 0)
                                    )
                    }            
                    )
                    ProgressView().tag(1)
                    MyTrophiesView().tag(2)                
                }
                .tabViewStyle(.page(indexDisplayMode: .never)).edgesIgnoringSafeArea(.all)
Implement Geometryreader in a tabview
 
 
Q