Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile

This 15‑minute talk summarizes a Webview‑first approach that uses Webview + React to ship mobile features at web speed while preserving a native‑like experience via a native token bridge and mobile‑appropriate routing. We’ll share a three‑layer architecture (Shared Business Logic / Platform / Foundation), code‑sharing techniques with TanStack Router and React Query, and the lessons that let us roll out features on iOS/Android quickly and confidently.

Key Takeaways
A three‑layer architecture model that separates business logic from platform‑specific UX, enabling high code reuse (up to 50–82% depending on the feature).

Authentication strategies for Web vs Webview: from OIDC on the web to a native token bridge on mobile—smooth, secure, and maintainable.

This talk is from the real-world experience at EarnIn.

Transcript

1. Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile ABAAAA FOSSASIA Summit 2026 March 10, 2026 Siwat Kaolueng Senior Software Engineer at EarnIn
2. 2 Siwat Kaolueng Jame Speaking Senior Software Engineer @ EarnIn https://www.linkedin.com/in/siwatkaolueng
3. Agenda for today 1. Why? 2. Technology 3. Project structure 4. Pattern 5. Bridge event 6. Authentication 7. Result 8. Summary
4. Why? Technology Project structure Architecture Bridge event Pattern
5. Experimentation across iOS, Android, and Web is too slow 🐢🐌
6. App store review cycles 🔄
7. Why? Technology Project structure Architecture Bridge event Pattern
8. Technology Nx - Monorepo React - Web & Webview Tanstack Query - Web & Webview Tanstack Router - Webview React Router - Web Zustand - Web & Webview Storybook - Web & Webview Module Federation - Web …
9. Why? Technology Project structure Architecture Bridge event Pattern
11. Why? Technology Project structure Architecture Bridge event Pattern
13. Why? Technology Project structure Architecture Bridge event Pattern
16. Why? Technology Project structure Architecture Bridge event Pattern
17. Logging send logs to native observability pipeline Error & Session Manage errors and authentication lifecycle Analytics send tracking events to native analytics UI Control tell native to perform UI actions Bridge event - Webview ↔ Native Communication
19. “Co-design the bridge contract with your mobile engineersˮ
20. Authentication Result Summary
23. Authentication
24. Authentication Result Summary
26. Authentication Result Summary
27. Share the lib, split the app Callback-Driven Components Shared components own UI, platform wrappers own navigation and side effects Contract-First Native Bridge Align with mobile engineers on channel names, message shapes, and auth flow before you build Shared business logic in libs, web and webview are just thin deployment targets
28. Thank you! Reach out to us if you have questions.