react-native-firework-sdk 2.2.4 → 2.3.0

package/src/FireworkSDK.ts

@@ -21,11 +21,18 @@ import LiveStreamModule from './modules/LiveStreamModule';
 import ShoppingModule from './modules/ShoppingModule';
 import FWLoggerUtil from './utils/FWLoggerUtil';
 import VideoShopping from './VideoShopping';
-
-export type SDKInitCallback = (event: SDKInitEvent) => void;
-export type CustomCTAClickCallback = (event: CustomCTAClickEvent) => void;
-export type VideoPlaybackCallback = (event: VideoPlaybackEvent) => void;
-export type VideoFeedClickCallback = (event: VideoFeedClickEvent) => void;
+import FWGlobalState from './utils/FWGlobalState';
+
+export type SDKInitCallback = (event: SDKInitEvent) => Promise<void> | void;
+export type CustomCTAClickCallback = (
+  event: CustomCTAClickEvent
+) => Promise<void> | void;
+export type VideoPlaybackCallback = (
+  event: VideoPlaybackEvent
+) => Promise<void> | void;
+export type VideoFeedClickCallback = (
+  event: VideoFeedClickEvent
+) => Promise<void> | void;
 
 /**
  * Firework SDK.
@@ -91,7 +98,11 @@ class FireworkSDK {
     const valueHasChanged =
       this._adBadgeConfiguration?.badgeTextType !== value?.badgeTextType ||
       this._adBadgeConfiguration?.backgroundColor !== value?.backgroundColor ||
-      this._adBadgeConfiguration?.textColor !== value?.textColor;
+      this._adBadgeConfiguration?.textColor !== value?.textColor ||
+      this._adBadgeConfiguration?.androidFontInfo?.isCustom !==
+        value?.androidFontInfo?.isCustom ||
+      this._adBadgeConfiguration?.androidFontInfo?.typefaceName !==
+        value?.androidFontInfo?.typefaceName;
     this._adBadgeConfiguration = value;
     if (valueHasChanged) {
       this.eventEmitter.emit(FWEventName.AdBadgeConfigurationUpdated);
@@ -166,6 +177,7 @@ class FireworkSDK {
 
   private constructor() {
     FWLoggerUtil.log('FireworkSDK constructor');
+
     this.eventEmitter.addListener(FWEventName.SDKInit, (event) => {
       FWLoggerUtil.log(`Receive SDKInit event ${event?.error}`);
 
@@ -230,9 +242,11 @@ class FireworkSDK {
     if (videoLaunchBehaviorUpdated) {
       this.eventEmitter.emit(FWEventName.VideoLaunchBehaviorUpdated);
     }
-    FireworkSDKModule.init(options);
-    ShoppingModule.init();
-    LiveStreamModule.init();
+    await FireworkSDKModule.init(options);
+    await ShoppingModule.init();
+    await LiveStreamModule.init();
+
+    FWGlobalState.getInstance().resolveSdkInitCalled();
   }
 
   /**
@@ -240,7 +254,13 @@ class FireworkSDK {
    * @param {string} url
    * @param {VideoPlayerConfiguration} config
    */
-  public openVideoPlayer(url: string, config?: VideoPlayerConfiguration) {
+  public async openVideoPlayer(
+    url: string,
+    config?: VideoPlayerConfiguration
+  ): Promise<void> {
+    if (!FWGlobalState.getInstance().sdkInitCalled) {
+      await FWGlobalState.getInstance().sdkInitCalledPromise;
+    }
     FireworkSDKModule.openVideoPlayer(url, config ?? {});
   }
 
@@ -248,28 +268,36 @@ class FireworkSDK {
    * Records the user purchase. Only supported on iOS.
    * @param {TrackPurchaseParameters} parameters
    */
-  public trackPurchase(parameters: TrackPurchaseParameters) {
+  public async trackPurchase(
+    parameters: TrackPurchaseParameters
+  ): Promise<void> {
     if (Platform.OS === 'ios') {
+      if (!FWGlobalState.getInstance().sdkInitCalled) {
+        await FWGlobalState.getInstance().sdkInitCalledPromise;
+      }
       FireworkSDKModule.trackPurchase(parameters);
     }
   }
 
   /**
-   * Change App level language. Only supported on iOS.
+   * Change App level language.
    * @param {string | undefined | null} language Such as en, ar and en-US
    * If language is null or undefined or empty string, SDK will use system language.
    * @returns {Promise<boolean>} The result of changing app language.
    */
   public async changeAppLanguage(language?: string | null): Promise<boolean> {
-    if (Platform.OS === 'ios') {
-      const result = await FireworkSDKModule.changeAppLanguage(language);
-      if (result) {
-        this.updateInternalAppLanguage(language);
+    if (!FWGlobalState.getInstance().sdkInitCalled) {
+      await FWGlobalState.getInstance().sdkInitCalledPromise;
+    }
+    const result = await FireworkSDKModule.changeAppLanguage(language);
+    if (result) {
+      const languageChanged = this._appLanguage !== language;
+      if (Platform.OS === 'ios' && languageChanged) {
+        await this.navigator.stopFloatingPlayer();
       }
-      return result;
+      this.updateInternalAppLanguage(language);
     }
-
-    return false;
+    return result;
   }
 
   private updateInternalAppLanguage(language?: string | null) {

package/src/LiveStream.ts

@@ -4,10 +4,12 @@ import type { LiveStreamChatEvent, LiveStreamEvent } from './models/FWEvents';
 import { LiveStreamModuleEventEmitter } from './modules/LiveStreamModule';
 import FWLoggerUtil from './utils/FWLoggerUtil';
 
-export type onLiveStreamEventCallback = (event: LiveStreamEvent) => void;
+export type onLiveStreamEventCallback = (
+  event: LiveStreamEvent
+) => Promise<void> | void;
 export type onLiveStreamChatEventCallback = (
   event: LiveStreamChatEvent
-) => void;
+) => Promise<void> | void;
 
 /**
  * The entry class of live stream.

package/src/VideoShopping.ts

@@ -13,20 +13,24 @@ import ShoppingModule, {
 } from './modules/ShoppingModule';
 import FWLoggerUtil from './utils/FWLoggerUtil';
 import type ShoppingCTAResult from './models/ShoppingCTAResult';
+import FWGlobalState from './utils/FWGlobalState';
 
 export type ShoppingCTACallback = (
   event: ShoppingCTAEvent
-) => Promise<ShoppingCTAResult>;
+) => Promise<ShoppingCTAResult> | ShoppingCTAResult;
 
-export type CustomClickCartIconCallback = () => Promise<void>;
+export type CustomClickCartIconCallback = () => Promise<void> | void;
 
+export type UpdateProductDetailsCallbackResult = Product[] | undefined | null;
 export type UpdateProductDetailsCallback = (
   event: UpdateProductDetailsEvent
-) => Promise<Product[] | undefined | null>;
+) =>
+  | Promise<UpdateProductDetailsCallbackResult>
+  | UpdateProductDetailsCallbackResult;
 
 export type CustomClickLinkButtonCallback = (
   event: CustomClickLinkButtonEvent
-) => Promise<void>;
+) => Promise<void> | void;
 
 /**
  * The entry class of video shopping.
@@ -46,18 +50,7 @@ class VideoShopping {
    * The host app can customize the click event processing logic of
    * the shopping cart icon by setting the callback.
    */
-  public get onCustomClickCartIcon(): CustomClickCartIconCallback | undefined {
-    return this._onCustomClickCartIcon;
-  }
-  public set onCustomClickCartIcon(
-    value: CustomClickCartIconCallback | undefined
-  ) {
-    this._onCustomClickCartIcon = value;
-    if (Platform.OS === 'ios') {
-      ShoppingModule.setCustomClickCartIconEnabled(!!value);
-    }
-  }
-  private _onCustomClickCartIcon?: CustomClickCartIconCallback | undefined;
+  public onCustomClickCartIcon?: CustomClickCartIconCallback | undefined;
 
   /**
    * This callback is triggered when the video will be shown.
@@ -66,6 +59,26 @@ class VideoShopping {
    */
   public onUpdateProductDetails?: UpdateProductDetailsCallback;
 
+  /**
+   * This callback is triggered when the user clicks
+   * the link button next to Add to cart button.
+   *
+   * The host app can customize the click event processing logic of
+   * the link button by setting the callback.
+   */
+  public get onCustomClickLinkButton():
+    | CustomClickLinkButtonCallback
+    | undefined {
+    return this._onCustomClickLinkButton;
+  }
+  public set onCustomClickLinkButton(
+    value: CustomClickLinkButtonCallback | undefined
+  ) {
+    this._onCustomClickLinkButton = value;
+    ShoppingModule.setCustomClickLinkButtonEnabled(!!value);
+  }
+  private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;
+
   /**
    * Defaults to true.
    * You can hide the cart icon by setting this property to false.
@@ -75,7 +88,13 @@ class VideoShopping {
   }
   public set cartIconVisible(value: boolean) {
     this._cartIconVisible = value;
-    ShoppingModule.setCartIconVisible(value);
+    if (FWGlobalState.getInstance().sdkInitCalled) {
+      ShoppingModule.setCartIconVisible(value);
+    } else {
+      FWGlobalState.getInstance().sdkInitCalledPromise.then(() => {
+        ShoppingModule.setCartIconVisible(value);
+      });
+    }
   }
   private _cartIconVisible: boolean = true;
 
@@ -93,33 +112,19 @@ class VideoShopping {
     value: ProductInfoViewConfiguration | undefined
   ) {
     this._productInfoViewConfiguration = value;
-    ShoppingModule.setProductInfoViewConfiguration(value ?? {});
+    if (FWGlobalState.getInstance().sdkInitCalled) {
+      ShoppingModule.setProductInfoViewConfiguration(value ?? {});
+    } else {
+      FWGlobalState.getInstance().sdkInitCalledPromise.then(() => {
+        ShoppingModule.setProductInfoViewConfiguration(value ?? {});
+      });
+    }
   }
 
   private _productInfoViewConfiguration?:
     | ProductInfoViewConfiguration
     | undefined;
 
-  /**
-   * This callback is triggered when the user clicks
-   * the link button next to Add to cart button.
-   *
-   * The host app can customize the click event processing logic of
-   * the link button by setting the callback.
-   */
-  public get onCustomClickLinkButton():
-    | CustomClickLinkButtonCallback
-    | undefined {
-    return this._onCustomClickLinkButton;
-  }
-  public set onCustomClickLinkButton(
-    value: CustomClickLinkButtonCallback | undefined
-  ) {
-    this._onCustomClickLinkButton = value;
-    ShoppingModule.setCustomClickLinkButtonEnabled(!!value);
-  }
-  private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;
-
   private get eventEmitter(): NativeEventEmitter {
     return ShoppingModuleEventEmitter;
   }
@@ -177,7 +182,10 @@ class VideoShopping {
    * If cound > 0, we will show the red indicator on the cart icon.
    * Otherwise, we will hide the red indicator on the cart icon.
    */
-  public setCartItemCount(count: number) {
+  public async setCartItemCount(count: number): Promise<void> {
+    if (!FWGlobalState.getInstance().sdkInitCalled) {
+      await FWGlobalState.getInstance().sdkInitCalledPromise;
+    }
     ShoppingModule.setCartItemCount(count);
   }
 

package/src/components/StoryBlock.tsx

@@ -22,8 +22,10 @@ import FireworkSDK from '../FireworkSDK';
 import type AdConfiguration from '../models/AdConfiguration';
 import type FWError from '../models/FWError';
 import { FWEventName } from '../models/FWEventName';
+import type { StoryBlockConfiguration } from '../models/StoryBlockConfiguration';
 import type { StoryBlockSource } from '../models/StoryBlockSource';
 import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
+import FWGlobalState from '../utils/FWGlobalState';
 import FWLoggerUtil from '../utils/FWLoggerUtil';
 import FWStoryBlock from './FWStoryBlock';
 
@@ -79,6 +81,10 @@ export interface IStoryBlockProps {
    * Ad configuration of the feed. Only supported on iOS.
    */
   adConfiguration?: AdConfiguration;
+
+  /* The configuration of the story block.
+   Only supported on Android.*/
+  storyBlockConfiguration?: StoryBlockConfiguration;
   /**
    * The feed loading result callback. It means loading successfully when error equals to undefined.
    */
@@ -91,95 +97,10 @@ const StoryBlock: ForwardRefRenderFunction<
 > = (props: IStoryBlockProps, forwardedRef) => {
   const nativeComponentRef = useRef(null);
   const [isFullscreenState, setIsFullscreenState] = useState<boolean>(false);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-  useImperativeHandle(
-    forwardedRef,
-    () => {
-      const sendCommand = (command: string) => {
-        const nativeNodeHandle = findNodeHandle(nativeComponentRef.current);
-
-        let commandId: string | number =
-          UIManager.getViewManagerConfig(NativeComponentName).Commands[command];
-        if (Platform.OS === 'android') {
-          commandId = commandId.toString();
-        }
-
-        UIManager.dispatchViewManagerCommand(
-          findNodeHandle(nativeNodeHandle),
-          commandId,
-          []
-        );
-      };
-      return {
-        play: () => {
-          sendCommand('play');
-        },
-        pause: () => {
-          sendCommand('pause');
-        },
-      };
-    },
-    []
+  const [sdkInitCalled, setSdkInitCalled] = useState<boolean>(
+    FWGlobalState.getInstance().sdkInitCalled
   );
-  useEffect(() => {
-    const subscriptionOfShareBaseURLUpdated =
-      FireworkSDKModuleEventEmitter.addListener(
-        FWEventName.ShareBaseURLUpdated,
-        () => {
-          FWLoggerUtil.log('Receive FWEventName.ShareBaseURLUpdated');
-          forceUpdate();
-        }
-      );
-    const subscriptionOfAdBadgeConfigurationUpdated =
-      FireworkSDKModuleEventEmitter.addListener(
-        FWEventName.AdBadgeConfigurationUpdated,
-        () => {
-          FWLoggerUtil.log('Receive FWEventName.AdBadgeConfigurationUpdated');
-          forceUpdate();
-        }
-      );
-
-    const subscriptionOfVideoLaunchBehaviorUpdated =
-      FireworkSDKModuleEventEmitter.addListener(
-        FWEventName.VideoLaunchBehaviorUpdated,
-        () => {
-          FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
-          forceUpdate();
-        }
-      );
-
-    const subscriptionOfAppLanguageUpdated =
-      FireworkSDKModuleEventEmitter.addListener(
-        FWEventName.AppLanguageUpdated,
-        () => {
-          FWLoggerUtil.log('Receive FWEventName.AppLanguageUpdated');
-          if (Platform.OS === 'android') {
-            forceUpdate();
-          }
-        }
-      );
-
-    if (Platform.OS === 'android') {
-      setTimeout(() => {
-        const viewId = findNodeHandle(nativeComponentRef.current);
-        FWLoggerUtil.log(`StoryBlock createFragment viewId: ${viewId}`);
-        UIManager.dispatchViewManagerCommand(
-          viewId,
-          UIManager.getViewManagerConfig(
-            NativeComponentName
-          ).Commands.create.toString(),
-          [viewId]
-        );
-      }, 500);
-    }
-
-    return () => {
-      subscriptionOfShareBaseURLUpdated.remove();
-      subscriptionOfAdBadgeConfigurationUpdated.remove();
-      subscriptionOfVideoLaunchBehaviorUpdated.remove();
-      subscriptionOfAppLanguageUpdated.remove();
-    };
-  }, []);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
   const handleStoryBlockLoadFinished = (event: NativeSyntheticEvent<any>) => {
     FWLoggerUtil.log(
@@ -202,11 +123,11 @@ const StoryBlock: ForwardRefRenderFunction<
     }
   };
 
-  const handleStoryBlockFullscreenStateChanged = (
+  const handleStoryBlockFullScreenStateChanged = (
     event: NativeSyntheticEvent<any>
   ) => {
     FWLoggerUtil.log(
-      `StoryBlock handleStoryBlockFullscreenStateChanged ${event.nativeEvent.isFullScreen}`
+      `StoryBlock handleStoryBlockFullScreenStateChanged ${event.nativeEvent.isFullScreen}`
     );
     const { isFullScreen } = event.nativeEvent;
     setIsFullscreenState(isFullScreen);
@@ -255,13 +176,17 @@ const StoryBlock: ForwardRefRenderFunction<
   const generateKey = (): string => {
     const gShareBaseURL = FireworkSDK.getInstance().shareBaseURL ?? '';
     const appLanguage = FireworkSDK.getInstance().appLanguage ?? '';
+    const videoLaunchBehavior =
+      FireworkSDK.getInstance().videoLaunchBehavior ?? '';
     const adBadgeConfiguration =
       FireworkSDK.getInstance().adBadgeConfiguration ?? {};
     const adBadgeTextType = adBadgeConfiguration.badgeTextType ?? '';
     const backgroundColorOfAdBadge = adBadgeConfiguration.backgroundColor ?? '';
     const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
-    const videoLaunchBehavior =
-      FireworkSDK.getInstance().videoLaunchBehavior ?? 'default';
+    const androidFontIsCustomOfAdBadge =
+      adBadgeConfiguration.androidFontInfo?.isCustom?.toString() ?? '';
+    const androidFontTypefaceNameOfAdBadge =
+      adBadgeConfiguration.androidFontInfo?.typefaceName ?? '';
 
     const {
       source,
@@ -270,11 +195,30 @@ const StoryBlock: ForwardRefRenderFunction<
       hashtagFilterExpression = '',
       enablePictureInPicture = false,
       adConfiguration,
+      storyBlockConfiguration,
     } = props;
     const dynamicContentParametersString =
       generateDynamicContentParametersString();
 
-    const requiresAds = adConfiguration?.requiresAds ?? false;
+    const videoCompleteAction =
+      storyBlockConfiguration?.videoCompleteAction ?? '';
+    const showShareButton =
+      storyBlockConfiguration?.showShareButton?.toString() ?? '';
+    const showPlaybackButton =
+      storyBlockConfiguration?.showPlaybackButton?.toString() ?? '';
+    const showBranding =
+      storyBlockConfiguration?.showBranding?.toString() ?? '';
+    const ctaDelayType = storyBlockConfiguration?.ctaDelay?.type ?? '';
+    const ctaDelayValue =
+      storyBlockConfiguration?.ctaDelay?.value?.toFixed(5) ?? '';
+    const ctaHighlightDelayType =
+      storyBlockConfiguration?.ctaHighlightDelay?.type ?? '';
+    const ctaHighlightDelayValue =
+      storyBlockConfiguration?.ctaHighlightDelay?.value?.toFixed(5) ?? '';
+    const shareBaseURL = storyBlockConfiguration?.shareBaseURL ?? '';
+    const ctaWidth = storyBlockConfiguration?.ctaWidth ?? '';
+
+    const requiresAds = adConfiguration?.requiresAds?.toString() ?? '';
     const adsFetchTimeout = adConfiguration?.adsFetchTimeout ?? 10;
     const vastAttributesString = generateVastAttributesString();
 
@@ -282,10 +226,14 @@ const StoryBlock: ForwardRefRenderFunction<
     if (Platform.OS === 'ios') {
       key += `_appLanguage:${appLanguage}`;
     }
+    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
     key += `_adBadgeTextType:${adBadgeTextType}`;
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
-    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
+    if (Platform.OS === 'android') {
+      key += `_androidFontIsCustomOfAdBadge${androidFontIsCustomOfAdBadge}`;
+      key += `_androidFontTypefaceNameOfAdBadge${androidFontTypefaceNameOfAdBadge}`;
+    }
 
     key += `_source:${source}`;
     key += `_channel:${channel}`;
@@ -294,6 +242,19 @@ const StoryBlock: ForwardRefRenderFunction<
     key += `_hashtagFilterExpression:${hashtagFilterExpression}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
 
+    key += `_shareBaseURL:${shareBaseURL}`;
+    if (Platform.OS === 'android') {
+      key += `_videoCompleteAction:${videoCompleteAction}`;
+      key += `_showShareButton:${showShareButton}`;
+      key += `_showPlaybackButton:${showPlaybackButton}`;
+      key += `_showBranding:${showBranding}`;
+      key += `_ctaDelayType:${ctaDelayType}`;
+      key += `_ctaDelayValue:${ctaDelayValue}`;
+      key += `_ctaHighlightDelayType:${ctaHighlightDelayType}`;
+      key += `_ctaHighlightDelayValue:${ctaHighlightDelayValue}`;
+      key += `_ctaWidth:${ctaWidth}`;
+    }
+
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
     key += `_vastAttributes:${vastAttributesString}`;
@@ -301,6 +262,106 @@ const StoryBlock: ForwardRefRenderFunction<
     return key;
   };
 
+  const key = generateKey();
+
+  useImperativeHandle(
+    forwardedRef,
+    () => {
+      const sendCommand = (command: string) => {
+        const nativeNodeHandle = findNodeHandle(nativeComponentRef.current);
+
+        let commandId: string | number =
+          UIManager.getViewManagerConfig(NativeComponentName).Commands[command];
+        if (Platform.OS === 'android') {
+          commandId = commandId.toString();
+        }
+
+        UIManager.dispatchViewManagerCommand(
+          findNodeHandle(nativeNodeHandle),
+          commandId,
+          []
+        );
+      };
+      return {
+        play: () => {
+          sendCommand('play');
+        },
+        pause: () => {
+          sendCommand('pause');
+        },
+      };
+    },
+    []
+  );
+
+  useEffect(() => {
+    const subscriptionOfShareBaseURLUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.ShareBaseURLUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.ShareBaseURLUpdated');
+          forceUpdate();
+        }
+      );
+    const subscriptionOfAdBadgeConfigurationUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.AdBadgeConfigurationUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.AdBadgeConfigurationUpdated');
+          forceUpdate();
+        }
+      );
+
+    const subscriptionOfVideoLaunchBehaviorUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.VideoLaunchBehaviorUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
+          forceUpdate();
+        }
+      );
+
+    const subscriptionOfAppLanguageUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.AppLanguageUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.AppLanguageUpdated');
+          if (Platform.OS === 'android') {
+            forceUpdate();
+          }
+        }
+      );
+
+    return () => {
+      subscriptionOfShareBaseURLUpdated.remove();
+      subscriptionOfAdBadgeConfigurationUpdated.remove();
+      subscriptionOfVideoLaunchBehaviorUpdated.remove();
+      subscriptionOfAppLanguageUpdated.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      setTimeout(() => {
+        const viewId = findNodeHandle(nativeComponentRef.current);
+        FWLoggerUtil.log(`StoryBlock createFragment viewId: ${viewId}`);
+        UIManager.dispatchViewManagerCommand(
+          viewId,
+          UIManager.getViewManagerConfig(
+            NativeComponentName
+          ).Commands.create.toString(),
+          [viewId]
+        );
+      }, 500);
+    }
+  }, [key]);
+
+  useEffect(() => {
+    FWGlobalState.getInstance().sdkInitCalledPromise.then(() => {
+      setSdkInitCalled(true);
+    });
+  }, []);
+
   useEffect(() => {
     if (Platform.OS === 'android') {
       const onBackPress = () => {
@@ -322,17 +383,19 @@ const StoryBlock: ForwardRefRenderFunction<
     return;
   }, [isFullscreenState]);
 
-  const { style } = props;
+  if (!sdkInitCalled) {
+    return null;
+  }
+
   return (
     <FWStoryBlock
       ref={nativeComponentRef}
-      key={generateKey()}
+      key={key}
       {...props}
       onStoryBlockLoadFinished={handleStoryBlockLoadFinished}
       onStoryBlockFullScreenStateChanged={
-        handleStoryBlockFullscreenStateChanged
+        handleStoryBlockFullScreenStateChanged
       }
-      style={Object.assign({}, style, { zIndex: -1 })}
     />
   );
 };