Skip to main content

Return to Question

added 850 characters in body
Source Link
Dias Kaussov
Dias Kaussov
  • 1
  • 1

The Navigation Stack:

struct RootView: View {

    @StateObject private var router = Router()
    
    var body: some View {
        NavigationStack(path: $router.path) {
            Color.clear
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    
                    case .launch:
                        LaunchScreen()
                            .onAppear { router.decideInitialFlow() }
                            .navigationBarBackButtonHidden(true)
                    
                    case .onboarding:
                        OnboardingView(viewModel: OnboardingViewModel(finish: router.finishOnboarding))
                            .navigationBarBackButtonHidden(true)
                    }
                }
        }
    }
}

The problem is:

The problem is:

The Navigation Stack:

struct RootView: View {

    @StateObject private var router = Router()
    
    var body: some View {
        NavigationStack(path: $router.path) {
            Color.clear
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    
                    case .launch:
                        LaunchScreen()
                            .onAppear { router.decideInitialFlow() }
                            .navigationBarBackButtonHidden(true)
                    
                    case .onboarding:
                        OnboardingView(viewModel: OnboardingViewModel(finish: router.finishOnboarding))
                            .navigationBarBackButtonHidden(true)
                    }
                }
        }
    }
}

The problem is:

show images in table
Source Link
Benzy Neez
Benzy Neez
  • 29.6k
  • 3
  • 22
  • 64
  1. Even without NavigationStack, ignoresSafeArea stretches TabView out of safe area
  2. If ignoresSafeArea modifier is used with TabView, then content is go beyond safe area
  3. If ignoresSafeAre modifier is not used with TabView, then the image does not cover full screen
    VStack and no safe area
    Vstack and safe area
VStack and no safe area:Vstack and safe area:
VStack and no safe areaVstack and safe area
  1. Even without NavigationStack, ignoresSafeArea stretches TabView out of safe area
  2. If ignoresSafeArea modifier is used with TabView, then content is go beyond safe area
  3. If ignoresSafeAre modifier is not used with TabView, then the image does not cover full screen
    VStack and no safe area
    Vstack and safe area
  1. Even without NavigationStack, ignoresSafeArea stretches TabView out of safe area
  2. If ignoresSafeArea modifier is used with TabView, then content is go beyond safe area
  3. If ignoresSafeAre modifier is not used with TabView, then the image does not cover full screen
VStack and no safe area:Vstack and safe area:
VStack and no safe areaVstack and safe area
Source Link
Dias Kaussov
Dias Kaussov
  • 1
  • 1

Content of TabView is going beyond safe areas in the NavigationStack

import SwiftUI
struct OnboardingView: View {        
    @ObservedObject var viewModel: OnboardingViewModel        
    var body: some View {        
        TabView(selection: $viewModel.currentPage) {           
            ForEach(OnboardingPages.allCases, id: \.rawValue) { page in                
                getPageView(for: page)                    
                    .tag(page.rawValue)            
                }        
            }        
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))            
}        

@ViewBuilder    
private func getPageView(for page: OnboardingPages) -> some View {        
    VStack(spacing: 32) {                       
        Spacer()                        
        VStack(alignment: .center, spacing: 8) {                
            Text(page.title)                    
                .font(.urb(.semiBold, size: 32))                    
                .foregroundStyle(.white)                                
            Text(page.description)                    
                .font(.urb(.regular, size: 16))                    
                .foregroundStyle(.white)                    
                .multilineTextAlignment(.center)            
        }                        
        
        continueButton                        
           
        dots        
    }        
    .padding(.horizontal, 16)        
    .padding(.bottom, 35)        
    .ignoresSafeArea()        
    .background(            
        Image(page.image)                
            .resizable()                
            .scaledToFill()                
            .ignoresSafeArea()        
    )    
}

The problem is:

  1. Even without NavigationStack, ignoresSafeArea stretches TabView out of safe area
  2. If ignoresSafeArea modifier is used with TabView, then content is go beyond safe area
  3. If ignoresSafeAre modifier is not used with TabView, then the image does not cover full screen
    VStack and no safe area
    Vstack and safe area
created from staging ground