rn-videofeed 0.1.0

package/ios/VideoFeedViewManager.swift

@@ -0,0 +1,131 @@
+//
+//  VideoFeedViewManager.swift
+//  App
+//
+//  Created by Venkatesh Mandapati on 05/06/2025.
+//
+
+import Foundation
+import React
+import UIKit
+
+@objc(VideoFeedViewManager)
+class VideoFeedViewManager: RCTViewManager {
+  
+    override func view() -> UIView! {
+      let view = VideoFeedView()
+      
+      // Connect the event emitter
+      if let eventEmitter = bridge?.module(forName: "VideoFeedEventEmitter") as? VideoFeedEventEmitter {
+        view.eventEmitter = eventEmitter
+        print("🔥 Connected VideoFeedEventEmitter to VideoFeedView")
+      } else {
+        print("⚠️ Failed to connect VideoFeedEventEmitter")
+      }
+      
+      // Set up event handlers
+      view.onEndReached = { [weak self] in
+        self?.bridge?.eventDispatcher()?.sendAppEvent(withName: "onEndReached", body: nil)
+      }
+      view.onVideoChange = { videoId in
+        self.bridge?.eventDispatcher()?.sendAppEvent(withName: "onVideoChange", body: ["videoId": videoId])
+      }
+      return view
+    }
+
+  override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+  // Common function to safely access VideoFeedView using the working approach
+  private func withVideoFeedView(_ reactTag: NSNumber, operation: String, action: @escaping (VideoFeedView) -> Void) {
+    
+    // Add a small delay to ensure view is properly registered
+    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+      guard let uiManager = self?.bridge?.uiManager else {
+        return
+      }
+      
+      // Use the modern approach for New Architecture
+      uiManager.addUIBlock { _, viewRegistry in
+        
+        // Try to get the view from the registry
+        if let view = viewRegistry?[reactTag] as? VideoFeedView {
+          action(view)
+        } else {
+          
+          // Alternative approach: try to get view directly
+          if let directView = uiManager.view(forReactTag: reactTag) as? VideoFeedView {
+            action(directView)
+          } else {
+            
+            // Last resort: try to enumerate all views
+            for (tag, view) in viewRegistry ?? [:] {
+              if let videoView = view as? VideoFeedView {
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @objc func setVideos(_ reactTag: NSNumber, videos: [[String: Any]]) {
+    withVideoFeedView(reactTag, operation: "Setting videos") { view in
+      view.setVideos(videos)
+    }
+  }
+
+  @objc func appendVideos(_ reactTag: NSNumber, videos: [[String: Any]]) {
+    withVideoFeedView(reactTag, operation: "Appending videos") { view in
+      view.appendVideos(videos)
+    }
+  }
+
+  @objc func setFeedActive(_ reactTag: NSNumber, isActive: Bool) {
+    withVideoFeedView(reactTag, operation: "Setting feed active") { view in
+      view.setFeedActive(isActive)
+    }
+  }
+
+  @objc func pauseVideo(_ reactTag: NSNumber) {
+    withVideoFeedView(reactTag, operation: "Pause video") { view in
+      view.pauseCurrentVideo()
+    }
+  }
+
+  @objc func playVideo(_ reactTag: NSNumber) {
+    withVideoFeedView(reactTag, operation: "Play video") { view in
+      view.playCurrentVideo()
+    }
+  }
+
+  @objc func togglePlayPause(_ reactTag: NSNumber) {
+    withVideoFeedView(reactTag, operation: "Toggle play/pause") { view in
+      let isNowPlaying = view.togglePlayPause()
+      // Emit event back to React Native
+      self.bridge?.eventDispatcher()?.sendAppEvent(
+        withName: "onPlayStateChanged", 
+        body: ["isPlaying": isNowPlaying]
+      )
+    }
+  }
+  
+  @objc func isVideoPlaying(_ reactTag: NSNumber) {
+    withVideoFeedView(reactTag, operation: "Check playing state") { view in
+      let isPlaying = view.isCurrentVideoPlaying()
+      self.bridge?.eventDispatcher()?.sendAppEvent(
+        withName: "onPlayStateChecked", 
+        body: ["isPlaying": isPlaying]
+      )
+    }
+  }
+
+  @objc func addEventListener(_ eventName: String) {
+    // No-op: Handled by RCTEventEmitter
+  }
+
+  @objc func removeEventListener(_ eventName: String) {
+    // No-op: Handled by RCTEventEmitter
+  }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "rn-videofeed",
+  "version": "0.1.0",
+  "description": "Native vertical full-screen video feed for React Native (Reels/TikTok style) with seamless resume.",
+  "main": "src/index.ts",
+  "types": "index.d.ts",
+  "react-native": "src/index.ts",
+  "author": "Venkatesh Mandapati",
+  "license": "MIT",
+  "homepage": "https://github.com/venky145/RN-VideoFeed#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/venky145/RN-VideoFeed.git"
+  },
+  "bugs": {
+    "url": "https://github.com/venky145/RN-VideoFeed/issues"
+  },
+  "files": [
+    "src",
+    "android/src",
+    "android/build.gradle",
+    "ios",
+    "index.d.ts",
+    "RNVideoFeed.podspec",
+    "react-native.config.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.25.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "keywords": ["react-native", "video", "feed"]
+}

package/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  dependency: {},
+}

package/src/VideoFeedManagerBridge.ts

@@ -0,0 +1,24 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+
+import type { FeedPlayerNativeProps } from './VideoFeedView.native'
+import type { NativeModule } from 'react-native'
+
+interface VideoFeedManager extends NativeModule {
+  setVideos: (reactTag: number, videos: FeedPlayerNativeProps[]) => void
+  appendVideos: (reactTag: number, videos: FeedPlayerNativeProps[]) => void
+  setFeedActive: (reactTag: number, isActive: boolean) => void
+  addEventListener: (eventName: string) => void
+  removeEventListener: (eventName: string) => void
+  pauseVideo: (reactTag: number) => void
+  playVideo: (reactTag: number) => void
+  togglePlayPause: (reactTag: number) => void
+  isVideoPlaying: (reactTag: number) => void
+}
+
+const VideoFeedManagerNative = NativeModules.VideoFeedViewManager as VideoFeedManager
+
+const VideoFeedEventEmitterNative = (NativeModules.VideoFeedEventEmitter ||
+  VideoFeedManagerNative) as VideoFeedManager
+const VideoFeedEmitter = new NativeEventEmitter(VideoFeedEventEmitterNative)
+
+export { VideoFeedManagerNative, VideoFeedEmitter, type VideoFeedManager }

package/src/VideoFeedView.native.tsx

@@ -0,0 +1,17 @@
+import { requireNativeComponent } from 'react-native'
+
+import type { LayoutChangeEvent, ViewStyle } from 'react-native'
+
+export type FeedPlayerNativeProps = {
+  id?: string
+  videoUrl?: string
+  thumbnailUrl?: string
+  createdAt?: boolean
+  viewCount?: number
+  style?: ViewStyle
+  onLayout?: (event: LayoutChangeEvent) => void
+}
+
+const VideoFeedView = requireNativeComponent<FeedPlayerNativeProps>('VideoFeedView')
+
+export default VideoFeedView

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default, default as VideoFeedView } from './VideoFeedView.native'
+export { VideoFeedManagerNative, VideoFeedEmitter, type VideoFeedManager } from './VideoFeedManagerBridge'
+export type { FeedPlayerNativeProps } from './VideoFeedView.native'