React Native at Traveloka: Native UI Components

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

The article reveals why iOS Auto Layout fundamentally conflicts with React Native's threading model, and the clever workaround that made it work anyway.