@shortkitsdk/react-native 0.1.0

package/plugin/build/withShortKitIOS.d.ts

@@ -0,0 +1,8 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+/**
+ * iOS config plugin for ShortKit.
+ *
+ * - Sets the minimum iOS deployment target to 16.0 if lower.
+ * - No special permissions are required for video streaming playback.
+ */
+export declare const withShortKitIOS: ConfigPlugin;

package/plugin/build/withShortKitIOS.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withShortKitIOS = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+/**
+ * iOS config plugin for ShortKit.
+ *
+ * - Sets the minimum iOS deployment target to 16.0 if lower.
+ * - No special permissions are required for video streaming playback.
+ */
+const withShortKitIOS = (config) => {
+    return (0, config_plugins_1.withXcodeProject)(config, (mod) => {
+        const project = mod.modResults;
+        // Ensure minimum deployment target is iOS 16.0
+        const buildConfigs = project.pbxXCBuildConfigurationSection();
+        for (const key of Object.keys(buildConfigs)) {
+            const buildConfig = buildConfigs[key];
+            if (typeof buildConfig === 'object' &&
+                buildConfig.buildSettings?.IPHONEOS_DEPLOYMENT_TARGET) {
+                const current = parseFloat(buildConfig.buildSettings.IPHONEOS_DEPLOYMENT_TARGET);
+                if (current < 16.0) {
+                    buildConfig.buildSettings.IPHONEOS_DEPLOYMENT_TARGET = '16.0';
+                }
+            }
+        }
+        return mod;
+    });
+};
+exports.withShortKitIOS = withShortKitIOS;

package/react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {},
+      ios: {},
+    },
+  },
+};

package/src/OverlayManager.tsx

@@ -0,0 +1,87 @@
+import React, { useContext, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { OverlayConfig, PlayerState } from './types';
+import { ShortKitContext } from './ShortKitContext';
+import type { ShortKitContextValue } from './ShortKitContext';
+
+interface OverlayManagerProps {
+  overlay: OverlayConfig;
+}
+
+/**
+ * Internal component that renders TWO instances of the developer's custom
+ * overlay component — one for the current cell and one for the next cell.
+ *
+ * On the native side, `ShortKitFeedView` finds these views by their
+ * `nativeID` and applies scroll-tracking transforms so each overlay moves
+ * with its respective cell during swipe transitions — matching the native
+ * iOS/Android SDK behavior where each cell has its own overlay instance.
+ *
+ * The "current" overlay uses the actual provider context.
+ * The "next" overlay uses a context override where `currentItem = nextItem`
+ * with initial playback state, so it renders the upcoming video's overlay
+ * content before the user scrolls to it.
+ */
+export function OverlayManager({ overlay }: OverlayManagerProps) {
+  if (
+    overlay === 'none' ||
+    typeof overlay === 'string' ||
+    overlay.type !== 'custom' ||
+    !('component' in overlay)
+  ) {
+    return null;
+  }
+
+  const OverlayComponent = overlay.component;
+
+  return (
+    <>
+      <View style={StyleSheet.absoluteFill} nativeID="overlay-current" pointerEvents="box-none">
+        <OverlayComponent />
+      </View>
+      <View style={StyleSheet.absoluteFill} nativeID="overlay-next" pointerEvents="box-none">
+        <NextOverlayProvider>
+          <OverlayComponent />
+        </NextOverlayProvider>
+      </View>
+    </>
+  );
+}
+
+/**
+ * Wraps children with a modified ShortKitContext where `currentItem` is
+ * set to the provider's `nextItem` (the item configured for the upcoming
+ * cell). Other state reflects an "about to play" initial state so the
+ * overlay renders correctly before playback starts on that cell.
+ */
+function NextOverlayProvider({ children }: { children: React.ReactNode }) {
+  const context = useContext(ShortKitContext);
+
+  const nextValue: ShortKitContextValue | null = useMemo(() => {
+    if (!context) return null;
+
+    return {
+      ...context,
+      currentItem: context.nextItem,
+      isActive: context.nextItem != null,
+      time: {
+        current: 0,
+        duration: context.nextItem?.duration ?? 0,
+        buffered: 0,
+      },
+      playerState: 'idle' as PlayerState,
+      isTransitioning: false,
+      activeCue: null,
+      lastOverlayTap: 0,
+      lastOverlayDoubleTap: null,
+    };
+  }, [context]);
+
+  if (!nextValue) return <>{children}</>;
+
+  return (
+    <ShortKitContext.Provider value={nextValue}>
+      {children}
+    </ShortKitContext.Provider>
+  );
+}

package/src/ShortKitContext.ts

@@ -0,0 +1,51 @@
+import { createContext } from 'react';
+import type {
+  ContentItem,
+  PlayerTime,
+  PlayerState,
+  CaptionTrack,
+  ContentSignal,
+  OverlayConfig,
+} from './types';
+
+export interface ShortKitContextValue {
+  // Player state
+  playerState: PlayerState;
+  currentItem: ContentItem | null;
+  nextItem: ContentItem | null;
+  time: PlayerTime;
+  isMuted: boolean;
+  playbackRate: number;
+  captionsEnabled: boolean;
+  activeCaptionTrack: CaptionTrack | null;
+  activeCue: { text: string; startTime: number; endTime: number } | null;
+  prefetchedAheadCount: number;
+  isActive: boolean;
+  isTransitioning: boolean;
+  lastOverlayTap: number;
+  lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
+
+  // Player commands
+  play: () => void;
+  pause: () => void;
+  seek: (seconds: number) => void;
+  seekAndPlay: (seconds: number) => void;
+  skipToNext: () => void;
+  skipToPrevious: () => void;
+  setMuted: (muted: boolean) => void;
+  setPlaybackRate: (rate: number) => void;
+  setCaptionsEnabled: (enabled: boolean) => void;
+  selectCaptionTrack: (language: string) => void;
+  sendContentSignal: (signal: ContentSignal) => void;
+  setMaxBitrate: (bitrate: number) => void;
+
+  // SDK operations
+  setUserId: (id: string) => void;
+  clearUserId: () => void;
+
+  // Internal — used by ShortKitFeed to render custom overlays
+  /** @internal */
+  _overlayConfig: OverlayConfig;
+}
+
+export const ShortKitContext = createContext<ShortKitContextValue | null>(null);

package/src/ShortKitFeed.tsx

@@ -0,0 +1,203 @@
+import React, { useContext, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ShortKitFeedProps } from './types';
+import ShortKitFeedView from './specs/ShortKitFeedViewNativeComponent';
+import NativeShortKitModule from './specs/NativeShortKitModule';
+import { OverlayManager } from './OverlayManager';
+import { ShortKitContext } from './ShortKitContext';
+import { deserializeContentItem } from './serialization';
+
+/**
+ * Renders the native ShortKit video feed and forwards feed-level events to
+ * callback props.
+ *
+ * Must be rendered inside a `<ShortKitProvider>`. The native feed view
+ * receives its configuration from the `NativeShortKitModule.initialize()` call
+ * made by the provider, so the view props here are placeholders required by
+ * the Fabric codegen contract.
+ *
+ * When the overlay config is of type `custom`, the `OverlayManager` is
+ * rendered alongside the native view to display the developer's React overlay
+ * component.
+ */
+export function ShortKitFeed(props: ShortKitFeedProps) {
+  const {
+    style,
+    onError,
+    onShareTapped,
+    onSurveyResponse,
+    onLoop,
+    onFeedTransition,
+    onFormatChange,
+    onArticleTapped,
+    onCommentTapped,
+    onOverlayShareTapped,
+    onSaveTapped,
+    onLikeTapped,
+  } = props;
+
+  const context = useContext(ShortKitContext);
+  if (!context) {
+    throw new Error('ShortKitFeed must be used within a ShortKitProvider');
+  }
+
+  const overlayConfig = context._overlayConfig;
+
+  // ---------------------------------------------------------------------------
+  // Subscribe to feed-level events and forward to callback props
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    if (!NativeShortKitModule) return;
+
+    const subscriptions: Array<{ remove: () => void }> = [];
+
+    if (onError) {
+      subscriptions.push(
+        NativeShortKitModule.onError((event) => {
+          onError({ code: event.code, message: event.message });
+        }),
+      );
+    }
+
+    if (onShareTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onShareTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onShareTapped(item);
+        }),
+      );
+    }
+
+    if (onSurveyResponse) {
+      subscriptions.push(
+        NativeShortKitModule.onSurveyResponse((event) => {
+          onSurveyResponse(event.surveyId, {
+            id: event.optionId,
+            text: event.optionText,
+          });
+        }),
+      );
+    }
+
+    if (onLoop) {
+      subscriptions.push(
+        NativeShortKitModule.onDidLoop((event) => {
+          onLoop({ contentId: event.contentId, loopCount: event.loopCount });
+        }),
+      );
+    }
+
+    if (onFeedTransition) {
+      subscriptions.push(
+        NativeShortKitModule.onFeedTransition((event) => {
+          onFeedTransition({
+            phase: event.phase as 'began' | 'ended',
+            from: deserializeContentItem(event.fromItem ?? null),
+            to: deserializeContentItem(event.toItem ?? null),
+            direction: event.direction as 'forward' | 'backward',
+          });
+        }),
+      );
+    }
+
+    if (onFormatChange) {
+      subscriptions.push(
+        NativeShortKitModule.onFormatChange((event) => {
+          onFormatChange({
+            contentId: event.contentId,
+            fromBitrate: event.fromBitrate,
+            toBitrate: event.toBitrate,
+            fromResolution: event.fromResolution,
+            toResolution: event.toResolution,
+          });
+        }),
+      );
+    }
+
+    if (onArticleTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onArticleTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onArticleTapped(item);
+        }),
+      );
+    }
+
+    if (onCommentTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onCommentTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onCommentTapped(item);
+        }),
+      );
+    }
+
+    if (onOverlayShareTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onOverlayShareTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onOverlayShareTapped(item);
+        }),
+      );
+    }
+
+    if (onSaveTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onSaveTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onSaveTapped(item);
+        }),
+      );
+    }
+
+    if (onLikeTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onLikeTapped((event) => {
+          const item = deserializeContentItem(event.item);
+          if (item) onLikeTapped(item);
+        }),
+      );
+    }
+
+    return () => {
+      for (const sub of subscriptions) {
+        sub.remove();
+      }
+    };
+  }, [
+    onError,
+    onShareTapped,
+    onSurveyResponse,
+    onLoop,
+    onFeedTransition,
+    onFormatChange,
+    onArticleTapped,
+    onCommentTapped,
+    onOverlayShareTapped,
+    onSaveTapped,
+    onLikeTapped,
+  ]);
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  return (
+    <View style={[feedStyles.container, style]}>
+      <ShortKitFeedView
+        style={feedStyles.feed}
+        config="{}"
+      />
+      <OverlayManager overlay={overlayConfig} />
+    </View>
+  );
+}
+
+const feedStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  feed: {
+    flex: 1,
+  },
+});