SwiftUI View using HostingController does not correctly Clip to Bounds in ExpoView

65 Views Asked by At

The SwiftUI View seems to be cropped off on top in an ExpoView (see Image). Instead I want it to clip to the bounds. Can somebody reproduce or tell me how I can resolve the issue?

swift ui view cropped on top

I used following SwiftUI View (example from the Internet).

struct MySwiftUIView: View {
    var name = ""
    var options: [String] = []
    @State var isOpen = false
    @State var picker = 0
    @State var slider = 50.0
    @State var isScaled = false
    
    var body: some View {
        NavigationView {
            if #available(iOS 14.0, *) {
                ScrollView {
                    VStack(spacing: 20) {
                        Text("SwiftUI + Expo!")
                            .font(.largeTitle)
                            .scaleEffect(isScaled ? 1.5 : 1.0)
                            .foregroundColor(isScaled ? .purple : .black)
                    
                        Button("Animations work too!") {
                            withAnimation {
                                isScaled.toggle()
                            }
                        }
                    
                        
                        NavigationLink("To Details") {
                            Text("Details")
                        }
                        Picker("Picker", selection: $picker, content: {
                            ForEach(Array(options.enumerated()), id: \.1) { index, option in
                                Text(option)
                                    .tag(index)
                            }
                        }).pickerStyle(.segmented)
                        
                        if #available(iOS 16.0, *) {
                            Button("Toggle Sheet") {
                                isOpen.toggle()
                            }.sheet(isPresented: $isOpen) {
                                Text("Sheet content")
                                    .presentationDetents([.medium, .large])
                            }.padding(.bottom, 100)
                        }
                    }
                    
                }.navigationTitle(Text("Home"))
            }
        }
    }
}

This the ExpoView where the hostingController is set up and constraints for the view are configured.

class SwiftuiView: ExpoView {
    let hostingController = UIHostingController(rootView: MySwiftUIView())

    required init(appContext: AppContext? = nil) {
        super.init(appContext: appContext)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        addSubview(hostingController.view)
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            hostingController.view.leftAnchor.constraint(equalTo: self.leftAnchor),
            hostingController.view.rightAnchor.constraint(equalTo: self.rightAnchor)
        ])
    }
}

Using: Expo SDK 50 iOS 16

1

There are 1 best solutions below

0
Tezzus On BEST ANSWER

So after receiving help from the community the issue was resolved by simply adding flex:1 or height: 100% to the Native View.

export default function ExpoNativeView() {
    return <NativeView style={{ height: '100%' }} />;
}