Traveloka • Junius Ang • Dec 3, 2018

Traveloka React Native District System

Article Summary

Junius Ang from Traveloka reveals how their 'District System' lets a 5-person team manage multiple React Native apps across brownfield and greenfield projects. The secret? It's not a framework—it's a reusability-first approach.

Traveloka built District System as their foundation for multiplatform React Native development, supporting both their main hybrid app and standalone greenfield apps. The system evolved through four iterations, from git submodules to a monorepo architecture with Lerna, all centered around maximizing code reuse across Android, iOS, and mobile web.

Key Takeaways

Single core team of 5 engineers manages 2 greenfield and 1 brownfield app
Monorepo with Lerna solved multi-repository dependency hell from earlier iterations
District-template clones bootstrap new apps for Android, iOS, and web instantly
Design tokens in district-ui enforce consistent styling across all apps
Only single package versions supported to reduce maintenance costs

Critical Insight

Traveloka's District System enables a tiny team to scale React Native development across multiple apps by treating reusability as the core architectural principle, not an afterthought.

The article details their painful first iteration mistakes and why their initial approach with git submodules nearly derailed the entire project.

About This Article

Problem

Traveloka's first version relied on git submodules for district-core, which left the foundation incomplete and unstable. Developers couldn't reuse the shared code, so they built their own implementations instead. This set back the district-axes greenfield app by weeks.

Solution

In iteration two, Junius Ang's team pulled district-core out as a standalone NPM module. By iteration four, they switched to a monorepo using Lerna. This cut down on dependency update work and made it easier for district-ui, district-core, and the district apps to share code with each other.

Impact

The monorepo reduced the daily grind of managing dependencies. Traveloka could now run multiple greenfield and brownfield apps at the same time without losing design token consistency. The district-ui design system stayed consistent across Android, iOS, and mobile-web, and the core team didn't need to grow to support it.