Dissolving Boundaries: The Fusion of React app and Native Apps!
summary
Company runs 50–60% webview on mobile and one production app is 100% webview with edge-to-edge rendering and zero native involvement, served from localhost:3000 in a SwiftUI demo. Problems solved: safe area via CSS env(safe-area-inset-top), native-style transitions with the View Transition API, and web↔native state via a custom sinapse bridge. Design consistency comes from the Dopamine design system and performance from the open-source Catalyst framework (SSR, data prefetching, router caching, scroll restoration, page transitions).
AI-written summary · about
chapters (12)
- 0:00Introduction and thanks
- 3:00Why web view matters
- 6:58Single source of truth benefits
- 9:11Demo running web in native
- 11:43Fixing design inconsistencies
- 13:08Adding native transitions
- 14:12Communication bridge needed
- 15:37Introducing Synapse bridge
- 16:21Design system solution
- 16:42Catalyst framework overview
- 18:29Production example Health Insights
- 19:34Closing and acknowledgments
related talks
21mEverywhere: Bringing Into Native Apps
28mCross-Platform React
35mMigration Web (Angular) to Mobile Development (React Native)
05mLightning talks: Building Micro Web Apps in native apps
27mReact Native: From pure Web app to a Web & Mobile hybrid
25mGoing Native
28mWait, you’re shipping React Native to the web?!
09mGoing Native: Reusing Code