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