Hey guys, one more question. Can I somehow make UI...

# compose-ios

[Lukas Anda]

Hey guys, one more question. Can I somehow make UIKitView (the compose wrapper for UIKit) wrap its height and fill width ?

[mohamed rejeb]

Yes, you can.
That's how I do it, in this example I'm wrapping both width and height, try to use the same approach with wrapping height

https://github.com/MohamedRejeb/Calf/blob/main/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/AdaptiveDatePicker.ios.kt

https://github.com/MohamedRejeb/Calf/blob/main/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/DatePickerManager.kt#L51

[Lukas Anda]

Yes but I am unable to do it 1:1 because for me, if I do not set the frame on custom UIView (which is by the way UIHostingController, the view is just fullscreen. Can I somehow force the UIHostingController to resize itself to wrap content?

[Lukas Anda]

Nvm, got it working with some dark magic haha

[Angga Ardinata]

Nvm, got it working with some dark magic haha

mine sharing how to do it ?

[Lukas Anda]

Yes sure, so basically, you need to, as @mohamed rejeb mentioned, wrap width and height, but the trick was to wrap it from both sides, e.g. from the side of compose and UIKit.

So for ComposeSide, I did this (notice the onResize):

@OptIn(ExperimentalForeignApi::class)
@Composable
internal actual fun PlatformText(text: String) {
    val factory = LocalTestViewInterfaceFactory.current
    var width by remember { mutableStateOf(0) }
    var height by remember { mutableStateOf(0) }

    LaunchedEffect(text) {
        factory.showText(text)
    }

    UIKitView(
        factory = {
            factory.getView()
        },
        modifier = Modifier
            .then(if (height == 0) Modifier else Modifier.height(height.dp))
            .then(if (width == 0) Modifier else Modifier.width(width.dp))
        ,
        onResize = { view, _ ->
            view.frame.useContents {
                height = this.size.height.toInt()
                width = this.size.width.toInt()
            }
        }
    )
}

And as for the view, I am still experimenting as the Swiftui is still complaining about environment used incorrectly but for the simple Text() it works fine (Replace LaTeX with Text):

struct TestView: View {
    var body: some View {
        VStack(alignment: .leading) {
            
            LaTeX("The quadratic formula is $$x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$$ and it has zeros at the roots of $f(x)=ax^2+bx+c$.")
              .font(.system(size: 12))
              .parsingMode(.onlyEquations)
              .frame(maxWidth:.infinity, alignment: .leading)
              .blockMode(.alwaysInline)
              .background(.green)
        }
        .frame(alignment: .leading)
        .frame(maxWidth: .infinity)
        .background(.red)
    }
}

and in UIKit:

class TestViewInterfaceImpl: TestViewInterface {
    func getView() -> UIView {
        let controller = UIHostingController(rootView: TestView())
        let targetSize = controller.sizeThatFits(in: CGSize(width: UIScreen.main.bounds.width, height:UIScreen.main.bounds.height))
        controller.view.frame = CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height:targetSize.height))

        let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height:targetSize.height)))
        view.addSubview(controller.view)
        return view
    }
    
    func showText(text: String) {
        
    }
    
}