Integrating React Native into an existing native codebase

Artsy was falling behind its web product because native releases took longer. The team wanted a simpler way to structure views, faster iteration, better networking with GraphQL, and shared work across web and mobile. React Native also offered a path toward an Android app.

Artsy put its React Native code in a separate repository called Omission, packaged as a CocoaPods dependency for the Eigen app. Eigen starts the React Native bridge and presents exported view controllers through its existing router, Switchboard, without needing to know React Native is running. Separate repositories and CI made onboarding and tooling easier, but added release, testing, and coordination overhead.

Omission exposes a native callback so React Native screens can send URLs to Switchboard and move among React Native, native, and web views. For nested scroll views, Artsy patched the native implementation to detect enclosing scroll views and forward scroll events with adjusted coordinates. This let JavaScript components paginate without handling the nesting themselves.

Artsy reused the app's SDWebImage cache so native and React Native views could share images, and drew artwork into opaque contexts to reduce compositing work. Durán says the approach worked in production, but teams should expect native engineering when designs cannot adapt to framework limits. He also cautions that adopting React Native means taking responsibility for its bugs and dependencies.