Successful Web & React Native Code Sharing Strategies

Nozbe rebuilt its long-running web app with React and React Native, aiming to share as much code as possible as a small company. Its mobile app uses patterns such as drawers, keyboard toolbars, and bottom cards, while the web app uses columns, popovers, and hover interactions. Pietruszewski reported 83 percent code reuse across iOS, Android, and web.

Pietruszewski says existing cross-platform libraries did not meet Nozbe’s needs for flexibility, control, and performance when the team started. They chose a shared repository with separate app, native, web, and root packages, plus platform-specific file extensions such as `.web.js` and `.native.js`. For offline-first persistence, they built Formidable DB to handle many records with lazy loading, reactive updates, synchronization, and support for web and native.

To bridge DOM and React Native styling, Nozbe created Zacs, a Babel plugin that transforms styled component calls into platform-specific code without a runtime. The team used separate native stylesheets and web CSS, while sharing design values such as colors and spacing. They also built a small set of platform-specific base components, including text input, image, icon, and touchable.

For small differences, the team uses platform checks or short helpers, such as handling text input events differently on web and native. When a larger part of a component differs, they put shared logic in a common file and extract platform-specific code into files such as `platform.web.js` and `platform.native.js`. Some components, including modals and lists, have separate implementations to support different layouts or dependencies while keeping shared logic in common.

Pietruszewski identified styling, animation, bundling, complex UI libraries, and end-to-end testing as areas where better shared infrastructure could improve reuse; he said Nozbe’s 83 percent figure excluded about 3,000 lines of styles. He argued for reusing the parts of an app that are the same while investing saved time in learning each platform and polishing its user experience. His target was roughly 90 percent reuse, while preserving meaningful platform differences.