Why is my text not showing up on my simulation screen?

Question

I am working on my launchpage of an app in swiftui using xcode 15.0.1 I have created a navbar element and want to put the text "Groups" at the top and use it as a button to take users to the GroupsPage. This is my file:

import SwiftUI

struct LaunchPage: View {
    var body: some View {
        NavigationView{
            ZStack{
                Color.green.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                ScrollView{
                    VStack {
                        Spacer()
                        
                        Image("carpooly-high-resolution-logo")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 700, height: 500)
                            .offset(y:25)
                            .padding(.horizontal, 20)
                        
                        HStack{
                            Spacer()
                            
                            NavigationLink(destination: GroupPage()) {
                                Text("Groups")
                                .font(.system(size: 16, weight:.bold))
                                .foregroundColor(.primary)
                                .frame(maxWidth: .infinity, alignment: .trailing)
                            }
                                .padding(.trailing, 20)
                        }
                    }
                }
            }
            .navigationBarHidden(false)
        }
    }
}

struct GroupPage: View{
    var body: some View {
        Text("Groups")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(/*@START_MENU_TOKEN@*/.all, 2.0)
            .frame(width: 200.0, height: 50.0)
            .navigationBarTitle("Group Page")
    }
}

struct LaunchPage_Previews: PreviewProvider {
    static var previews: some View{
        LaunchPage()
    }
}

When I preview the page, the text Groups in the HStack container is not being shown. Thank you for your help!

I have tried changing the colors of the text. I have tried changing the navigation a little bit but any solutions with navigation would be greatly appreciated as well!

Answer 1

It's because your Image's width is too large. It's larger than the screen width. So the HStack, with Groups text inside, which was aligned on the bottom-right, will be out of the screen (since they are both nested in ScrollView). That's why you don't see it. Try to make your Image smaller.

I will put it inside GeometryReader which means the LaunchPage takes the parent layout as its size.

NavigationView {
    GeometryReader { geo in // <- wrap inside `GeometryReader`
        ZStack {
            Color.green.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            ScrollView {
                VStack {
                    Spacer()
                    
                    Image(systemName: "star")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
//                        .frame(width: 700, height: 500)
                        .frame(width: geo.size.width, height: geo.size.width * 1.5)
                        .offset(y:25)
                        .padding(.horizontal, 20)
                    
                    Spacer()
                        .frame(height: 100)
                    
                    HStack {
                        Spacer()
                        
                        NavigationLink(destination: GroupPage()) {
                            Text("Groups")
                                .font(.system(size: 16, weight:.bold))
                                .foregroundColor(.primary)
                                .frame(maxWidth: .infinity, alignment: .trailing)
                        }
                        .padding(.trailing, 20)
                    }
                }
            }
            .frame(width: geo.size.width)
        }
    }
    .navigationBarHidden(false)
}

Output here: