Building Cross-Platform Component Libraries for Web and Native with React

on YouTube ↗21m

" summary

Claims a practical way to share one codebase by using single-file components with .native/.web swaps and a utils layer that maps tags and props, uses styled-components for cross-platform styling, Storybook for parallel previews and react-native-webview/iframe pairs for platform-specific pieces, and ships an npm-packaging script to avoid bundling native code. A live-content feature for a large news org spans four apps, ships an MVP in under three months and serves millions of users, with caveats around responsive layout, animations and prop name mismatches.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 1:35Build Cross-Platform Components
3. 6:23Cross-Platform Components
4. 11:02Style Button
5. 19:06Animations
6. 19:36Prop Mismatch
7. 20:18Component Library

" related talks

• 28mCross-Platform ReactAnna Doubkova · ReactNext 2019
• 50mBuilding Cross Platform Native Mobile Apps using React NativeWei-Meng Lee · Mobile Era 2017
• 36mThe sorcery of building a cross platform Design System architectureKamlesh Chandnani · React Alicante 2022
• 59mOne Codebase to Rule Them All - Using React Native EverywhereJesse Weigel · NDC Minnesota 2019
• 43mBuilding a component based library with ReactFerry Kobus · Frontend United 2018
• 29mOrganizing Code for Cross-Platform Web and Mobile DevelopmentRobert Scarano · Chain React 2018
• 46mReact Native for Web Panel DiscussionReact Nexus 2023
• 16mBuilding Cross-Platform Apps with React Native + Next.jsFernando Rojo · App.js Conf 2022