React Native at Traveloka: Native UI Components
Article Summary
Adrian Hartanto from Traveloka cracked a problem that plagues every multiplatform team: keeping identical components in sync across iOS, Android, and React Native without tripling the maintenance work.
Traveloka's Multiplatform Infra Team built 'Reverse Osmosis,' a system that lets native iOS/Android components work inside React Native pages with dynamic sizing. This solves the feature parity nightmare where React Native versions of components constantly fall behind their native counterparts.
Key Takeaways
- Native components auto-size in React Native without manual flex or hardcoded dimensions
- WrapperView pattern handles layout updates and notifies React Native's view hierarchy
- Merchandising component now stays in sync across all platforms automatically
- iOS Auto Layout conflicts with React Native's Yoga engine on background threads
- ViewTreeObserver caused performance issues from excessive layout notifications on Android
Traveloka eliminated duplicate component maintenance by embedding native UI directly into React Native with automatic sizing, keeping all platforms in sync by default.
Continue reading
Expo
Sep 14, 2026
More from Traveloka
Reproxy: Mock Server for Mobile App Development
Traveloka
Jan 24, 2020
Also on React Native
Expo without EAS: Scaling the React Native Developer Experience of an App with 90M Users
Doctolib
May 10, 2026
What This Article Covers
Traveloka's iOS and Android native components had incompatible APIs. For instance, BookingPrice's entryPoint property expected a string on iOS but an object on Android. This made it impossible to reuse them directly in React Native without converting data types.
Adrian Hartanto's team built a WrapperView pattern that wraps native components and handles layout calculations. On iOS it uses layoutSubviews, while Android uses onMeasure. The pattern then calls UIManager's setSize method to update React Native's view hierarchy.
Traveloka migrated all outdated React Native merchandising components to native implementations. Now any updates to the native platforms automatically apply to React Native without needing manual syncing across both sides.
This page summarizes “React Native at Traveloka: Native UI Components” by Traveloka, published Jun 18, 2021. All credit for the original work goes to the authors.
