WebView-Multiplatform-Mobile

1.3.0indexed

Simplifies embedding web content into Android and iOS apps with an intuitive API, leveraging CustomTabs and SFSafariViewController for secure, native-like performance and customizable settings.

AndroidNative·final-class/WebView-Multiplatform-Mobile

Stars

Used by

dependents

—

Health

/ 100

WebView Multiplatform Mobile

WebView Multiplatform Mobile is a cross-platform library that provides a simple and convenient way to embed web content into your Android and iOS applications. Based on CustomTabs in Android and SFSafariViewController in iOS, the library ensures safe and fast interaction with web content while maintaining the native user interface and performance.

Here's an example of how WebView looks

:fire: Features:

Cross-platform compatibility: Support for Android and iOS to ensure a unified web content embedding experience.
Integration with CustomTabs (Android) and SFSafariViewController (iOS): Utilize standard components of each platform for optimal performance and security.
Ease of use: An intuitive API interface makes embedding web content easy and efficient for developers, with settings for each platform inspired by the Compose Modifier philosophy from Jetpack Compose.

:rocket: Setup

Add the dependency to the commonMain section of your build.gradle

implementation("io.github.final-class:webview-multiplatform-mobile:1.3.0")

Use WebView in your shared code

val webViewController by rememberWebViewController()

WebViewPlatform(webViewController = webViewController)

// Open in application
webViewController.open(url = "https://github.com/")

// Open in external browser
webViewController.openInExternalBrowser(url = "https://github.com/")

If you manage the controller outside Compose, create it via factory and pass into WebViewPlatform:

class SomeViewModel {
    val webViewController = WebViewControllerFactory.create()
    
    fun openWebView() {
        webViewController.open(url = "https://github.com/")
    }
}

// Later in UI
val viewModel = SomeViewModel()
WebViewPlatform(webViewController = viewModel.webViewController)

:gear: Settings

WebView Multiplatform Mobile provides a range of customizable parameters to optimize the behavior and appearance of your embedded web components, inspired by the Compose Modifier philosophy in Jetpack Compose. Each WebView setting is akin to applying a Modifier to the embedded web component, making their usage elegant and convenient.

Settings for Android are configured as follows:

val webViewController by rememberWebViewController()

WebViewPlatform(
    webViewController = webViewController,
    androidSettings = AndroidWebViewModifier
        .showTitle(true)
        .urlBarHidingEnabled(true)
        ...
)

Description of available settings for AndroidWebViewModifier

Settings for iOS are configured as follows:

val webViewController by rememberWebViewController()

WebViewPlatform(
    webViewController = webViewController,
    iosSettings = IosWebViewModifier
        .barCollapsingEnabled(true)
        .entersReaderIfAvailable(true)
        ...
)

Description of available settings for IosWebViewModifier

:iphone: Example

:man_technologist: Contribution

We welcome your contributions! If you have suggestions for improvement or have encountered any issues, please create an Issue or Pull Request on our GitHub repository.

Related libraries

Surfaced from shared tags and platforms — no rankings paid for.

ComposeNativeWebview★ 155

kdroidFilterCross-platform WebView component exposing WebViewState and navigator APIs; backed by native OS webviews via Rust+UniFFI (Wry), with JS-native bridge, cookie API, request interceptor.Shared: webview

compose-webview★ 86

parkwoocheolFeature-rich WebView wrapper integrating native UI, offering promise-based JSBridge, type-safe serialization, reactive state management, lifecycle handling, request interception, dark mode, and file uploads.Shared: webview

Klue★ 52

bennyhuoFacilitates calling native methods from JavaScript in mobile apps, supporting WebView and React Native. Defines native methods using a simple interface, streamlining integration across Android and iOS.Shared: webview

ComposeMultiplatformWebview★ 42

saral-appsNative WebView integration leveraging system web rendering via JNA, offering true native performance, no bundled browser engines, bidirectional JS interop, navigation controls, and state management.Shared: webview

KWebView★ 30

ShadAdmanEnables embedding web views with customizable URL handling and loading status updates, offering flexibility for desktop environments and seamless integration into applications.Shared: webview

kowe★ 29

anthonyhfmEnables integration of native WebViews in Compose Multiplatform applications, offering web navigation, configuration options, JavaScript evaluation, and a unified JavaScript API.Shared: webview

showTitle	Sets whether the title should be shown in the custom tab.
urlBarHidingEnabled	Set whether the url bar should hide as the user scrolls down on the page.
shareState	Sets the share state that should be applied to the custom tab.
instantAppsEnabled	Sets whether Instant Apps is enabled for this Custom Tab.
toolbarCornerRadiusDp	Sets the toolbar's top corner radii in dp.
activityHeight	Sets the Custom Tab Activity's initial height in pixels and the desired resize behavior.
closeButtonPosition	Sets the position of the close button.
startAnimations	Sets the start animations.
exitAnimations	Sets the exit animations.
scheme	Sets the color scheme that should be applied to the user interface in the custom tab.
defaultColorSchemeParams	Sets the default CustomTabColorSchemeParams. This will set a default color scheme that applies when no AndroidScheme specified for current color scheme via scheme.
darkColorSchemeParams	Sets the dark CustomTabColorSchemeParams. This will set a dark color scheme that applies when AndroidScheme.Dark specified for current color scheme via scheme.

barCollapsingEnabled	Enabled bar collapsing.
entersReaderIfAvailable	A value that specifies whether Safari should enter Reader mode, if it is available.
dismissButtonStyle	Sets dismiss button style.
preferredBarTintColor	The color to tint the background of the navigation bar and the toolbar.
preferredControlTintColor	The color to tint the control buttons on the navigation bar and the toolbar.