📱 react-native-reels-player

A ready-to-use vertical video feed (like Instagram Reels or TikTok) built with React Native. This package allows you to embed short video feeds with play/pause on scroll, mute/unmute on tap, and interactive features like like/share/comments, including liking and adding comments, custom back navigation handling, and video link sharing.

🚀 Features

• Vertical scrollable video feed
• Auto play/pause based on visibility
• Like, comment, and share video links
• Support for adding comments with user profiles
• Like/unlike comments
• Custom back handler for hardware back press navigation
• Lightweight and customizable
• Built with react-native-video , react-native-vector-icons and react-native-swiper-flatlist

🎥 Demo Video

Click the image below to watch the demo video:

Installation

npm install react-native-reels-player

Make sure to also install peer dependencies:

npm install react-native-video react-native-vector-icons react-native-swiper-flatlist

🛠️ Usage

import React from 'react';
import { SafeAreaView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Reels from 'react-native-reels-player';

export default function App() {
  const navigation = useNavigation();
  
  const handleBack = () => {
    navigation.goBack(); // Navigate back using React Navigation
  };

  const personalData = {
    username: 'YourUsername',
    profileImage: 'https://your-profile-image-url.png'
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Reels 
        data={data} 
        personalData={personalData} 
        backButton={handleBack} 
      />
    </SafeAreaView>
  );
}

🧠 Data Format

This package uses a predefined data format for each video item:

[
  {
    video: 'https://your-video-url.mp4',
    postProfile: 'https://your-image-url.png',
    title: 'Username',
    description: 'Video description...',
    likes: 100,
    isLike: false,
    comments: [
      {
        id: '1',
        user: 'User1',
        text: 'Great video!',
        ProfileImage: 'https://your-image-url.png',
        likes: 5,
        isLiked: false
      },
      ...
    ]
  },
  ...
]

You can customize the data array inside the Reels component if you want to use your own API or state management system. The personalData prop allows customization of the current user's profile:

const personalData = {
  username: 'YourUsername',
  profileImage: 'https://your-profile-image-url.png'
};

📁 File Structure

src/
├── Reels.jsx            // Main screen with back handler support
├── ReelsComponent.jsx   // SwiperFlatList wrapper
├── SingleReel.jsx       // Video and UI per reel
├── CommentsModal.jsx    // Modal for viewing and adding comments
└── data.js              // Array of videos

🧩 Dependencies

• react-native-video
• react-native-vector-icons
• react-native-swiper-flatlist

🔒 License

MIT © 2025 — Mohamed Mat-hana

👨‍💻 Contributing

Feel free to fork the repo, improve the component, and submit a pull request. Contributions are welcome!

🎨 Additional Features (Coming Soon)

• Automatic or Mute Sound
• Add Custom Reactions

🎨 Implemented Features

• Comment Support (view, add, and display comments)
• Like/Unlike Comments
• Custom Back Handler for Navigation
• Social Video Sharing Support

👨‍💻 Who is the Developer?

react-native-reels-player

Designed by: Mohamed Mat-hana