Projection: Real Native UI in WebViews

Description and use

Projection lets real native UI elements appear inside a WebView by temporarily replacing them with images during modals and scrolling, providing a seamless visual and interactive experience.

Problem

WebView apps often recreate native UI in web code, but cannot truly integrate native components like tab bars or ads, leading to visual and interaction gaps.

Outcome

Projection allows native UI to appear within a WebView without duplication or interaction loss, improving visual consistency and user experience.

Workflow

• 1. Detect when native UI is non‑interactive (modal open, scrolling starts).
• 2. Capture a snapshot of the native UI on the native side.
• 3. Temporarily display the snapshot on the native side to bridge handoff.
• 4. Send the image to the web side during idle time.
• 5. Render the image inside a DOM container (Web Projection).
• 6. Notify native side to remove temporary copy via requestAnimationFrame.
• 7. When interaction resumes, restore live native UI.
• 8. Synchronize scrolling positions so native ads follow web content and clip behind headers.

Evidence

Web content and native UI live in separate rendering layers.

Source

When a modal is open, you can't use the tab bar it covers.

Source

I capture the image on the native side and decode it on the web side during idle time, before the switch.

Source

The same idea works for scrolling. Switch to an image when scrolling starts, then back to the real view when it stops.

Source