Home page view background color in not on full screen in iPhone 11 Simulator

Question

I am trying to build an app in SwiftUI and facing 1 challenge (Xcode Version 11.5) -

While running app on iPhone 11 simulator, background color is not coming on entire screen, bottom part of screen is still white however while running it on iPhone 8 simulator, it works fine. Not sure if it is simulator issue or code issue. I tried to add Spacer, change VStack, HStack but it did not work.

struct HomePageView: View {
    @State var size = UIScreen.main.bounds.width / 1.6

    var body: some View {
        GeometryReader{geometry in
            VStack {
                HStack {
                    ZStack{
                        NavigationView{
                            ZStack {
                                ScrollView(.vertical, showsIndicators: false) {
                                    VStack {
                                        View1()
                                    }.frame( maxWidth: .infinity)
                                }

                                .navigationBarItems(leading: Button(action: {
                                    self.size = 10

                                }, label: {
                                    Image("menu")
                                        .resizable()
                                        .frame(width: 30, height: 30)
                                }).foregroundColor(.appHeadingColor), trailing:
                                    Button(action: {
                                        print("profile is pressed")
                                    }) {
                                        HStack {
                                            NavigationLink(destination: ProfileView()) {
                                                LinearGradient.lairHorizontalDark
                                                    .frame(width: 30, height: 30)
                                                    .mask(
                                                        Image(systemName: "person.crop.circle")
                                                            .resizable()
                                                            .scaledToFit()
                                                )
                                            }
                                        }
                                    }
                                ).navigationBarTitle("Home", displayMode: .inline)
                            }
                        }
                        HStack{
                            menu(size: self.$size)
                                .cornerRadius(20)
                                .padding(.leading, -self.size)
                                .offset(x: -self.size)
                            Spacer().background(Color.lairBackgroundGray)
                        }
                        //Spacer()
                    }.animation(.spring()).background(Color.lairBackgroundGray)
                    //Spacer()
                }.padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)

                    .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
            }.frame(height: geometry.size.height).background(Color.lairBackgroundGray)
        }//.background(Color.lairBackgroundGray.edgesIgnoringSafeArea(.all))
    }
}

Below is my another view which basically get painted on screen as part of home view. Please forgive me to put so much code here but wanted to make sure if it is not because of View1 -

struct View1: View { @State var index = 0 var body: some View{ // ScrollView { GeometryReader { geometry in VStack{ HStack{ VStack { ZStack{ Circle() .trim(from: 0, to: 1) .stroke(Color.lairDarkGray.opacity(0.09), style: StrokeStyle(lineWidth: 34, lineCap: .round)) .frame(width: 80, height: 80)

                                Circle()
                                    .trim(from: 0, to: 0.5)
                                    .stroke(LinearGradient(gradient: Gradient(colors: [.buttonGradientStartColor, .buttonGradientEndColor]), startPoint: UnitPoint(x: -0.2, y: 0.5), endPoint: .bottomTrailing), style: StrokeStyle(lineWidth: 34, lineCap: .round))
                                    .frame(width: 80 , height: 80)
                                    .rotationEffect(.init(degrees: -90))

                                    Text("15")
                                        .font(.system(size:30))
                                        .fontWeight(.bold)
                            }.padding()
                            Text("Day(s)")
                            .foregroundColor(Color.black.opacity(0.8))
                        }.frame(height: 100)


                        VStack(alignment: .leading, spacing: 12){
                            HStack {
                                 Image("1")
                                    .resizable()
                                     .aspectRatio(contentMode: .fit)
                                     .frame(width: 170, height: 170)
                             }
                           .background(Color.lairBackgroundGray)
                            //.padding(.bottom, 5)
                        }
                        .padding(.leading, 20)
                        Spacer(minLength: 0)
                    }
                    .padding(.horizontal, 20)

                }//.frame(height: geometry.size.height)
                .background(Color.lairBackgroundGray.edgesIgnoringSafeArea(.all))
            }
            //}

        }

}[![enter image description here][1]][1]

Ludyem Ludyem · Accepted Answer · 2020-07-03T18:30:59

You just need to add

.edgesIgnoringSafeArea(.all)

to the view that you want to go fullscreen

Home page view background color in not on full screen in iPhone 11 Simulator

2 Answers