Mohit Karekar walked through Zalando’s brownfield React Native approach, where new screens must match existing native ones visually and functionally. Because the product detail pages look identical regardless of implementation, traditional screen-load comparisons fall short. The previous native flow relied on a single large GraphQL request and a clear render-complete moment, while the newer React Native rendering engine streams modules recursively, filling the screen gradually.

To compare performance fairly, the team shifted from technical completion time to perceived performance. They introduced a custom “meaningful render” metric, similar to LCP on the web, marking the moment the most significant module is laid out. Using an internal performance API modeled after the web’s, they captured spans via OpenTelemetry and attached them to screen loads, enabling rollout monitoring and observability-driven decisions as React Native screens replaced native ones.

What you’ll walk away with:

• Why brownfield migrations make naive screen-load metrics unreliable
• How streaming, module-based rendering changes the definition of “loaded”
• How to define a meaningful render signal based on the most significant module
• How to instrument spans and surface them in observability tools
• Practical rollout lessons: gradual releases, outliers, and metric limitations