Only the first UIKitView in a Box is displayed properly on iOS

[brewin]

Describe the bug
Multiple UIKitViews cannot be displayed in a Box on iOS. Only the first UIKitView is displayed properly.

Affected platforms

• iOS

Versions

• Kotlin version*: 1.9.21
• Compose Multiplatform version*: 1.6.0-dev1296
• OS version(s)* (required for Desktop and iOS issues): iOS 17.0
• OS architecture (x86 or arm64): arm64

To Reproduce

Common

@Composable
expect fun DemoView()

iOS

@OptIn(ExperimentalForeignApi::class)
@Composable
actual fun DemoView() {
    Box(modifier = Modifier.fillMaxSize().background(Color.Yellow)) {
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.blueColor
                }
            },
            modifier = Modifier.size(100.dp),
        )
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.redColor
                }
            },
            modifier = Modifier.size(100.dp).offset(50.dp, 50.dp),
        )
    }
}

Android

@Composable
actual fun DemoView() {
    Box(modifier = Modifier.fillMaxSize().background(Color.Yellow)) {
        AndroidView(
            factory = { context ->
                View(context).apply {
                    setBackgroundColor(Color.Blue.toArgb())
                }
            },
            modifier = Modifier.size(100.dp)
        )
        AndroidView(
            factory = { context ->
                View(context).apply {
                    setBackgroundColor(Color.Red.toArgb())
                }
            },
            modifier = Modifier.size(100.dp).offset(50.dp, 50.dp)
        )
    }
}

Expected behavior
On iOS, only the blue square is displayed properly, with the other square appearing to be rendered behind it and without color. I expect a red square to be displayed overlapping a blue square, like on Android.

[m-sasha]

Hi. This is a known limitation due to how we draw native views. Unfortunately we don't currently plan to fix this. You can work around it by placing both native (UIKitView) views inside a single native view.

[m-sasha]

On 2nd thought maybe we can do this. It does work on the desktop:

fun main() = singleWindowApplication {
    Column(Modifier.fillMaxSize()) {
        SwingPanel(
            modifier = Modifier.height(200.dp).fillMaxWidth(),
            factory = {
                JPanel().also {
                    it.background = java.awt.Color.RED
                }
            }
        )
        SwingPanel(
            modifier = Modifier.height(200.dp).fillMaxWidth(),
            factory = {
                JPanel().also {
                    it.background = java.awt.Color.YELLOW
                }
            }
        )
        SwingPanel(
            modifier = Modifier.height(200.dp).fillMaxWidth(),
            factory = {
                JPanel().also {
                    it.background = java.awt.Color.GREEN
                }
            }
        )
    }
}

[m-sasha]

Hmm, looks like there are several issues here. I'm getting this:

    Box(modifier = Modifier.fillMaxSize().background(Color.Yellow)) {
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.blueColor
                }
            },
            modifier = Modifier.size(100.dp),
        )
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.redColor
                }
            },
            modifier = Modifier.size(100.dp).offset(50.dp, 50.dp),
        )
    }

Reordering the size and offset modifiers I get this:

So there are at least two problems:

1. It seems the native views are added in reverse order. @dima-avdeev-jb is taking care of this.
2. The order of modifiers somehow matters, although it seems it shouldn't.

Also @brewin are the screenshots above representative of what you're seeing? Because with the code you provided I do see a white rectangle for the 2nd view, whereas you mentioned that only the 1st view is visible.

[brewin]

@m-sasha Yes, originally I didn't see the white square. I edited the issue to add the yellow background which makes the white square visible.

Setting the blue square translucent shows the issue with the order.

    Box(modifier = Modifier.fillMaxSize().background(Color.Yellow)) {
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.blueColor.colorWithAlphaComponent(0.5)
                }
            },
            modifier = Modifier.size(100.dp),
            background = Color.Transparent,
        )
        UIKitView(
            factory = {
                UIView().apply {
                    backgroundColor = UIColor.redColor
                }
            },
            modifier = Modifier
                .offset(50.dp, 50.dp)
                .size(100.dp),
            background = Color.Transparent,
        )
    }

When size comes before offset, the first square turns purple. It seems the colors are blended before the offset occurs.

[dima-avdeev-jb]

Fixed in 1.6.0-rc03

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.