@shortkitsdk/react-native 0.1.0 → 0.2.1

package/android/src/main/java/com/shortkit/reactnative/ShortKitWidgetNativeView.kt

@@ -0,0 +1,133 @@
+package com.shortkit.reactnative
+
+import android.content.Context
+import android.widget.FrameLayout
+import com.shortkit.sdk.config.PlayerClickAction
+import com.shortkit.sdk.config.VideoOverlayMode
+import com.shortkit.sdk.config.WidgetConfig
+import com.shortkit.sdk.model.ContentItem
+import com.shortkit.sdk.widget.ShortKitWidgetView
+import org.json.JSONArray
+import org.json.JSONObject
+
+/**
+ * Fabric native view wrapping [ShortKitWidgetView] for use as a
+ * horizontal video carousel in React Native.
+ */
+class ShortKitWidgetNativeView(context: Context) : FrameLayout(context) {
+
+    private var widgetView: ShortKitWidgetView? = null
+    private var configJson: String? = null
+    private var itemsJson: String? = null
+
+    var config: String?
+        get() = configJson
+        set(value) {
+            if (value == configJson) return
+            configJson = value
+            rebuildIfNeeded()
+        }
+
+    var items: String?
+        get() = itemsJson
+        set(value) {
+            if (value == itemsJson) return
+            itemsJson = value
+            applyItems()
+        }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        rebuildIfNeeded()
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+    }
+
+    private fun rebuildIfNeeded() {
+        if (widgetView != null) return
+
+        val sdk = ShortKitModule.shared?.sdk ?: return
+        val widgetConfig = parseWidgetConfig(configJson)
+
+        val view = ShortKitWidgetView(context).apply {
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        }
+        view.initialize(sdk, widgetConfig)
+        addView(view)
+        widgetView = view
+
+        applyItems()
+    }
+
+    private fun applyItems() {
+        val json = itemsJson ?: return
+        val view = widgetView ?: return
+        val contentItems = parseContentItems(json) ?: return
+        view.configure(contentItems)
+    }
+
+    private fun parseWidgetConfig(json: String?): WidgetConfig {
+        if (json.isNullOrEmpty()) return WidgetConfig()
+        return try {
+            val obj = JSONObject(json)
+            WidgetConfig(
+                cardCount = obj.optInt("cardCount", 3),
+                cardSpacing = obj.optDouble("cardSpacing", 8.0).toFloat(),
+                cornerRadius = obj.optDouble("cornerRadius", 12.0).toFloat(),
+                autoplay = obj.optBoolean("autoplay", true),
+                muteOnStart = obj.optBoolean("muteOnStart", true),
+                loop = obj.optBoolean("loop", true),
+                rotationInterval = obj.optLong("rotationInterval", 10_000L),
+                clickAction = when (obj.optString("clickAction", "feed")) {
+                    "feed" -> PlayerClickAction.FEED
+                    "mute" -> PlayerClickAction.MUTE
+                    "none" -> PlayerClickAction.NONE
+                    else -> PlayerClickAction.FEED
+                },
+                cardOverlay = parseOverlay(obj),
+            )
+        } catch (_: Exception) {
+            WidgetConfig()
+        }
+    }
+
+    private fun parseOverlay(obj: JSONObject): VideoOverlayMode {
+        val overlay = obj.opt("overlay") ?: return VideoOverlayMode.None
+        if (overlay is JSONObject && overlay.optString("type") == "custom") {
+            return VideoOverlayMode.Custom {
+                ShortKitOverlayBridge(context)
+            }
+        }
+        return VideoOverlayMode.None
+    }
+
+    private fun parseContentItems(json: String): List<ContentItem>? {
+        return try {
+            val arr = JSONArray(json)
+            val items = mutableListOf<ContentItem>()
+            for (i in 0 until arr.length()) {
+                val obj = arr.getJSONObject(i)
+                items.add(
+                    ContentItem(
+                        id = obj.getString("id"),
+                        title = obj.getString("title"),
+                        description = obj.optString("description", null),
+                        duration = obj.getDouble("duration"),
+                        streamingUrl = obj.getString("streamingUrl"),
+                        thumbnailUrl = obj.getString("thumbnailUrl"),
+                        captionTracks = emptyList(),
+                        customMetadata = null,
+                        author = obj.optString("author", null),
+                        articleUrl = obj.optString("articleUrl", null),
+                        commentCount = if (obj.has("commentCount")) obj.getInt("commentCount") else null,
+                    )
+                )
+            }
+            items
+        } catch (_: Exception) {
+            null
+        }
+    }
+}

package/android/src/main/java/com/shortkit/reactnative/ShortKitWidgetViewManager.kt

@@ -0,0 +1,30 @@
+package com.shortkit.reactnative
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = ShortKitWidgetViewManager.REACT_CLASS)
+class ShortKitWidgetViewManager : SimpleViewManager<ShortKitWidgetNativeView>() {
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(context: ThemedReactContext): ShortKitWidgetNativeView {
+        return ShortKitWidgetNativeView(context)
+    }
+
+    @ReactProp(name = "config")
+    fun setConfig(view: ShortKitWidgetNativeView, config: String?) {
+        view.config = config
+    }
+
+    @ReactProp(name = "items")
+    fun setItems(view: ShortKitWidgetNativeView, items: String?) {
+        view.items = items
+    }
+
+    companion object {
+        const val REACT_CLASS = "ShortKitWidgetView"
+    }
+}

package/ios/ShortKitBridge.swift

@@ -6,7 +6,7 @@ import ShortKit
 ///
 /// Holds the `ShortKit` instance, subscribes to all Combine publishers on
 /// `ShortKitPlayer`, and forwards events to JS via the delegate protocol.
-@objc public class ShortKitBridge: NSObject, ShortKitDelegate {
+@objc public class ShortKitBridge: NSObject {
 
     // MARK: - Shared instance (accessed by Fabric view manager in Task 13)
 
@@ -23,6 +23,7 @@ import ShortKit
     @objc public init(
         apiKey: String,
         config configJSON: String,
+        embedId: String?,
         clientAppName: String?,
         clientAppVersion: String?,
         customDimensions customDimensionsJSON: String?,
@@ -37,16 +38,17 @@ import ShortKit
         let sdk = ShortKit(
             apiKey: apiKey,
             config: feedConfig,
+            embedId: embedId,
             clientAppName: clientAppName,
             clientAppVersion: clientAppVersion,
             customDimensions: dimensions
         )
-        sdk.delegate = self
         self.shortKit = sdk
 
         ShortKitBridge.shared = self
 
         subscribeToPublishers(sdk.player)
+        sdk.delegate = self
     }
 
     // MARK: - Teardown
@@ -141,31 +143,33 @@ import ShortKit
         shortKit?.player.setMaxBitrate(Int(bitrate))
     }
 
-    // MARK: - ShortKitDelegate
+    // MARK: - Custom Feed
 
-    public func shortKit(_ shortKit: ShortKit, didEncounterError error: ShortKitError) {
-        let body: [String: Any]
-        switch error {
-        case .networkError(let underlying):
-            body = ["code": "network_error", "message": underlying.localizedDescription]
-        case .playbackError(let code, let message):
-            body = ["code": code, "message": message]
-        case .authError:
-            body = ["code": "auth_error", "message": "Invalid API key"]
+    @objc public func setFeedItems(_ json: String) {
+        guard let items = Self.parseCustomFeedItems(json) else { return }
+        Task { @MainActor in
+            self.shortKit?.setFeedItems(items)
         }
-        emitOnMain("onError", body: body)
     }
 
-    public func shortKit(_ shortKit: ShortKit, didTapShareFor item: ContentItem) {
-        emitOnMain("onShareTapped", body: ["item": serializeContentItemToJSON(item)])
+    @objc public func appendFeedItems(_ json: String) {
+        guard let items = Self.parseCustomFeedItems(json) else { return }
+        Task { @MainActor in
+            self.shortKit?.appendFeedItems(items)
+        }
     }
 
-    public func shortKit(_ shortKit: ShortKit, didRespondToSurvey surveyId: String, with option: SurveyOption) {
-        emitOnMain("onSurveyResponse", body: [
-            "surveyId": surveyId,
-            "optionId": option.id,
-            "optionText": option.text
-        ])
+    @objc public func fetchContent(_ limit: Int, completion: @escaping (String) -> Void) {
+        Task {
+            do {
+                let items = try await self.shortKit?.fetchContent(limit: limit) ?? []
+                let data = try JSONEncoder().encode(items)
+                let json = String(data: data, encoding: .utf8) ?? "[]"
+                completion(json)
+            } catch {
+                completion("[]")
+            }
+        }
     }
 
     // MARK: - Combine Subscriptions
@@ -305,6 +309,14 @@ import ShortKit
                 self?.emit("onPrefetchedAheadCountChanged", body: ["count": count])
             }
             .store(in: &cancellables)
+
+        // Remaining content count
+        player.remainingContentCount
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] count in
+                self?.emit("onRemainingContentCountChanged", body: ["count": count])
+            }
+            .store(in: &cancellables)
     }
 
     // MARK: - Event Emission Helpers
@@ -335,31 +347,6 @@ import ShortKit
         emitOnMain(name, body: body)
     }
 
-    /// Emit an article tap event.
-    public func emitArticleTapped(_ item: ContentItem) {
-        emitOnMain("onArticleTapped", body: ["item": serializeContentItemToJSON(item)])
-    }
-
-    /// Emit a comment tap event.
-    public func emitCommentTapped(_ item: ContentItem) {
-        emitOnMain("onCommentTapped", body: ["item": serializeContentItemToJSON(item)])
-    }
-
-    /// Emit an overlay share tap event.
-    public func emitOverlayShareTapped(_ item: ContentItem) {
-        emitOnMain("onOverlayShareTapped", body: ["item": serializeContentItemToJSON(item)])
-    }
-
-    /// Emit a save tap event.
-    public func emitSaveTapped(_ item: ContentItem) {
-        emitOnMain("onSaveTapped", body: ["item": serializeContentItemToJSON(item)])
-    }
-
-    /// Emit a like tap event.
-    public func emitLikeTapped(_ item: ContentItem) {
-        emitOnMain("onLikeTapped", body: ["item": serializeContentItemToJSON(item)])
-    }
-
     // MARK: - Content Item Serialization
 
     /// Serialize a ContentItem to a JSON string for bridge transport.
@@ -382,6 +369,10 @@ import ShortKit
             "thumbnailUrl": item.thumbnailUrl,
         ]
 
+        if let playbackId = item.playbackId {
+            dict["playbackId"] = playbackId
+        }
+
         if let description = item.description {
             dict["description"] = description
         }
@@ -463,13 +454,17 @@ import ShortKit
         let muteOnStart = obj["muteOnStart"] as? Bool ?? true
         let videoOverlay = parseVideoOverlay(obj["overlay"] as? String)
 
+        let feedSourceStr = obj["feedSource"] as? String ?? "algorithmic"
+        let feedSource: FeedSource = feedSourceStr == "custom" ? .custom : .algorithmic
+
         return FeedConfig(
             feedHeight: feedHeight,
             videoOverlay: videoOverlay,
             carouselOverlay: .none,
             surveyOverlay: .none,
             adOverlay: .none,
-            muteOnStart: muteOnStart
+            muteOnStart: muteOnStart,
+            feedSource: feedSource
         )
     }
 
@@ -525,6 +520,34 @@ import ShortKit
         }
     }
 
+    /// Parse a JSON string of CustomFeedItem[] from the JS bridge.
+    private static func parseCustomFeedItems(_ json: String) -> [CustomFeedItem]? {
+        guard let data = json.data(using: .utf8),
+              let arr = try? JSONSerialization.jsonObject(with: data) as? [[String: Any]] else {
+            return nil
+        }
+
+        var result: [CustomFeedItem] = []
+        for obj in arr {
+            guard let type = obj["type"] as? String else { continue }
+            switch type {
+            case "video":
+                guard let playbackId = obj["playbackId"] as? String else { continue }
+                result.append(.video(playbackId: playbackId))
+            case "imageCarousel":
+                guard let itemData = obj["item"],
+                      let itemJSON = try? JSONSerialization.data(withJSONObject: itemData),
+                      let carouselItem = try? JSONDecoder().decode(ImageCarouselItem.self, from: itemJSON) else {
+                    continue
+                }
+                result.append(.imageCarousel(carouselItem))
+            default:
+                continue
+            }
+        }
+        return result.isEmpty ? nil : result
+    }
+
     /// Parse optional custom dimensions JSON string into dictionary.
     private static func parseCustomDimensions(_ json: String?) -> [String: String]? {
         guard let json,
@@ -535,3 +558,14 @@ import ShortKit
         return dict
     }
 }
+
+// MARK: - ShortKitDelegate
+
+extension ShortKitBridge: ShortKitDelegate {
+    public func shortKit(_ shortKit: ShortKit, didTapContent contentId: String, at index: Int) {
+        emitOnMain("onContentTapped", body: [
+            "contentId": contentId,
+            "index": index
+        ])
+    }
+}

package/ios/ShortKitFeedView.swift

@@ -31,8 +31,10 @@ import ShortKit
     private weak var currentOverlayView: UIView?
     /// Overlay for the upcoming cell (nativeID="overlay-next").
     private weak var nextOverlayView: UIView?
-    /// The page index from which the current scroll gesture started.
+    /// The page index used for overlay transform calculations.
     private var currentPage: Int = 0
+    /// Deferred page update to avoid flashing stale metadata.
+    private var pageUpdateWorkItem: DispatchWorkItem?
 
     // MARK: - Lifecycle
 
@@ -86,6 +88,8 @@ import ShortKit
     }
 
     private func removeFeedViewController() {
+        pageUpdateWorkItem?.cancel()
+        pageUpdateWorkItem = nil
         scrollObservation?.invalidate()
         scrollObservation = nil
         currentOverlayView?.transform = .identity
@@ -106,7 +110,6 @@ import ShortKit
 
     private func setupScrollTracking(_ feedVC: ShortKitFeedViewController) {
         guard let scrollView = findScrollView(in: feedVC.view) else {
-            NSLog("[ShortKitFeedView] Could not find scroll view in feed VC hierarchy.")
             return
         }
 
@@ -120,14 +123,47 @@ import ShortKit
         guard cellHeight > 0 else { return }
 
         let offset = scrollView.contentOffset.y
-        let delta = offset - CGFloat(currentPage) * cellHeight
 
-        // Update currentPage when the scroll settles near a page boundary
+        // Detect page change, but DEFER updating currentPage.
+        //
+        // Why: when the scroll settles on a new page, overlay-current still
+        // shows the OLD page's metadata (React hasn't processed OVERLAY_ACTIVATE
+        // yet). If we update currentPage immediately, delta snaps to 0 and
+        // overlay-current becomes visible with stale data.
+        //
+        // By deferring ~80ms, overlay-next (which already shows the correct
+        // data via NextOverlayProvider) stays visible at y=0 while React
+        // processes the state update. After the delay, overlay-current has
+        // been re-rendered with correct data and takes over seamlessly.
         let nearestPage = Int(round(offset / cellHeight))
         if abs(offset - CGFloat(nearestPage) * cellHeight) < 1.0 {
+            if nearestPage != currentPage && pageUpdateWorkItem == nil {
+                let targetPage = nearestPage
+                let workItem = DispatchWorkItem { [weak self] in
+                    guard let self else { return }
+                    self.currentPage = targetPage
+                    self.pageUpdateWorkItem = nil
+                    // Reapply overlay transforms now that currentPage is updated.
+                    // Without this, overlay-next (static NextOverlayProvider state)
+                    // stays visible at y=0 while overlay-current (live state) stays
+                    // hidden — no scroll event fires to trigger handleScrollOffset.
+                    let h = self.bounds.height
+                    self.currentOverlayView?.transform = .identity
+                    self.nextOverlayView?.transform = CGAffineTransform(translationX: 0, y: h)
+                }
+                pageUpdateWorkItem = workItem
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.08, execute: workItem)
+            }
+        } else if let workItem = pageUpdateWorkItem {
+            // User is scrolling again — apply pending update immediately
+            // so transforms stay aligned for the new gesture.
+            workItem.cancel()
+            pageUpdateWorkItem = nil
             currentPage = nearestPage
         }
 
+        let delta = offset - CGFloat(currentPage) * cellHeight
+
         // Find the overlay views if not cached
         if currentOverlayView == nil || nextOverlayView == nil {
             findOverlayViews()
@@ -146,28 +182,39 @@ import ShortKit
         }
     }
 
-    /// Find the sibling RN overlay views by nativeID (mapped to
-    /// accessibilityIdentifier on iOS). In the Fabric hierarchy, the
-    /// ShortKitFeedView and the overlay containers are children of the
-    /// same parent (wrapped by ShortKitFeed.tsx with overflow: hidden).
+    /// Find the sibling RN overlay views by nativeID.
+    ///
+    /// In Fabric interop, `ShortKitFeedView` (a Paper-style `RCTViewManager`
+    /// view) is wrapped in an intermediate `RCTViewComponentView`. So
+    /// `self.superview` is that wrapper — not the React `<View>` container
+    /// rendered by ShortKitFeed.tsx. We walk up the ancestor chain until we
+    /// find the overlays.
     private func findOverlayViews() {
-        guard let parent = superview else { return }
-
-        // The nativeID views may be nested inside intermediate Fabric
-        // wrapper views, so we search recursively within siblings.
-        for sibling in parent.subviews where sibling !== self {
-            if let found = findView(withNativeID: "overlay-current", in: sibling) {
-                currentOverlayView = found
-            }
-            if let found = findView(withNativeID: "overlay-next", in: sibling) {
-                nextOverlayView = found
+        var ancestor: UIView? = superview
+        while let container = ancestor {
+            for child in container.subviews {
+                // Skip subtrees that contain ourselves
+                guard !self.isDescendant(of: child) else { continue }
+
+                if currentOverlayView == nil {
+                    currentOverlayView = findView(withNativeID: "overlay-current", in: child)
+                }
+                if nextOverlayView == nil {
+                    nextOverlayView = findView(withNativeID: "overlay-next", in: child)
+                }
             }
+            if currentOverlayView != nil && nextOverlayView != nil { return }
+            ancestor = container.superview
         }
     }
 
-    /// Recursively find a view by its accessibilityIdentifier (nativeID).
+    /// Recursively find a view by its React Native `nativeID` prop.
+    /// In Fabric, this is stored on `RCTViewComponentView.nativeId`,
+    /// not `accessibilityIdentifier`.
     private func findView(withNativeID nativeID: String, in view: UIView) -> UIView? {
-        if view.accessibilityIdentifier == nativeID {
+        if view.responds(to: Selector(("nativeId"))),
+           let rnNativeId = view.value(forKey: "nativeId") as? String,
+           rnNativeId == nativeID {
             return view
         }
         for subview in view.subviews {

package/ios/ShortKitModule.mm

@@ -54,14 +54,10 @@ RCT_EXPORT_MODULE(ShortKitModule)
     @"onFeedTransition",
     @"onFormatChange",
     @"onPrefetchedAheadCountChanged",
+    @"onRemainingContentCountChanged",
     @"onError",
     @"onShareTapped",
     @"onSurveyResponse",
-    @"onArticleTapped",
-    @"onCommentTapped",
-    @"onOverlayShareTapped",
-    @"onSaveTapped",
-    @"onLikeTapped",
     @"onOverlayConfigure",
     @"onOverlayActivate",
     @"onOverlayReset",
@@ -69,6 +65,7 @@ RCT_EXPORT_MODULE(ShortKitModule)
     @"onOverlayRestore",
     @"onOverlayTap",
     @"onOverlayDoubleTap",
+    @"onContentTapped",
   ];
 }
 
@@ -107,6 +104,7 @@ RCT_EXPORT_MODULE(ShortKitModule)
 
 RCT_EXPORT_METHOD(initialize:(NSString *)apiKey
                   config:(NSString *)config
+                  embedId:(NSString *)embedId
                   clientAppName:(NSString *)clientAppName
                   clientAppVersion:(NSString *)clientAppVersion
                   customDimensions:(NSString *)customDimensions) {
@@ -115,6 +113,7 @@ RCT_EXPORT_METHOD(initialize:(NSString *)apiKey
 
   _shortKitBridge = [[ShortKitBridge alloc] initWithApiKey:apiKey
                                                    config:config
+                                                  embedId:embedId
                                             clientAppName:clientAppName
                                          clientAppVersion:clientAppVersion
                                          customDimensions:customDimensions
@@ -192,6 +191,24 @@ RCT_EXPORT_METHOD(setMaxBitrate:(double)bitrate) {
   [_shortKitBridge setMaxBitrate:bitrate];
 }
 
+// MARK: - Custom Feed
+
+RCT_EXPORT_METHOD(setFeedItems:(NSString *)items) {
+  [_shortKitBridge setFeedItems:items];
+}
+
+RCT_EXPORT_METHOD(appendFeedItems:(NSString *)items) {
+  [_shortKitBridge appendFeedItems:items];
+}
+
+RCT_EXPORT_METHOD(fetchContent:(NSInteger)limit
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject) {
+  [_shortKitBridge fetchContent:limit completion:^(NSString *json) {
+    resolve(json);
+  }];
+}
+
 // MARK: - New Architecture (TurboModule)
 
 #ifdef RCT_NEW_ARCH_ENABLED