swiftuiexpouikitreact-native-native-moduleuihostingcontroller

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


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


Solution

  • 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%' }} />;
    }