Accelerating Mobile App Development at Zalando with Rendering Engine and React Native
Article Summary
Zalando is migrating 90+ screens across iOS and Android to React Native without rebuilding their entire app. Here's how they're pulling it off for 52M+ customers.
Europe's largest fashion e-commerce company needed to ship features faster across platforms while progressively migrating from native codebases. Their solution combines React Native with their existing web framework called Rendering Engine.
Key Takeaways
- Built 'React Native as a package' architecture to avoid dependency conflicts
- Standalone developer app lets web engineers work without building native apps
- Used react-strict-dom to share UI components between mobile and web
- Launched Discovery Feed (media-heavy screen) successfully with new stack
- Rendering Engine adds observability, caching, and analytics to components automatically
Zalando achieved production-ready React Native integration in weeks by leveraging their existing web framework and treating React Native as an isolated package dependency.
About This Article
Zalando struggled when adding React Native to their existing native codebase. Dependency conflicts kept popping up, the code structure wasn't clear, and developers had a rough time getting started. Web engineers especially found Android Studio and Xcode intimidating.
Zalando packaged React Native as a standalone npm module called the Entry Point. This wrapped the React Root Component and kept it separate from the legacy code. A custom developer menu let engineers switch between different JavaScript bundles without touching the main app.
The team got React Native working in production within weeks by building on their existing Rendering Engine framework. They moved multiple screens over, including the image-heavy Discovery Feed, and kept quality consistent for their 52M+ customers.