react-native-social-reels

Instagram style reels package for React Native.

Installation

npm install react-native-social-reels

Peer Dependencies

yarn add react-native-video react-native-reanimated react-native-fast-image react-native-gesture-handler react-native-safe-area-context react-native-actions-sheet react-native-popup-menu react-native-svg react-native-worklets @react-navigation/native @react-navigation/bottom-tabs react-native-screens

iOS

cd ios
pod install

Usage

import React from "react";

import { GestureHandlerRootView } from "react-native-gesture-handler";

import { SafeAreaProvider } from "react-native-safe-area-context";

import { SheetProvider } from "react-native-actions-sheet";

import { MenuProvider } from "react-native-popup-menu";

import { Reels } from "react-native-social-reels";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <SheetProvider>
          <MenuProvider>
            <Reels />
          </MenuProvider>
        </SheetProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

Reels Props

| Prop | Type | Description | | ------------- | -------- | -------------------- | | data | Reel[] | Custom reels data | | loading | boolean | Loading state | | comments | array | Comments list | | renderHeader | function | Custom header | | renderItem | function | Custom reel item | | bottomPadding | number | Extra bottom spacing |

useReels Props

| Prop | Type | Default | | ------------- | -------- | ---------- | | apiUrl | string | Pexels API | | headers | object | {} | | autoFetch | boolean | true | | transformData | function | undefined | | initialData | Reel[] | [] |

ReelsHeader Props

| Prop | Type | Default | | ----------- | -------- | --------- | | title | string | Reels | | topOffset | number | 60 | | renderTitle | function | undefined |

CommentSheet Props

| Prop | Type | | ------------ | -------- | | data | object | | onLongPress | function | | onLike | function | | renderAvatar | function |

Features

• Vertical reels
• Auto play videos
• Comment sheet
• Reels header
• Bottom tab support
• Gesture support
• FastImage support
• Reanimated support
• Local and remote videos

License

MIT