@shortkitsdk/react-native 0.1.0

package/ios/ShortKitFeedView.swift

@@ -0,0 +1,207 @@
+import UIKit
+import ShortKit
+
+/// Fabric native view that embeds `ShortKitFeedViewController` using
+/// UIViewController containment. Props are set by the view manager via
+/// `@objc` setters.
+///
+/// Also tracks the feed's scroll offset via KVO and applies a native
+/// transform to the sibling RN overlay view so it moves with the active
+/// cell during swipe transitions.
+@objc public class ShortKitFeedView: UIView {
+
+    // MARK: - Props (set by RCTViewManager)
+
+    @objc public var config: String? {
+        didSet { /* reserved for future use */ }
+    }
+
+    @objc public var overlayType: String? {
+        didSet { /* overlay mode is determined at ShortKit init time */ }
+    }
+
+    // MARK: - Child VC
+
+    private var feedViewController: ShortKitFeedViewController?
+
+    // MARK: - Scroll Tracking
+
+    private var scrollObservation: NSKeyValueObservation?
+    /// Overlay for the currently active cell (nativeID="overlay-current").
+    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.
+    private var currentPage: Int = 0
+
+    // MARK: - Lifecycle
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+
+        if window != nil {
+            embedFeedViewControllerIfNeeded()
+        }
+    }
+
+    public override func willMove(toWindow newWindow: UIWindow?) {
+        super.willMove(toWindow: newWindow)
+
+        if newWindow == nil {
+            removeFeedViewController()
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        feedViewController?.view.frame = bounds
+    }
+
+    // MARK: - VC Containment
+
+    private func embedFeedViewControllerIfNeeded() {
+        // Already embedded
+        guard feedViewController == nil else { return }
+
+        guard let sdk = ShortKitBridge.shared?.sdk else {
+            NSLog("[ShortKitFeedView] ShortKit SDK not initialized. Call ShortKitModule.initialize() first.")
+            return
+        }
+
+        guard let parentVC = findParentViewController() else {
+            NSLog("[ShortKitFeedView] Could not find parent UIViewController.")
+            return
+        }
+
+        let feedVC = ShortKitFeedViewController(shortKit: sdk)
+        self.feedViewController = feedVC
+
+        parentVC.addChild(feedVC)
+        feedVC.view.frame = bounds
+        feedVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        addSubview(feedVC.view)
+        feedVC.didMove(toParent: parentVC)
+
+        setupScrollTracking(feedVC)
+    }
+
+    private func removeFeedViewController() {
+        scrollObservation?.invalidate()
+        scrollObservation = nil
+        currentOverlayView?.transform = .identity
+        nextOverlayView?.transform = .identity
+        currentOverlayView = nil
+        nextOverlayView = nil
+
+        guard let feedVC = feedViewController else { return }
+
+        feedVC.willMove(toParent: nil)
+        feedVC.view.removeFromSuperview()
+        feedVC.removeFromParent()
+
+        self.feedViewController = nil
+    }
+
+    // MARK: - Scroll Tracking
+
+    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
+        }
+
+        scrollObservation = scrollView.observe(\.contentOffset, options: [.new]) { [weak self] sv, _ in
+            self?.handleScrollOffset(sv)
+        }
+    }
+
+    private func handleScrollOffset(_ scrollView: UIScrollView) {
+        let cellHeight = scrollView.bounds.height
+        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
+        let nearestPage = Int(round(offset / cellHeight))
+        if abs(offset - CGFloat(nearestPage) * cellHeight) < 1.0 {
+            currentPage = nearestPage
+        }
+
+        // Find the overlay views if not cached
+        if currentOverlayView == nil || nextOverlayView == nil {
+            findOverlayViews()
+        }
+
+        // Current overlay follows the active cell
+        currentOverlayView?.transform = CGAffineTransform(translationX: 0, y: -delta)
+
+        // Next overlay: positioned one page ahead in the scroll direction
+        if delta >= 0 {
+            // Forward scroll (or idle): next cell is below
+            nextOverlayView?.transform = CGAffineTransform(translationX: 0, y: cellHeight - delta)
+        } else {
+            // Backward scroll: next cell is above
+            nextOverlayView?.transform = CGAffineTransform(translationX: 0, y: -cellHeight - delta)
+        }
+    }
+
+    /// 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).
+    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
+            }
+        }
+    }
+
+    /// Recursively find a view by its accessibilityIdentifier (nativeID).
+    private func findView(withNativeID nativeID: String, in view: UIView) -> UIView? {
+        if view.accessibilityIdentifier == nativeID {
+            return view
+        }
+        for subview in view.subviews {
+            if let found = findView(withNativeID: nativeID, in: subview) {
+                return found
+            }
+        }
+        return nil
+    }
+
+    /// Recursively find the first UIScrollView in a view hierarchy.
+    private func findScrollView(in view: UIView) -> UIScrollView? {
+        if let sv = view as? UIScrollView {
+            return sv
+        }
+        for subview in view.subviews {
+            if let sv = findScrollView(in: subview) {
+                return sv
+            }
+        }
+        return nil
+    }
+
+    // MARK: - Helpers
+
+    /// Walk the responder chain to find the nearest UIViewController.
+    private func findParentViewController() -> UIViewController? {
+        var responder: UIResponder? = self
+        while let next = responder?.next {
+            if let vc = next as? UIViewController {
+                return vc
+            }
+            responder = next
+        }
+        return nil
+    }
+}

package/ios/ShortKitFeedViewManager.mm

@@ -0,0 +1,29 @@
+#import <React/RCTViewManager.h>
+
+// Import the Swift-generated header for ShortKitFeedView
+#if __has_include(<ShortKitReactNative/ShortKitReactNative-Swift.h>)
+#import <ShortKitReactNative/ShortKitReactNative-Swift.h>
+#else
+#import "ShortKitReactNative-Swift.h"
+#endif
+
+@interface ShortKitFeedViewManager : RCTViewManager
+@end
+
+@implementation ShortKitFeedViewManager
+
+RCT_EXPORT_MODULE(ShortKitFeedView)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (UIView *)view {
+  return [[ShortKitFeedView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(config, NSString)
+RCT_EXPORT_VIEW_PROPERTY(overlayType, NSString)
+RCT_EXPORT_VIEW_PROPERTY(templateName, NSString)
+
+@end

package/ios/ShortKitModule.h

@@ -0,0 +1,25 @@
+#import <React/RCTEventEmitter.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <ShortKitSpecs/ShortKitSpecs.h>
+#endif
+
+@protocol ShortKitBridgeDelegateProtocol;
+
+/// TurboModule bridge for the ShortKit iOS SDK.
+/// Receives commands from JS, emits events back via codegen EventEmitter.
+#ifdef RCT_NEW_ARCH_ENABLED
+@interface ShortKitModule : RCTEventEmitter <NativeShortKitModuleSpec, ShortKitBridgeDelegateProtocol> {
+@protected
+  facebook::react::EventEmitterCallback _eventEmitterCallback;
+}
+#else
+@interface ShortKitModule : RCTEventEmitter <RCTBridgeModule, ShortKitBridgeDelegateProtocol>
+#endif
+
+@end
+
+/// Protocol for ShortKitBridge (Swift) to emit events back to the module.
+@protocol ShortKitBridgeDelegateProtocol <NSObject>
+- (void)emitEvent:(NSString * _Nonnull)name body:(NSDictionary * _Nonnull)body;
+@end

package/ios/ShortKitModule.mm

@@ -0,0 +1,204 @@
+#import "ShortKitModule.h"
+#import <React/RCTLog.h>
+
+// Import the Swift-generated header for ShortKitBridge
+#if __has_include(<ShortKitReactNative/ShortKitReactNative-Swift.h>)
+#import <ShortKitReactNative/ShortKitReactNative-Swift.h>
+#else
+#import "ShortKitReactNative-Swift.h"
+#endif
+
+@implementation ShortKitModule {
+  ShortKitBridge *_shortKitBridge;
+  BOOL _hasListeners;
+}
+
+RCT_EXPORT_MODULE(ShortKitModule)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+/// All TurboModule methods run on the main queue.
+/// This ensures thread safety for UIKit-backed ShortKit operations
+/// and eliminates races on _hasListeners / _shortKitBridge.
+- (dispatch_queue_t)methodQueue {
+  return dispatch_get_main_queue();
+}
+
+- (instancetype)init {
+  self = [super init];
+  return self;
+}
+
+/// Called when the RN bridge tears down (hot reload, app shutdown).
+- (void)invalidate {
+  [_shortKitBridge teardown];
+  _shortKitBridge = nil;
+  [super invalidate];
+}
+
+// MARK: - RCTEventEmitter
+
+- (NSArray<NSString *> *)supportedEvents {
+  return @[
+    @"onPlayerStateChanged",
+    @"onCurrentItemChanged",
+    @"onTimeUpdate",
+    @"onMutedChanged",
+    @"onPlaybackRateChanged",
+    @"onCaptionsEnabledChanged",
+    @"onActiveCaptionTrackChanged",
+    @"onActiveCueChanged",
+    @"onDidLoop",
+    @"onFeedTransition",
+    @"onFormatChange",
+    @"onPrefetchedAheadCountChanged",
+    @"onError",
+    @"onShareTapped",
+    @"onSurveyResponse",
+    @"onArticleTapped",
+    @"onCommentTapped",
+    @"onOverlayShareTapped",
+    @"onSaveTapped",
+    @"onLikeTapped",
+    @"onOverlayConfigure",
+    @"onOverlayActivate",
+    @"onOverlayReset",
+    @"onOverlayFadeOut",
+    @"onOverlayRestore",
+    @"onOverlayTap",
+    @"onOverlayDoubleTap",
+  ];
+}
+
+- (void)startObserving {
+  _hasListeners = YES;
+}
+
+- (void)stopObserving {
+  _hasListeners = NO;
+}
+
+// MARK: - Event Emitter Callback (New Architecture)
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)setEventEmitterCallback:(EventEmitterCallbackWrapper *)eventEmitterCallbackWrapper {
+  _eventEmitterCallback = std::move(eventEmitterCallbackWrapper->_eventEmitterCallback);
+}
+#endif
+
+// MARK: - ShortKitBridgeDelegateProtocol
+
+- (void)emitEvent:(NSString *)name body:(NSDictionary *)body {
+#ifdef RCT_NEW_ARCH_ENABLED
+  // New Architecture: use the codegen EventEmitterCallback directly
+  if (_eventEmitterCallback) {
+    _eventEmitterCallback(std::string([name UTF8String]), body);
+  }
+#else
+  if (_hasListeners) {
+    [self sendEventWithName:name body:body];
+  }
+#endif
+}
+
+// MARK: - Lifecycle
+
+RCT_EXPORT_METHOD(initialize:(NSString *)apiKey
+                  config:(NSString *)config
+                  clientAppName:(NSString *)clientAppName
+                  clientAppVersion:(NSString *)clientAppVersion
+                  customDimensions:(NSString *)customDimensions) {
+  // Tear down any existing instance to prevent leaks on re-initialize
+  [_shortKitBridge teardown];
+
+  _shortKitBridge = [[ShortKitBridge alloc] initWithApiKey:apiKey
+                                                   config:config
+                                            clientAppName:clientAppName
+                                         clientAppVersion:clientAppVersion
+                                         customDimensions:customDimensions
+                                                 delegate:self];
+}
+
+RCT_EXPORT_METHOD(destroy) {
+  [_shortKitBridge teardown];
+  _shortKitBridge = nil;
+}
+
+RCT_EXPORT_METHOD(setUserId:(NSString *)userId) {
+  [_shortKitBridge setUserId:userId];
+}
+
+RCT_EXPORT_METHOD(clearUserId) {
+  [_shortKitBridge clearUserId];
+}
+
+RCT_EXPORT_METHOD(onPause) {
+  [_shortKitBridge onPause];
+}
+
+RCT_EXPORT_METHOD(onResume) {
+  [_shortKitBridge onResume];
+}
+
+// MARK: - Player Controls
+
+RCT_EXPORT_METHOD(play) {
+  [_shortKitBridge play];
+}
+
+RCT_EXPORT_METHOD(pause) {
+  [_shortKitBridge doPause];
+}
+
+RCT_EXPORT_METHOD(seek:(double)seconds) {
+  [_shortKitBridge seekTo:seconds];
+}
+
+RCT_EXPORT_METHOD(seekAndPlay:(double)seconds) {
+  [_shortKitBridge seekAndPlayTo:seconds];
+}
+
+RCT_EXPORT_METHOD(skipToNext) {
+  [_shortKitBridge skipToNext];
+}
+
+RCT_EXPORT_METHOD(skipToPrevious) {
+  [_shortKitBridge skipToPrevious];
+}
+
+RCT_EXPORT_METHOD(setMuted:(BOOL)muted) {
+  [_shortKitBridge setMuted:muted];
+}
+
+RCT_EXPORT_METHOD(setPlaybackRate:(double)rate) {
+  [_shortKitBridge setPlaybackRate:rate];
+}
+
+RCT_EXPORT_METHOD(setCaptionsEnabled:(BOOL)enabled) {
+  [_shortKitBridge setCaptionsEnabled:enabled];
+}
+
+RCT_EXPORT_METHOD(selectCaptionTrack:(NSString *)language) {
+  [_shortKitBridge selectCaptionTrack:language];
+}
+
+RCT_EXPORT_METHOD(sendContentSignal:(NSString *)signal) {
+  [_shortKitBridge sendContentSignal:signal];
+}
+
+RCT_EXPORT_METHOD(setMaxBitrate:(double)bitrate) {
+  [_shortKitBridge setMaxBitrate:bitrate];
+}
+
+// MARK: - New Architecture (TurboModule)
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeShortKitModuleSpecJSI>(params);
+}
+#endif
+
+@end

package/ios/ShortKitOverlayBridge.swift

@@ -0,0 +1,91 @@
+import UIKit
+import ShortKit
+
+/// A transparent UIView that conforms to `FeedOverlay` and bridges overlay
+/// lifecycle calls to JS events via `ShortKitBridge`.
+///
+/// The actual overlay UI is rendered by React Native on the JS side through
+/// the `OverlayManager` component. This view simply relays the SDK lifecycle
+/// events so the JS overlay knows when to configure, activate, reset, etc.
+@objc public class ShortKitOverlayBridge: UIView, @unchecked Sendable, FeedOverlay {
+
+    // MARK: - Bridge Reference
+
+    /// Weak reference to the bridge, set by the factory closure in `parseFeedConfig`.
+    weak var bridge: ShortKitBridge?
+
+    // MARK: - State
+
+    /// Stores the last configured ContentItem so we can pass it with lifecycle
+    /// events that don't receive the item as a parameter.
+    private var currentItem: ContentItem?
+
+    // MARK: - Init
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        backgroundColor = .clear
+        isUserInteractionEnabled = true
+        setupGestures()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) is not supported")
+    }
+
+    // MARK: - Gestures
+
+    private func setupGestures() {
+        let doubleTap = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTap(_:)))
+        doubleTap.numberOfTapsRequired = 2
+        addGestureRecognizer(doubleTap)
+
+        let singleTap = UITapGestureRecognizer(target: self, action: #selector(handleSingleTap))
+        singleTap.require(toFail: doubleTap)
+        addGestureRecognizer(singleTap)
+    }
+
+    @objc private func handleSingleTap() {
+        bridge?.emitOverlayEvent("onOverlayTap", body: [:])
+    }
+
+    @objc private func handleDoubleTap(_ gesture: UITapGestureRecognizer) {
+        let location = gesture.location(in: self)
+        bridge?.emitOverlayEvent("onOverlayDoubleTap", body: [
+            "x": location.x,
+            "y": location.y,
+        ])
+    }
+
+    // MARK: - FeedOverlay
+
+    public func attach(player: ShortKitPlayer) {
+        // No-op on the native side. The JS overlay subscribes to player
+        // state via the TurboModule's Combine publishers.
+    }
+
+    public func configure(with item: ContentItem) {
+        currentItem = item
+        bridge?.emitOverlayEvent("onOverlayConfigure", item: item)
+    }
+
+    public func resetPlaybackProgress() {
+        guard let item = currentItem else { return }
+        bridge?.emitOverlayEvent("onOverlayReset", item: item)
+    }
+
+    public func activatePlayback() {
+        guard let item = currentItem else { return }
+        bridge?.emitOverlayEvent("onOverlayActivate", item: item)
+    }
+
+    public func fadeOutForTransition() {
+        guard let item = currentItem else { return }
+        bridge?.emitOverlayEvent("onOverlayFadeOut", item: item)
+    }
+
+    public func restoreFromTransition() {
+        guard let item = currentItem else { return }
+        bridge?.emitOverlayEvent("onOverlayRestore", item: item)
+    }
+}

package/ios/ShortKitReactNative-Bridging-Header.h

@@ -0,0 +1,3 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+#import "ShortKitModule.h"

package/ios/ShortKitReactNative.podspec

@@ -0,0 +1,19 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "ShortKitReactNative"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = "https://github.com/shortkit/shortkit"
+  s.license      = package["license"]
+  s.author       = "ShortKit"
+  s.platforms    = { :ios => "16.0" }
+  s.source       = { :git => "https://github.com/shortkit/shortkit.git", :tag => "v#{s.version}" }
+  s.source_files = "*.{h,m,mm,cpp,swift}"
+  s.requires_arc = true
+
+  s.dependency "ShortKit"
+
+  install_modules_dependencies(s)
+end

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@shortkitsdk/react-native",
+  "version": "0.1.0",
+  "description": "ShortKit React Native SDK — short-form video feed",
+  "react-native": "src/index",
+  "source": "src/index",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "MIT",
+  "files": [
+    "src",
+    "ios",
+    "android",
+    "ShortKitReactNative.podspec",
+    "app.plugin.js",
+    "plugin/build",
+    "react-native.config.js",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build:plugin": "tsc --project plugin/tsconfig.json",
+    "test": "jest",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">= 18.3.1",
+    "react-native": ">= 0.76.0"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "^9.0.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "typescript": "^5.8.0",
+    "jest": "^29.0.0",
+    "@testing-library/react-native": "^12.0.0",
+    "react-test-renderer": "^19.0.0"
+  },
+  "codegenConfig": {
+    "name": "ShortKitSpecs",
+    "type": "all",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.shortkit.reactnative"
+    }
+  }
+}

package/plugin/build/index.d.ts

@@ -0,0 +1,3 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+declare const _default: ConfigPlugin<void>;
+export default _default;

package/plugin/build/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("@expo/config-plugins");
+const withShortKitIOS_1 = require("./withShortKitIOS");
+const withShortKitAndroid_1 = require("./withShortKitAndroid");
+// Read version from package.json for the plugin wrapper
+const pkg = require('../../package.json');
+const withShortKit = (config) => {
+    config = (0, withShortKitIOS_1.withShortKitIOS)(config);
+    config = (0, withShortKitAndroid_1.withShortKitAndroid)(config);
+    return config;
+};
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withShortKit, pkg.name, pkg.version);

package/plugin/build/withShortKitAndroid.d.ts

@@ -0,0 +1,8 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+/**
+ * Android config plugin for ShortKit.
+ *
+ * - Ensures INTERNET permission is present (usually already added by Expo).
+ * - Sets minSdkVersion to 24 if lower.
+ */
+export declare const withShortKitAndroid: ConfigPlugin;

package/plugin/build/withShortKitAndroid.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withShortKitAndroid = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+/**
+ * Android config plugin for ShortKit.
+ *
+ * - Ensures INTERNET permission is present (usually already added by Expo).
+ * - Sets minSdkVersion to 24 if lower.
+ */
+const withShortKitAndroid = (config) => {
+    // Ensure minSdkVersion >= 24
+    config = config_plugins_1.AndroidConfig.Version.withBuildScriptExtMinimumVersion(config, {
+        name: 'minSdkVersion',
+        minVersion: 24,
+    });
+    // Ensure INTERNET permission
+    return (0, config_plugins_1.withAndroidManifest)(config, (mod) => {
+        const manifest = mod.modResults.manifest;
+        if (!manifest['uses-permission']) {
+            manifest['uses-permission'] = [];
+        }
+        const hasInternet = manifest['uses-permission'].some((p) => p.$?.['android:name'] === 'android.permission.INTERNET');
+        if (!hasInternet) {
+            manifest['uses-permission'].push({
+                $: { 'android:name': 'android.permission.INTERNET' },
+            });
+        }
+        return mod;
+    });
+};
+exports.withShortKitAndroid = withShortKitAndroid;