TabView ( page style) does not scale to fit it's item swiftUI

Question

I am using a tabView for a sliding header on a mobile app I have an object for the tabItem view, an object for the TabView and another object as the main view the issue is the object that is written on the mainView doesn't have enough height to show the tabItems wide. here is the code that I wrote:

//This code is used to make a view for tabItem
struct FeaturedItemView: View {
    // MARK: - PROPERTIES
    var player: Player
    
    var body: some View {
        Image(player.image)
            .resizable()
            .scaledToFit()
            .cornerRadius(12)
    }
}

//This Code is used for create a view for TabView object
struct FeaturesTabView: View {
    // MARK: - PROPERTIES

    // MARK: - BODY
    var body: some View {
        TabView {
            ForEach(players) { player in
                FeaturedItemView(player: player)
                    .padding(.top, 10)
                    .padding(.horizontal, 15)
                    
            }//: FOREACH
        }//: TABVIEW
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

//This is the mainView
struct ContentView: View {
  
  // MARK: - BODY
    var body: some View {
        ZStack {
            VStack(alignment: .center, spacing: 10) {
                NavigationBarView()
                    .padding(.horizontal, 15)
                    .padding(.bottom)
                    .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
                    .background(Color.white)
                    .shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 5)
                
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 0) {
                        // The issue is occurred here
                        // ******************
                        FeaturesTabView()
                            .padding(.vertical, 20)
                        //****************

                        FooterView()
                            .padding(.horizontal)
                    }//: VSTACK
                    
                }//: SCROLL
                
            }//: VSTACK
            .background(colorBackground.ignoresSafeArea(.all, edges: .all))
        }
        .ignoresSafeArea(.all, edges: .top)
    }
}

the view that shows is something like below:

but the view that is expected is the below:

Answer 1

The problem is your FeaturesTabView is collapsing in the ScrollView without a .frame. In order to make it adaptable, put a GeometryReader on your view, and then set your .frame() to whatever portion of the screen you want it to take up. As an example, I gave it 1/3 of the height of the screen. Because of the .scaledToFit(), the image will expand it's width to stay proportional on the screen, so you do not need to set width on the frame.

struct ContentView: View {
  
  // MARK: - BODY
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                VStack(alignment: .center, spacing: 10) {
                     NavigationBarView()
                         .padding(.horizontal, 15)
                         .padding(.bottom)
                         .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
                         .background(Color.white)
                         .shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 5)
                
                      ScrollView(.vertical, showsIndicators: false) {
                          VStack(spacing: 0) {
                            // Put a frame on your view to prevent it from collapsing in the ScrollView
                             FeaturesTabView()
                               .padding(.vertical, 20)
                               .frame(width: geometry.size.width, height: geometry.size.height / 3)

                            FooterView()
                               .padding(.horizontal)
                       }//: VSTACK
                    
                   }//: SCROLL
                
               }//: VSTACK
               .background(colorBackground.ignoresSafeArea(.all, edges: .all))
           }
           .ignoresSafeArea(.all, edges: .top)
        }//: GEOMETRYREADER
    }
}