Building a Video Experience with React Native: Lessons from Early Adoption

Zalando had separate native apps and a server-driven UI, which made synchronizing complex video player state difficult. The team chose to build a Fabric component from scratch rather than adopt a feature-heavy third-party library or wrap existing native components. This gave them control over the new architecture and let them focus on the features their consumers needed.

The component has a native Android and iOS layer, with a React Native presentation layer built on Zalando Design System. The team included features such as analytics, performance tracing, subtitles, error handling, and visibility-based autoplay. They left out capabilities like DRM and background playback because their consumers did not need them.

In the home feed, several videos could play at once while FlashList kept many players loaded in memory. This caused jerky scrolling, blank areas, and memory pressure, especially on Android. The team tracked autoplay time, jank, and player count; reducing React renders alone did not fix the problem.

Creating players only when videos reached 75% visibility reduced jank from 24% to 3%, but autoplay time grew almost two and a half times. The team cut autoplay time in half by adding cached five-second MP4s for video entry points. They also prioritized loading the first visible tile and built a player pool to reuse native players, codecs, and buffers.

The player pool could support pre-warming: creating players before they become visible and reusing them when a user is likely to watch. Verichev describes initial pre-warming as easier when the destination screen and intended videos are already known. He says the project challenged his assumptions as a native Android developer about what React Native could handle.