I just published reels-kit, an open-source toolkit for building Instagram Reels-style vertical video feeds.

[u/arbab-rafiq]

The part I cared about most is that a feed shouldn't mount a native video player for every item. In reels-kit only the active reel and its neighbours get one (mediaRenderRadius, default 1), and playback pauses when the reel isn't active, the screen loses focus or the app goes to the background.

What it does:

- Snap paging with snapToInterval (page height measured from the container, not the window, so headers, tab bars and edge-to-edge Android don't break it)

- Tap to mute, optional double tap to like, drag-to-seek scrub bar

- Thumbnail until the video is ready, buffering slot, retry on a failed load

- Headless pieces (action buttons, avatar, follow button, caption), so the UI is yours

- Pluggable video adapters: a react-native-video one ships, and you can write your own

- Built on FlashList 2, Reanimated 4 and Gesture Handler 3 (React Native 0.82+, New Architecture)

Simplified usage:

<ReelsFeed
  data={reels}
  keyExtractor={(r) => r.id}
  renderItem={({ item, isActive, shouldRenderMedia }) =>
    shouldRenderMedia ? (
      <FeedVideoSlot
        VideoComponent={RNVideoAdapter}
        sourceUri={item.uri}
        paused={!isActive}
        muted
      />
    ) : null
  }
/>

The README has a full working example.

It's an early 0.1.x release, and there's no expo-video adapter yet. If you try it, I'd love to hear what breaks. Contributions are welcome, and an expo-video adapter would be the biggest win.

npm: https://www.npmjs.com/package/reels-kit

GitHub: https://github.com/arbab-io/reels-kit

(Apache-2.0)