iOS native view is not rendered when haze is applied

[colin-weng-s]

Information

• Haze version: 0.7.2
• Platform: iOS (iPhone 15 Pro simulator running on iOS 17.2)

I want to blur all the contents on the screen below a snackbar, on Android it works, but on iOS, when there are composables that contain implemented iOS native views, they are not rendered. The blur effect itself is correct.

Expected Behavior

on Android, it works.

Screen_recording_20240620_193618.webm

Actual Behavior

on iOS, the Toggle is broken only during haze is used.

https://github.com/chrisbanes/haze/assets/167203772/113ecdb1-3333-4010-abbd-c601b09c200a

Steps to Reproduce the Problem

1. implement a native iOS view:

// ThemedSwitch.ios.kt
@Composable
actual fun ThemedSwitch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
) {
    val appContext = koinInject<AppContext>()
    val viewModel = remember { SwitchViewModel(onCheckedChange) }
    LaunchedEffect(checked) {
        viewModel.isChecked = checked
    }
    UIKitViewController(
        modifier = Modifier.size(55.dp, 33.dp),
        factory = { appContext.uiViewControllerContext.componentFactories.switchFactory(viewModel) },
        update = {},
    )
}

struct SwitchView: View {
    @ObservedObject var viewModel: SwitchViewModelWrapper

    var body: some View {
        Toggle("", isOn: $viewModel.isChecked)
            .tint(Color(uiColor: ColorHelper().toUIColor(color: Colors().brandNormal)))
            .labelsHidden()
            .padding()
    }
}

View model implementations are omitted because it's not related, I think. If you need it please tell me.

2. Use haze for the snackbar

// App composable
AppTheme {
    GuardSignIn { isLoggedIn ->
        val initialScreen = remember(isLoggedIn) {
            if (isLoggedIn) MainScreen.createHome() else SignInScreen
        }
        Box(
            modifier = Modifier.fillMaxSize()
                .background(brush = Colors.gradientBackground)
                .haze(koinInject()) // the app-wide HazeState
        ) {
           // screen contents that need to be blurred
        }
    }

    koinInject<SnackbarController>().Compose()
}

// SnackbarController.Compose()
Box(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxWidth()
        .height(56.dp)
        .hazeChild(koinInject<HazeState>(), shape = shape, style = HazeStyle(blurRadius = 10.dp))
        .shadow(elevation = 8.dp, shape = shape),
) {
  // contents
}

[chrisbanes]

This is basically a side effect of how UiKit views rendered in Compose Multiplatform iOS. Not much we can do about this, as they're not actually drawn in Compose (CMP punches a hole through the Compose content and draws them behind).

[rschattauer]

@chrisbanes , is that something 0.9 is fixing or is there no possibility for this topic?

[chrisbanes]

I haven't tried, but it might help

[rschattauer]

@chrisbanes I tried it and it seems 0.9.0-alpha07 works somewhat-ish, just materials wasn't something I could use as it was showing some weird effects (almost fully translucent). Here is a SwiftUI map in the background within a Scaffold with Floating Action Buttons with custom HazeStyle.

style = HazeStyle(
     backgroundColor = FloatingActionButtonDefaults.containerColor,
    tint = FloatingActionButtonDefaults.containerColor.copy(alpha = 0.3f),
    blurRadius = 148.dp,
),

The thing is that this looks different on iOS and Android and also I would assume that with such a high blurRadius I wouldn't see any text through at all, but it's readable on iOS (Android expected as low Android version). Am I missing the blur fully? It just changes opacity going higher. (look at the bottom FAB, I was playing around with that one)

Should I create a new issue or do you want to use this here?

[chrisbanes]

My guess is that the map content isn't actually being drawn in the blur on iOS, and what you're seeing is the white background being blurred.

I need a sample to see what's really happening though. If someone wants to send a PR for a quick MapView sample, that would help speed things up. Otherwise I'll see if I can find some time.

[rschattauer]

@chrisbanes , would a testing repository with map + haze also help? I could set that up quickly.

[chrisbanes]

Yeah that would work, or a PR adding it to the samples in this repo. Either works.

[rschattauer]

https://github.com/rschattauer/compose_multiplatform/ Branch: broken-haze-on-map Feel free to copy stuff as you wish into haze as a sample.

In the README it's stated on how to add your private MapBox keys. There is val useUIKitInsteadOfSwiftUI = false that you can make true to also see the same (not working) effect on UIKitView instead of UIKitViewController if that even makes a difference. On the home and map screen you will find a top bar that has the haze effect activated.

Android:

iOS:

If there is anything else I can help you with, please let me know.