add additional iOS platform settings

TerryGlen commented 3 months ago

In this PR I have updated the IOSWebSettings object with common WKWebView settings. This allows for more customization of the client on the IOS platform.

While the Android WebView client is capable of having a transparent background due to the limitations of UIKitView IOS is not. As shown below.

val html =
    """
        <html>  
        <body>
            <h1>Transparent WebView</h1>
        </body>
        </html>
        """
@Composable
fun TransparentWebViewSample(){
    val webViewState = rememberWebViewStateWithHTMLData(html)
    webViewState.webSettings.backgroundColor = Color.Transparent
    val background = Brush.horizontalGradient(listOf(Color(0xff92ccdd), Color(0xffc7eff0)))
    Column(Modifier.fillMaxSize().background(background)) {
        WebView(
            state = webViewState,
            modifier = Modifier.padding(16.dp).fillMaxSize(),
        )
    }
}

In short, the UIKitView itself is drawn on top of a white background and this functionality is not able to be overridden*. This means when WebSettings backgroundColor is set to transparent the IOS Webview will instead show the UIKitView’s white background. To mitigate this, I have added an IOSWebSettings specific nullable backgroundColor. This is helpful in the use case where the user would like Android and Desktop client to be transparent but would prefer to set IOS webview background color to the next best option. If this value is null it will instead use the WebSettings background color.

*An alternative method is discussed in this kotlin compose-ios thread. If the user implements a custom ComposeUIViewController it is possible to have a transparent UIKitView but it requires overriding internal compose multiplatform classes.

KevinnZou commented 3 months ago

@TerryGlen Thank you for your contribution! You did an excellent job. Just to confirm, have all the newly added iOS settings been tested?

TerryGlen commented 3 months ago

Glad to help! I have made a minor update to make underPageBackgroundColor nullable.

I've tested each setting on my local device (iPhone 7 Plus: iOS 15.8) and simulator (iPhone 15: iOS 17.2).

Below are comparisons for each added setting. The source code for each being a variation of the one in my previous comment.

Background Color & Under Page Background Color

https://github.com/KevinnZou/compose-webview-multiplatform/assets/32306780/bad979e1-f0a4-40be-b71f-b302c76f6bdb

KevinnZou commented 3 months ago

@TerryGlen Great job! Your work is amazing. I will merge it and release the new version next week. Thank you for your contribution once again!

ismai117 commented 1 month ago

I came across this PR from https://github.com/JetBrains/compose-multiplatform/issues/3154

i'm struggling to make the UIKitView transparent but it keeps on showing a white background, did you manage to solve this issue?

TerryGlen commented 1 month ago

Hello @ismai117 , According to the kotlin multiplatform slack thread linked above it looks like a new configuration option was added to ComposeUIViewController with 1.6.0-beta02 and later.

I haven't had a chance to test this myself, but this should point you in the right direction.

KevinnZou / compose-webview-multiplatform

add additional iOS platform settings #99

Bounce

Vertical Scroll Indicator

Horizontal Scroll Indicator

Background Color & Under Page Background Color