I am building a Kotlin Multiplatform app where I want to use shared UI with Compose for both Android and iOS. However, I need some native views with their own state for certain parts of the app, so I’m trying the UIKitViewController composable.
The problem is that when I rotate the phone, the list disappears from the screen (only the list, not the "Markers: " text).
Here’s my Kotlin code:
@Composable actual fun MarkersList( modifier: Modifier, markers: List<EventMarker> ) { val factory = NativeViewCompositonLocal.current Box( modifier = modifier, contentAlignment = Alignment.Center ){ UIKitViewController( modifier = Modifier.size(500.dp), factory = { factory.CreateListWrapper(markers) as UIViewController }, update = { view -> view as ListWrapperProtocol view.UpdateMarkers(markers) }, ) } } My swift code:
import SwiftUI import ComposeApp class MarkersModel: ObservableObject { @Published var markers: [EventMarker] = [] init(markers: [EventMarker] = []) { self.markers = markers } } struct MarkersList: View { @ObservedObject var model: MarkersModel var body: some View { VStack(alignment: .leading) { Text("Markers:").foregroundColor(.black) ForEach(model.markers.map { IdentifiableEventMarker(marker: $0) }) { marker in Text(marker.marker.id) .foregroundColor(.black) } } .padding() } } class ListWrapper: UIViewController, ListWrapperProtocol { private let hostingController: UIHostingController<MarkersList> private let model: MarkersModel init(initialMarkers: [EventMarker]) { self.model = MarkersModel(markers: initialMarkers) self.hostingController = UIHostingController(rootView: MarkersList(model: model)) super.init(nibName: nil, bundle: nil) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func viewDidLoad() { super.viewDidLoad() addChild(hostingController) view.addSubview(hostingController.view) hostingController.view.frame = view.bounds hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight] hostingController.didMove(toParent: self) } func UpdateMarkers(markers: [EventMarker]) { self.model.markers = markers markers.forEach { marker in print("Marker updated id: " + marker.id) } } } Do you know any solution for this? I have tried several approaches, but I still can’t find a working solution. Any help would be greatly appreciated. Thanks 🙏
Images of what is happening:
the list showing propertly the id of every marker
The list dissapearing after rotating the phone
pd: the list does not return after going back to portrait orientation
