I built an Instagram Reels feed in React Native. Here’s what broke.

Description and use

Implementing a vertical video feed in React Native caused issues with decoders, playback, and gestures. reels‑kit addressed bounded players, playback gating, gesture handling, and error states, delivering a smooth, performant experience.

Problem

Implementing a vertical video feed in React Native caused issues such as excessive video decoders, unwanted playback, gesture conflicts, and performance problems.

Outcome

Reels‑kit solved common pitfalls in Reels‑style feeds by providing snap paging, bounded players, playback gating, gesture handling, and error states, enabling a smooth, performant user experience.

Workflow

• Install reels‑kit and dependencies via npm/yarn/pnpm/bun
• Add react‑native‑worklets plugin to babel.config.js
• Wrap app in GestureHandlerRootView
• Run pod install on iOS
• Import reels‑kit components and a video adapter
• Define data and cell component
• Render ReelsFeed with custom cell
• Handle mute toggle and playback gating

Evidence

reels‑kit is a set of small, headless building blocks around a FlashList-based feed.

Source

Only the active reel and its neighbours mount a native player (mediaRenderRadius, default 1).

Source

A reel plays only when it is the active one, the screen is focused and the app is in the foreground.

Source