Sharing is Caring: Reusing Web Data Viz in React Native
summary
Shopify extracts a shared library called polaris-viz core and splits the repo into core, web and native packages, reusing constants, TypeScript types, hooks (useXScale/useYScale/useLabels), themes and utility functions. Web keeps DOM SVGs; mobile uses react-native-svg and onLayout-driven sizing while web uses ResizeObserver. React Native Web is rejected due to bundle size, so a polaris provider supplies platform-specific component mappings. Result: charts render consistently across platforms, bar and line series reuse works, and native builds enable gesture ideas like pinch zoom.
AI-written summary · about
chapters (8)
- 0:00Start
- 5:27Similarities and Differences between React and Reacts Native
- 7:48Quick Wins
- 8:35Utility Functions
- 15:43Reacts Native Web
- 20:28Spark Bar Chart
- 22:08Chart Container
- 23:01Resize Observer
related talks
27mCreating a React Library for Consistent Data Visualization across Browsers and
06mCross-Platform Data Visualization with React and React Native
46mReact Native for Web Panel Discussion
28mCross-Platform React
06mSubdivide: Cross-platform charting with React & React Native
09mGoing Native: Reusing Code
21mBuilding Cross-Platform Component Libraries for Web and Native with React
34mMonorepo: React Web & React Native