How can I properly display TabView within a ScrollView in SwiftUI for a complex UI?

The issue is that when you embed a TabView (especially one with the .page style) inside a ScrollView, the TabView isn’t given an intrinsic height. As a result, it may collapse to zero height and not show its content. To fix this, you need to provide the TabView with an explicit height (or constrain its size) so that the scroll view can lay it out correctly.

For example, you could wrap your TabView with a frame modifier:

SWIFTCopied
ScrollView {
    VStack {
        if showDivider {
            Divider()
                .offset(y: isSearching ? -26 : -14)
        }
        
        TabView(selection: $activeTab) {
            SearchContentView(selectedTab: $selectedTab, category: PickerTab.all.rawValue)
                .tag(PickerTab.all)
            
            SearchContentView(selectedTab: $selectedTab, category: PickerTab.technology.rawValue)
                .tag(PickerTab.technology)
            
            SearchContentView(selectedTab: $selectedTab, category: PickerTab.sports.rawValue)
                .tag(PickerTab.animals)
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .frame(height: 400) // Specify an explicit height that works for your content
    }
    .padding(.top, isSearching ? 0 : 30)
    .safeAreaInset(edge: .top, spacing: 0) {
        ExpandableNavigationBar()
    }
    .animation(.snappy(duration: 0.3, extraBounce: 0), value: isSearching)
}
.scrollTargetBehavior(CustomScrollTargetBehaviour())
.contentMargins(.top, 190, for: .scrollIndicators)
.onChange(of: isSearching) { oldValue, newValue in
    withAnimation(.easeIn(duration: 1)) {
        showDivider = !newValue
    }
}

Explanation

• Explicit height: Setting a fixed frame (for example, .frame(height: 400)) ensures that the TabView is given enough room to render its pages.
• Flexible sizing: Alternatively, you could use a GeometryReader to calculate the available height if the height of your TabView should be dynamic.

By constraining the TabView’s height, it will be rendered properly inside the ScrollView without interfering with your other UI elements.