How Kuikly Adapts Apple’s New Liquid Glass UI for Seamless Mobile Experiences

1. Introduction

Kuikly is a widely used cross‑end development framework at Tencent, built on Kotlin Multiplatform, offering a unified tech stack for developers. It powers over 20 business lines, serving more than 1,000 pages and over 500 million daily active users. With the release of iOS 26, Kuikly adds full support for the new “Liquid Glass” design language.

2. What Is Liquid Glass?

Liquid Glass is Apple’s latest UI evolution after iOS 7’s flat design, introducing semi‑transparent 3D textures and dynamic fluid effects that blur the line between software and hardware. It features optical properties that refract and reflect based on background content and ambient light, and a multi‑layered interface structure that creates depth.

3. Architecture Adaptation Analysis

Liquid Glass raises new requirements for cross‑platform frameworks. Two main architectural approaches exist:

Self‑Rendering : Uses a custom rendering engine (e.g., Skia) to draw UI on a canvas, ensuring pixel‑perfect consistency but struggling to access native APIs required for Liquid Glass.

Native Rendering : Maps framework abstractions directly to native UI components and rendering pipelines, allowing low‑cost adaptation and high fidelity.

Self‑rendering frameworks must simulate Liquid Glass via shaders, which is costly and often yields lower performance and visual fidelity. Native‑rendering frameworks like Kuikly, Hippy, and React Native can directly invoke system APIs, resulting in lower adaptation cost, higher fidelity, and sustainable evolution.

4. Kuikly’s Adaptation Experience

4.1 Adaptation Principles

Kuikly balances UI consistency across platforms with embracing native platform features. It provides flexible handling: common components retain cross‑platform consistency, while custom components expose platform‑specific optimizations.

4.2 Developer‑Friendly API Design

Existing components such as View and Button gain a simple attribute to enable Liquid Glass:

View {
    attr {
        glassEffectIOS() // iOS adds Liquid Glass effect automatically
    }
    // ... other sub‑views
}

The framework abstracts platform checks, enabling the effect on supported iOS versions and gracefully degrading elsewhere.

4.3 Adaptation Solutions and Implementation

Different component types receive tailored strategies:

Basic Components : Extend native attributes (e.g., LiquidGlass, LiquidGlassContainer) for flexible layout.

Complex Composite Components : Provide composable effects for components like Input and AlertDialog.

iOS‑Specific Components : Wrap native iOS controls (e.g., Slider, Switch) with an enableGlassEffect(true) property to activate the effect.

Switch {
    attr {
        isOn(true)
        enableGlassEffect(true) // iOS 26+ renders native Switch with effect
        thumbColor(Color.WHITE)
        onColor(Color.BLUE)
        unOnColor(Color.GRAY)
    }
    // ...
}

4.4 Compatibility Guarantees

Kuikly automatically falls back to default styles on older iOS versions and provides graceful degradation on platforms like Android, eliminating the need for extensive platform‑specific code.

5. Conclusion and Outlook

Liquid Glass exemplifies the shift from abstracting away platform differences to leveraging native innovations. Kuikly’s native‑rendering approach demonstrates that cross‑platform frameworks can integrate deep system capabilities without sacrificing consistency, enabling developers to deliver cutting‑edge experiences across evolving platforms.