React Native at Traveloka: Bridging Past and Future
Article Summary
Junius Ang from Traveloka reveals how a 4-person team manages 5 React Native apps plus a hybrid app using a single architectural pattern. Their secret? The District System.
Traveloka's multiplatform infrastructure lead shares a 2-year retrospective on their React Native implementation. The article covers their District System architecture, TypeScript migration, and the creation of Momentum Design Guidelines to unify UI across native, RN, and web platforms.
Key Takeaways
- District System: one core repository powers 5 RN apps with strict no product context rule
- Migrated 90% of codebase to TypeScript to win over skeptical native engineers
- Failed cross-platform experiment taught them: avoid SSR conflicts and excessive if-else blocks
- Momentum Design Guidelines unified components across Android, iOS, RN, and web platforms
- District-icon solves duplicate icons problem but tree-shaking still breaks on native
A 4-person central team successfully manages 6 React Native projects by maximizing code reusability through strict architectural boundaries and design system standardization.
About This Article
When Traveloka tried to share code between their React Native apps and mobile web, they ran into four major problems. Routes could only be registered in one place, which broke Server Side Rendering. Pages had too many if-else blocks checking what platform they were on. Different versions of dependencies conflicted with each other and forced them to use older libraries. And components didn't work the same way across platforms, which caused weeks of rendering bugs.
Junius Ang's team started over with a different plan. They built a pilot that didn't need SSR. They made the navigation layer work differently for each platform instead of forcing one approach. They used the Momentum Design Guidelines to make components behave consistently. For web, they wrote pure JavaScript. For native, they kept native code. Wrapping concepts let both approaches coexist.
Looking back, they realized they'd actually achieved 80% code shareability at first but had abandoned it. The new approach focuses on making components work the same way across platforms by matching their properties and behavior. This removes most of the platform-specific conditional code because the design system handles the differences instead.