react-native-firework-sdk 1.3.1-beta.8 → 1.4.0

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["VideoFeed","FireworkSDK","FWNavigator","LiveStream","LiveStreamChatEventName","LiveStreamEventName","VideoPlaybackEventName","VideoShopping"],"mappings":"AACA,OAAOA,SAAP,MAAsB,wBAAtB;AAQA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAKA,OAAOC,UAAP,MAAuB,cAAvB;AAgBA,OAAOC,uBAAP,MAAoC,kCAApC;AAEA,OAAOC,mBAAP,MAAgC,8BAAhC;AAkBA,OAAOC,sBAAP,MAAmC,iCAAnC;AAeA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,eAAeN,WAAf;AAEA,SAcEC,WAdF,EAgBEC,UAhBF,EAkBEC,uBAlBF,EAqBEC,mBArBF,EAmCEL,SAnCF,EAgDEM,sBAhDF,EAsDEC,aAtDF","sourcesContent":["import type { IVideoFeedProps, VideoFeedMode } from './components/VideoFeed';\nimport VideoFeed from './components/VideoFeed';\nimport type {\n  CustomCTAClickCallback,\n  CustomCTALinkContentRender,\n  SDKInitCallback,\n  VideoFeedClickCallback,\n  VideoPlaybackCallback,\n} from './FireworkSDK';\nimport FireworkSDK from './FireworkSDK';\nimport FWNavigator from './FWNavigator';\nimport type {\n  onLiveStreamChatEventCallback,\n  onLiveStreamEventCallback,\n} from './LiveStream';\nimport LiveStream from './LiveStream';\nimport type AdBadgeConfiguration from './models/AdBadgeConfiguration';\nimport type { AdBadgeTextType } from './models/AdBadgeConfiguration';\nimport type AddToCartResult from './models/AddToCartResult';\nimport type FeedItemDetails from './models/FeedItemDetails';\nimport type FWError from './models/FWError';\nimport type {\n  AddToCartEvent,\n  CustomCTAClickEvent,\n  LiveStreamChatEvent,\n  LiveStreamEvent,\n  SDKInitEvent,\n  UpdateProductDetailsEvent,\n  VideoPlaybackEvent,\n  WillDisplayProductEvent,\n} from './models/FWEvents';\nimport LiveStreamChatEventName from './models/LiveStreamChatEventName';\nimport type LiveStreamEventDetails from './models/LiveStreamEventDetails';\nimport LiveStreamEventName from './models/LiveStreamEventName';\nimport type LiveStreamMessageDetails from './models/LiveStreamMessageDetails';\nimport type { NewNativeContainerProps } from './models/NewNativeContainerProps';\nimport type Product from './models/Product';\nimport type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';\nimport type { AddToCartButtonConfiguration } from './models/ProductInfoViewConfiguration';\nimport type ProductUnit from './models/ProductUnit';\nimport type { ProductPrice, ProductUnitOption } from './models/ProductUnit';\nimport type VideoFeedConfiguration from './models/VideoFeedConfiguration';\nimport type {\n  VideoFeedContentPadding,\n  VideoFeedPlayIconConfiguration,\n  VideoFeedTitleConfiguration,\n  VideoFeedTitlePosition,\n} from './models/VideoFeedConfiguration';\nimport type { VideoFeedSource } from './models/VideoFeedSource';\nimport type VideoPlaybackDetails from './models/VideoPlaybackDetails';\nimport type { VideoPlayerSize } from './models/VideoPlaybackDetails';\nimport VideoPlaybackEventName from './models/VideoPlaybackEventName';\nimport type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';\nimport type {\n  VideoLaunchBehavior,\n  VideoPlayerCompleteAction,\n  VideoPlayerCTAStyle,\n  VideoPlayerStyle,\n} from './models/VideoPlayerConfiguration';\nimport type {\n  AddToCartCallback,\n  ClickCartIconCallback,\n  CustomClickCartIconCallback,\n  UpdateProductDetailsCallback,\n  WillDisplayProductCallback,\n} from './VideoShopping';\nimport VideoShopping from './VideoShopping';\n\nexport default FireworkSDK;\n\nexport {\n  AdBadgeConfiguration,\n  AdBadgeTextType,\n  AddToCartButtonConfiguration,\n  AddToCartCallback,\n  AddToCartEvent,\n  AddToCartResult,\n  ClickCartIconCallback,\n  CustomClickCartIconCallback,\n  CustomCTAClickCallback,\n  CustomCTAClickEvent,\n  CustomCTALinkContentRender,\n  FeedItemDetails,\n  FWError,\n  FWNavigator,\n  IVideoFeedProps,\n  LiveStream,\n  LiveStreamChatEvent,\n  LiveStreamChatEventName,\n  LiveStreamEvent,\n  LiveStreamEventDetails,\n  LiveStreamEventName,\n  LiveStreamMessageDetails,\n  NewNativeContainerProps,\n  onLiveStreamChatEventCallback,\n  onLiveStreamEventCallback,\n  Product,\n  ProductInfoViewConfiguration,\n  ProductPrice,\n  ProductUnit,\n  ProductUnitOption,\n  SDKInitCallback,\n  SDKInitEvent,\n  UpdateProductDetailsCallback,\n  UpdateProductDetailsEvent,\n  VideoFeed,\n  VideoFeedClickCallback,\n  VideoFeedConfiguration,\n  VideoFeedContentPadding,\n  VideoFeedMode,\n  VideoFeedPlayIconConfiguration,\n  VideoFeedSource,\n  VideoFeedTitleConfiguration,\n  VideoFeedTitlePosition,\n  VideoLaunchBehavior,\n  VideoPlaybackCallback,\n  VideoPlaybackDetails,\n  VideoPlaybackEvent,\n  VideoPlaybackEventName,\n  VideoPlayerCompleteAction,\n  VideoPlayerConfiguration,\n  VideoPlayerCTAStyle,\n  VideoPlayerSize,\n  VideoPlayerStyle,\n  VideoShopping,\n  WillDisplayProductCallback,\n  WillDisplayProductEvent,\n};\n"]}
+{"version":3,"sources":["index.tsx"],"names":["StoryBlock","VideoFeed","FireworkSDK","FWNavigator","LiveStream","LiveStreamChatEventName","LiveStreamEventName","VideoPlaybackEventName","VideoShopping"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,yBAAvB;AAEA,OAAOC,SAAP,MAAsB,wBAAtB;AAQA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAKA,OAAOC,UAAP,MAAuB,cAAvB;AAgBA,OAAOC,uBAAP,MAAoC,kCAApC;AAEA,OAAOC,mBAAP,MAAgC,8BAAhC;AAmBA,OAAOC,sBAAP,MAAmC,iCAAnC;AAeA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,eAAeN,WAAf;AAEA,SAcEC,WAdF,EAgBEC,UAhBF,EAkBEC,uBAlBF,EAqBEC,mBArBF,EAiCEN,UAjCF,EAqCEC,SArCF,EAkDEM,sBAlDF,EAwDEC,aAxDF","sourcesContent":["import StoryBlock from './components/StoryBlock';\nimport type { IVideoFeedProps, VideoFeedMode } from './components/VideoFeed';\nimport VideoFeed from './components/VideoFeed';\nimport type {\n  CustomCTAClickCallback,\n  CustomCTALinkContentRender,\n  SDKInitCallback,\n  VideoFeedClickCallback,\n  VideoPlaybackCallback,\n} from './FireworkSDK';\nimport FireworkSDK from './FireworkSDK';\nimport FWNavigator from './FWNavigator';\nimport type {\n  onLiveStreamChatEventCallback,\n  onLiveStreamEventCallback,\n} from './LiveStream';\nimport LiveStream from './LiveStream';\nimport type AdBadgeConfiguration from './models/AdBadgeConfiguration';\nimport type { AdBadgeTextType } from './models/AdBadgeConfiguration';\nimport type AddToCartResult from './models/AddToCartResult';\nimport type FeedItemDetails from './models/FeedItemDetails';\nimport type FWError from './models/FWError';\nimport type {\n  AddToCartEvent,\n  CustomCTAClickEvent,\n  LiveStreamChatEvent,\n  LiveStreamEvent,\n  SDKInitEvent,\n  UpdateProductDetailsEvent,\n  VideoPlaybackEvent,\n  WillDisplayProductEvent,\n} from './models/FWEvents';\nimport LiveStreamChatEventName from './models/LiveStreamChatEventName';\nimport type LiveStreamEventDetails from './models/LiveStreamEventDetails';\nimport LiveStreamEventName from './models/LiveStreamEventName';\nimport type LiveStreamMessageDetails from './models/LiveStreamMessageDetails';\nimport type { NewNativeContainerProps } from './models/NewNativeContainerProps';\nimport type Product from './models/Product';\nimport type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';\nimport type { AddToCartButtonConfiguration } from './models/ProductInfoViewConfiguration';\nimport type ProductUnit from './models/ProductUnit';\nimport type { ProductPrice, ProductUnitOption } from './models/ProductUnit';\nimport type { StoryBlockSource } from './models/StoryBlockSource';\nimport type VideoFeedConfiguration from './models/VideoFeedConfiguration';\nimport type {\n  VideoFeedContentPadding,\n  VideoFeedPlayIconConfiguration,\n  VideoFeedTitleConfiguration,\n  VideoFeedTitlePosition,\n} from './models/VideoFeedConfiguration';\nimport type { VideoFeedSource } from './models/VideoFeedSource';\nimport type VideoPlaybackDetails from './models/VideoPlaybackDetails';\nimport type { VideoPlayerSize } from './models/VideoPlaybackDetails';\nimport VideoPlaybackEventName from './models/VideoPlaybackEventName';\nimport type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';\nimport type {\n  VideoLaunchBehavior,\n  VideoPlayerCompleteAction,\n  VideoPlayerCTAStyle,\n  VideoPlayerStyle,\n} from './models/VideoPlayerConfiguration';\nimport type {\n  AddToCartCallback,\n  ClickCartIconCallback,\n  CustomClickCartIconCallback,\n  UpdateProductDetailsCallback,\n  WillDisplayProductCallback,\n} from './VideoShopping';\nimport VideoShopping from './VideoShopping';\n\nexport default FireworkSDK;\n\nexport {\n  AdBadgeConfiguration,\n  AdBadgeTextType,\n  AddToCartButtonConfiguration,\n  AddToCartCallback,\n  AddToCartEvent,\n  AddToCartResult,\n  ClickCartIconCallback,\n  CustomClickCartIconCallback,\n  CustomCTAClickCallback,\n  CustomCTAClickEvent,\n  CustomCTALinkContentRender,\n  FeedItemDetails,\n  FWError,\n  FWNavigator,\n  IVideoFeedProps,\n  LiveStream,\n  LiveStreamChatEvent,\n  LiveStreamChatEventName,\n  LiveStreamEvent,\n  LiveStreamEventDetails,\n  LiveStreamEventName,\n  LiveStreamMessageDetails,\n  NewNativeContainerProps,\n  onLiveStreamChatEventCallback,\n  onLiveStreamEventCallback,\n  Product,\n  ProductInfoViewConfiguration,\n  ProductPrice,\n  ProductUnit,\n  ProductUnitOption,\n  SDKInitCallback,\n  SDKInitEvent,\n  StoryBlock,\n  StoryBlockSource,\n  UpdateProductDetailsCallback,\n  UpdateProductDetailsEvent,\n  VideoFeed,\n  VideoFeedClickCallback,\n  VideoFeedConfiguration,\n  VideoFeedContentPadding,\n  VideoFeedMode,\n  VideoFeedPlayIconConfiguration,\n  VideoFeedSource,\n  VideoFeedTitleConfiguration,\n  VideoFeedTitlePosition,\n  VideoLaunchBehavior,\n  VideoPlaybackCallback,\n  VideoPlaybackDetails,\n  VideoPlaybackEvent,\n  VideoPlaybackEventName,\n  VideoPlayerCompleteAction,\n  VideoPlayerConfiguration,\n  VideoPlayerCTAStyle,\n  VideoPlayerSize,\n  VideoPlayerStyle,\n  VideoShopping,\n  WillDisplayProductCallback,\n  WillDisplayProductEvent,\n};\n"]}

package/lib/module/models/StoryBlockSource.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=StoryBlockSource.js.map

package/lib/module/models/StoryBlockSource.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/typescript/components/FWStoryBlock.d.ts

@@ -0,0 +1,2 @@
+declare const FWStoryBlock: import("react-native").HostComponent<any> | (() => never);
+export default FWStoryBlock;

package/lib/typescript/components/StoryBlock.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { EmitterSubscription, StyleProp, ViewStyle } from 'react-native';
+import type FWError from '../models/FWError';
+import type { StoryBlockSource } from '../models/StoryBlockSource';
+export interface IStoryBlockProps {
+    /**
+     * Standard React Native View Style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * One of four available story block sources.
+     */
+    source: StoryBlockSource;
+    /**
+     * Channel id of the story block. Required when the source is set as channel or playlist or dynamicContent.
+     */
+    channel?: string;
+    /**
+     * Playlist id of the story block. Please note channel id is necessary. Required when the source is set as playlist.
+     */
+    playlist?: string;
+    /**
+     * The dynamic content parameters of the story block. Required when the source is set as dynamicContent.
+     */
+    dynamicContentParameters?: {
+        [key: string]: string[];
+    };
+    /**
+     * The feed loading result callback. It means loading successfully when error equals to undefined.
+     */
+    onStoryBlockLoadFinished?: (error?: FWError) => void;
+}
+export default class StoryBlock extends React.Component<IStoryBlockProps> {
+    nativeComponentRef: React.RefObject<any>;
+    subscriptions: EmitterSubscription[];
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private _onStoryBlockLoadFinished;
+    private _generateKey;
+    private _generateDynamicContentParametersString;
+}

package/lib/typescript/index.d.ts

@@ -1,3 +1,4 @@
+import StoryBlock from './components/StoryBlock';
 import type { IVideoFeedProps, VideoFeedMode } from './components/VideoFeed';
 import VideoFeed from './components/VideoFeed';
 import type { CustomCTAClickCallback, CustomCTALinkContentRender, SDKInitCallback, VideoFeedClickCallback, VideoPlaybackCallback } from './FireworkSDK';
@@ -21,6 +22,7 @@ import type ProductInfoViewConfiguration from './models/ProductInfoViewConfigura
 import type { AddToCartButtonConfiguration } from './models/ProductInfoViewConfiguration';
 import type ProductUnit from './models/ProductUnit';
 import type { ProductPrice, ProductUnitOption } from './models/ProductUnit';
+import type { StoryBlockSource } from './models/StoryBlockSource';
 import type VideoFeedConfiguration from './models/VideoFeedConfiguration';
 import type { VideoFeedContentPadding, VideoFeedPlayIconConfiguration, VideoFeedTitleConfiguration, VideoFeedTitlePosition } from './models/VideoFeedConfiguration';
 import type { VideoFeedSource } from './models/VideoFeedSource';
@@ -32,4 +34,4 @@ import type { VideoLaunchBehavior, VideoPlayerCompleteAction, VideoPlayerCTAStyl
 import type { AddToCartCallback, ClickCartIconCallback, CustomClickCartIconCallback, UpdateProductDetailsCallback, WillDisplayProductCallback } from './VideoShopping';
 import VideoShopping from './VideoShopping';
 export default FireworkSDK;
-export { AdBadgeConfiguration, AdBadgeTextType, AddToCartButtonConfiguration, AddToCartCallback, AddToCartEvent, AddToCartResult, ClickCartIconCallback, CustomClickCartIconCallback, CustomCTAClickCallback, CustomCTAClickEvent, CustomCTALinkContentRender, FeedItemDetails, FWError, FWNavigator, IVideoFeedProps, LiveStream, LiveStreamChatEvent, LiveStreamChatEventName, LiveStreamEvent, LiveStreamEventDetails, LiveStreamEventName, LiveStreamMessageDetails, NewNativeContainerProps, onLiveStreamChatEventCallback, onLiveStreamEventCallback, Product, ProductInfoViewConfiguration, ProductPrice, ProductUnit, ProductUnitOption, SDKInitCallback, SDKInitEvent, UpdateProductDetailsCallback, UpdateProductDetailsEvent, VideoFeed, VideoFeedClickCallback, VideoFeedConfiguration, VideoFeedContentPadding, VideoFeedMode, VideoFeedPlayIconConfiguration, VideoFeedSource, VideoFeedTitleConfiguration, VideoFeedTitlePosition, VideoLaunchBehavior, VideoPlaybackCallback, VideoPlaybackDetails, VideoPlaybackEvent, VideoPlaybackEventName, VideoPlayerCompleteAction, VideoPlayerConfiguration, VideoPlayerCTAStyle, VideoPlayerSize, VideoPlayerStyle, VideoShopping, WillDisplayProductCallback, WillDisplayProductEvent, };
+export { AdBadgeConfiguration, AdBadgeTextType, AddToCartButtonConfiguration, AddToCartCallback, AddToCartEvent, AddToCartResult, ClickCartIconCallback, CustomClickCartIconCallback, CustomCTAClickCallback, CustomCTAClickEvent, CustomCTALinkContentRender, FeedItemDetails, FWError, FWNavigator, IVideoFeedProps, LiveStream, LiveStreamChatEvent, LiveStreamChatEventName, LiveStreamEvent, LiveStreamEventDetails, LiveStreamEventName, LiveStreamMessageDetails, NewNativeContainerProps, onLiveStreamChatEventCallback, onLiveStreamEventCallback, Product, ProductInfoViewConfiguration, ProductPrice, ProductUnit, ProductUnitOption, SDKInitCallback, SDKInitEvent, StoryBlock, StoryBlockSource, UpdateProductDetailsCallback, UpdateProductDetailsEvent, VideoFeed, VideoFeedClickCallback, VideoFeedConfiguration, VideoFeedContentPadding, VideoFeedMode, VideoFeedPlayIconConfiguration, VideoFeedSource, VideoFeedTitleConfiguration, VideoFeedTitlePosition, VideoLaunchBehavior, VideoPlaybackCallback, VideoPlaybackDetails, VideoPlaybackEvent, VideoPlaybackEventName, VideoPlayerCompleteAction, VideoPlayerConfiguration, VideoPlayerCTAStyle, VideoPlayerSize, VideoPlayerStyle, VideoShopping, WillDisplayProductCallback, WillDisplayProductEvent, };

package/lib/typescript/models/StoryBlockSource.d.ts

@@ -0,0 +1 @@
+export declare type StoryBlockSource = 'discover' | 'channel' | 'playlist' | 'dynamicContent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-firework-sdk",
-  "version": "1.3.1-beta.8",
+  "version": "1.4.0",
   "description": "Firework React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/react-native-firework-sdk.podspec

@@ -28,6 +28,6 @@ cp $module_header_path "${PODS_ROOT}/Headers/Public/react_native_firework_sdk/"'
 
   s.dependency "React-Core"
 
-  s.dependency "FireworkVideo", "0.18.0"
+  s.dependency "FireworkVideo", "1.0.1"
 
 end

package/src/components/FWStoryBlock.tsx

@@ -0,0 +1,10 @@
+import { requireNativeComponent, UIManager } from 'react-native';
+import { LINKING_ERROR } from '../constants/FWErrorMessage';
+const NativeComponentName = 'FWStoryBlock';
+const FWStoryBlock =
+  UIManager.getViewManagerConfig(NativeComponentName) != null
+    ? requireNativeComponent<any>(NativeComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+export default FWStoryBlock;

package/src/components/StoryBlock.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+
+import type {
+  EmitterSubscription,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import FireworkSDK from '../FireworkSDK';
+import type FWError from '../models/FWError';
+import { FWEventName } from '../models/FWEventName';
+import type { StoryBlockSource } from '../models/StoryBlockSource';
+import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
+import FWLoggerUtil from '../utils/FWLoggerUtil';
+import FWStoryBlock from './FWStoryBlock';
+import { findNodeHandle, UIManager, Platform } from 'react-native';
+
+const NativeComponentName = 'FWStoryBlock';
+
+const createFragment = (viewId: any) => {
+  if (Platform.OS === 'android') {
+    UIManager.dispatchViewManagerCommand(
+      viewId,
+      UIManager.getViewManagerConfig(
+        NativeComponentName
+      ).Commands.create.toString(),
+      [viewId]
+    );
+  }
+};
+
+export interface IStoryBlockProps {
+  /**
+   * Standard React Native View Style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * One of four available story block sources.
+   */
+  source: StoryBlockSource;
+  /**
+   * Channel id of the story block. Required when the source is set as channel or playlist or dynamicContent.
+   */
+  channel?: string;
+  /**
+   * Playlist id of the story block. Please note channel id is necessary. Required when the source is set as playlist.
+   */
+  playlist?: string;
+  /**
+   * The dynamic content parameters of the story block. Required when the source is set as dynamicContent.
+   */
+  dynamicContentParameters?: { [key: string]: string[] };
+  /**
+   * The feed loading result callback. It means loading successfully when error equals to undefined.
+   */
+  onStoryBlockLoadFinished?: (error?: FWError) => void;
+}
+
+export default class StoryBlock extends React.Component<IStoryBlockProps> {
+  nativeComponentRef = React.createRef<any>();
+
+  subscriptions: EmitterSubscription[] = [];
+  componentDidMount() {
+    const subscriptionOfShareBaseURLUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.ShareBaseURLUpdated,
+        () => {
+          this.setState({});
+        }
+      );
+    this.subscriptions.push(subscriptionOfShareBaseURLUpdated);
+
+    const subscriptionOfAdBadgeConfigurationUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.AdBadgeConfigurationUpdated,
+        () => {
+          this.setState({});
+        }
+      );
+    this.subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
+
+    if (Platform.OS === 'android') {
+      const viewId = findNodeHandle(this.nativeComponentRef.current);
+      FWLoggerUtil.log(
+        `StoryBlock componentDidMount createFragment viewId: ${viewId}`
+      );
+      createFragment(viewId);
+    }
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach((value) => {
+      value.remove();
+    });
+
+    this.subscriptions = [];
+  }
+
+  render() {
+    const { style } = this.props;
+
+    return (
+      <FWStoryBlock
+        ref={this.nativeComponentRef}
+        key={this._generateKey()}
+        {...this.props}
+        onStoryBlockLoadFinished={this._onStoryBlockLoadFinished}
+        style={Object.assign({}, style, { zIndex: -1 })}
+      />
+    );
+  }
+
+  private _onStoryBlockLoadFinished = (event: NativeSyntheticEvent<any>) => {
+    FWLoggerUtil.log(
+      `StoryBlock _onStoryBlockLoadFinished ${event.nativeEvent.name}`
+    );
+
+    const { onStoryBlockLoadFinished } = this.props;
+    const { name, reason } = event.nativeEvent;
+
+    if (onStoryBlockLoadFinished) {
+      if (name) {
+        if (reason) {
+          onStoryBlockLoadFinished({ name, reason });
+        } else {
+          onStoryBlockLoadFinished({ name });
+        }
+      } else {
+        onStoryBlockLoadFinished();
+      }
+    }
+  };
+
+  private _generateKey(): string {
+    const { source, channel = '', playlist = '' } = this.props;
+
+    const shareBaseURL = FireworkSDK.getInstance().shareBaseURL ?? '';
+    const adBadgeConfiguration =
+      FireworkSDK.getInstance().adBadgeConfiguration ?? {};
+    const adBadgeTextType = adBadgeConfiguration.badgeTextType ?? '';
+    const backgroundColorOfAdBadge = adBadgeConfiguration.backgroundColor ?? '';
+    const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
+    const dynamicContentParametersString =
+      this._generateDynamicContentParametersString();
+
+    let key = `source:${source}`;
+    key += `_channel:${channel}`;
+    key += `_playlist:${playlist}`;
+    key += `_shareBaseURL:${shareBaseURL}`;
+    key += `_adBadgeTextType:${adBadgeTextType}`;
+    key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
+    key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
+    key += `_dynamicContentParameters:${dynamicContentParametersString}`;
+
+    return key;
+  }
+
+  private _generateDynamicContentParametersString(): string {
+    const { dynamicContentParameters } = this.props;
+
+    if (!dynamicContentParameters) {
+      return '';
+    }
+
+    let resultString = '';
+    const sortedKeyList = Object.keys(dynamicContentParameters).sort();
+    for (const key of sortedKeyList) {
+      const value = dynamicContentParameters[key];
+      const valueString = value.join(',');
+      if (resultString.length > 0) {
+        resultString += '_';
+      }
+
+      resultString += `${key}:${valueString}`;
+    }
+
+    return resultString;
+  }
+}

package/src/components/VideoFeed.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import { NativeSyntheticEvent, Platform } from 'react-native';
 import {
   EmitterSubscription,
   findNodeHandle,
@@ -8,7 +8,6 @@ import {
   UIManager,
   ViewStyle,
 } from 'react-native';
-import FWLoggerUtil from '../utils/FWLoggerUtil';
 
 import FireworkSDK from '../FireworkSDK';
 import type FWError from '../models/FWError';
@@ -17,6 +16,7 @@ import type VideoFeedConfiguration from '../models/VideoFeedConfiguration';
 import type { VideoFeedSource } from '../models/VideoFeedSource';
 import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
 import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
+import FWLoggerUtil from '../utils/FWLoggerUtil';
 import FWVideoFeed from './FWVideoFeed';
 
 export type VideoFeedMode = 'row' | 'column' | 'grid';
@@ -64,11 +64,6 @@ export interface IVideoFeedProps {
   onVideoFeedLoadFinished?: (error?: FWError) => void;
 }
 
-interface VideoFeedLoadFinishedEvent extends TargetedEvent {
-  name: string;
-  reason?: string | null;
-}
-
 const NativeComponentName = 'FWVideoFeed';
 
 export default class VideoFeed extends React.Component<IVideoFeedProps> {
@@ -88,27 +83,36 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
 
     const nativeNodeHandle = findNodeHandle(this.nativeComponentRef.current);
 
+    let commandId: string | number =
+      UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh;
+    if (Platform.OS === 'android') {
+      commandId = commandId.toString();
+    }
+
     UIManager.dispatchViewManagerCommand(
       findNodeHandle(nativeNodeHandle),
-      UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh,
+      commandId,
       []
     );
   };
 
-  private _onVideoFeedLoadFinished = (
-    event: NativeSyntheticEvent<VideoFeedLoadFinishedEvent>
-  ) => {
+  private _onVideoFeedLoadFinished = (event: NativeSyntheticEvent<any>) => {
     FWLoggerUtil.log(
       `VideoFeed _onVideoFeedLoadFinished ${JSON.stringify(event.nativeEvent)}`
     );
+    const { onVideoFeedLoadFinished } = this.props;
 
     const { name, reason } = event.nativeEvent;
 
-    if (this.props.onVideoFeedLoadFinished) {
+    if (onVideoFeedLoadFinished) {
       if (name) {
-        this.props.onVideoFeedLoadFinished({ name, reason });
+        if (reason) {
+          onVideoFeedLoadFinished({ name, reason });
+        } else {
+          onVideoFeedLoadFinished({ name });
+        }
       } else {
-        this.props.onVideoFeedLoadFinished();
+        onVideoFeedLoadFinished();
       }
     }
   };
@@ -228,17 +232,20 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
   private _getVideoFeedConfiguration(): VideoFeedConfiguration | undefined {
     const { videoFeedConfiguration } = this.props;
     if (!videoFeedConfiguration) {
-      return undefined;
+      return videoFeedConfiguration;
     }
 
-    let resultFeedConfiguration: VideoFeedConfiguration = {
-      ...videoFeedConfiguration,
-    };
-    if (resultFeedConfiguration.gridColumns) {
-      resultFeedConfiguration.gridColumns = Math.floor(
-        resultFeedConfiguration.gridColumns!
-      );
+    if (
+      videoFeedConfiguration.gridColumns &&
+      Math.floor(videoFeedConfiguration.gridColumns!) !==
+        videoFeedConfiguration.gridColumns
+    ) {
+      return {
+        ...videoFeedConfiguration,
+        gridColumns: Math.floor(videoFeedConfiguration.gridColumns!),
+      };
+    } else {
+      return videoFeedConfiguration;
     }
-    return resultFeedConfiguration;
   }
 }

package/src/index.tsx

@@ -1,3 +1,4 @@
+import StoryBlock from './components/StoryBlock';
 import type { IVideoFeedProps, VideoFeedMode } from './components/VideoFeed';
 import VideoFeed from './components/VideoFeed';
 import type {
@@ -39,6 +40,7 @@ import type ProductInfoViewConfiguration from './models/ProductInfoViewConfigura
 import type { AddToCartButtonConfiguration } from './models/ProductInfoViewConfiguration';
 import type ProductUnit from './models/ProductUnit';
 import type { ProductPrice, ProductUnitOption } from './models/ProductUnit';
+import type { StoryBlockSource } from './models/StoryBlockSource';
 import type VideoFeedConfiguration from './models/VideoFeedConfiguration';
 import type {
   VideoFeedContentPadding,
@@ -101,6 +103,8 @@ export {
   ProductUnitOption,
   SDKInitCallback,
   SDKInitEvent,
+  StoryBlock,
+  StoryBlockSource,
   UpdateProductDetailsCallback,
   UpdateProductDetailsEvent,
   VideoFeed,

package/src/models/StoryBlockSource.ts

@@ -0,0 +1,5 @@
+export type StoryBlockSource =
+  | 'discover'
+  | 'channel'
+  | 'playlist'
+  | 'dynamicContent';