react-native-firework-sdk 1.3.1-beta.9 → 1.4.1

package/android/build.gradle

@@ -168,16 +168,9 @@ def kotlin_version = getExtOrDefault('kotlinVersion')
 
 dependencies {
 
-  // optional 1: firework sdk release verison
-  def firework_sdk_version = 'debug~landmark-SNAPSHOT'
+  def firework_sdk_version = 'v5.14.3'
   implementation "com.github.loopsocial:firework_sdk:$firework_sdk_version"
 
-  // optional 2: firework sdk local version,
-  // project settings.gradle
-  //   include ':fireworklibrary'
-  //   project(':fireworklibrary').projectDir = new File('../../../firework_sdk/fireworklibrary')
-//  implementation project(path: ':fireworklibrary')
-
   // noinspection GradleDynamicVersion
   api 'com.facebook.react:react-native:+'
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
@@ -191,6 +184,7 @@ dependencies {
   implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
   implementation "com.google.code.gson:gson:2.9.0"
+  implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
 }
 
 configurations.all {

package/android/src/main/java/com/fireworksdk/bridge/FireworkSDKPackage.kt

@@ -4,6 +4,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.fireworksdk.bridge.reactnative.manager.FWStoryBlockManager
 import com.fireworksdk.bridge.reactnative.manager.FWVideoFeedManager
 import com.fireworksdk.bridge.reactnative.module.FWLiveStreamModule
 import com.fireworksdk.bridge.reactnative.module.FWNavigatorModule
@@ -17,11 +18,14 @@ class FireworkSDKPackage : ReactPackage {
           FireworkSDKModule(reactContext),
           FWVideoShoppingModule(reactContext),
           FWLiveStreamModule(reactContext),
-          FWNavigatorModule(reactContext)
+          FWNavigatorModule(reactContext),
         )
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(FWVideoFeedManager())
+        return listOf(
+          FWVideoFeedManager(),
+          FWStoryBlockManager(reactContext),
+        )
     }
 }

package/android/src/main/java/com/fireworksdk/bridge/models/FWEventName.kt

@@ -43,3 +43,7 @@ enum class FWLiveStreamEventName(val rawValue: String) {
   UserSendLike("fw:livestream:user-send-like"),
   UserSendChat("fw:livestream:user-send-chat"),
 }
+
+enum class FWStoryBlockEventName(val rawValue: String) {
+  StoryBlockLoadFinished("onStoryBlockLoadFinished"),
+}

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWStoryBlockManager.kt

@@ -0,0 +1,274 @@
+package com.fireworksdk.bridge.reactnative.manager
+
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+import android.content.IntentFilter
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.annotation.Nullable
+import androidx.appcompat.app.AppCompatActivity
+import androidx.localbroadcastmanager.content.LocalBroadcastManager
+import com.facebook.react.bridge.Dynamic
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+import com.fireworksdk.bridge.models.FWStoryBlockEventName
+import com.fireworksdk.bridge.models.FWVideoFeedPropsModel
+import com.fireworksdk.bridge.models.FWVideoFeedSource
+import com.fireworksdk.bridge.reactnative.module.FireworkSDKModule
+import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
+import com.fireworksdk.bridge.utils.FWLogUtils
+import com.loopnow.fireworklibrary.FeedType
+import com.loopnow.fireworklibrary.FwSDK
+import com.loopnow.fireworklibrary.models.VideoContentStatus
+import com.loopnow.fireworklibrary.views.FireworkPlayerFragment
+import com.loopnow.fireworklibrary.views.OnVideoContentStatusListener
+
+
+class FWStoryBlockManager(
+  private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+
+  private val videoFeedPropsModel: FWVideoFeedPropsModel by lazy { FWVideoFeedPropsModel() }
+
+  private var broadcastReceiver: BroadcastReceiver = MyReceiver()
+  private var fireworkPlayerFragment: FireworkPlayerFragment? = null
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+  private var viewId: Int? = null
+
+  override fun getName(): String {
+    return REACT_CLASS
+  }
+
+  override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
+    val filter = IntentFilter()
+    filter.addAction(FW_STORY_BLOCK_INIT_ACTION)
+    LocalBroadcastManager.getInstance(reactContext).registerReceiver(broadcastReceiver, filter)
+
+    return FrameLayout(reactContext)
+  }
+
+  @Nullable
+  override fun getCommandsMap(): Map<String, Int>? {
+    return MapBuilder.of("create", COMMAND_CREATE)
+  }
+
+  override fun receiveCommand(
+    root: FrameLayout,
+    commandId: String?,
+    args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    FWLogUtils.d { "FWStoryBlockManager receiveCommand commandId: $commandId, reactNativeViewId: $reactNativeViewId" }
+    when (commandId?.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+      else -> {}
+    }
+  }
+
+  @ReactProp(name = "source")
+  fun setSource(view: FrameLayout, source: String?) {
+    videoFeedPropsModel.source = source
+  }
+
+  @ReactProp(name = "channel")
+  fun setChannel(view: FrameLayout, channel: String?) {
+    videoFeedPropsModel.channel = channel
+  }
+
+  @ReactProp(name = "playlist")
+  fun setPlaylist(view: FrameLayout, playlist: String?) {
+    videoFeedPropsModel.playlist = playlist
+  }
+
+  @ReactProp(name = "dynamicContentParameters")
+  fun setDynamicContentParameters(view: FrameLayout, parameters: ReadableMap?) {
+    val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
+    videoFeedPropsModel.dynamicContentParameters = parametersMap
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Dynamic) {
+//    if (index == 0) propWidth = value
+//    if (index == 1) propHeight = value
+  }
+
+  private fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object : Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+//    val width = requireNotNull(propWidth)
+//    val height = requireNotNull(propHeight)
+
+    view.measure(
+      View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
+      View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY)
+    )
+
+    view.layout(view.left, view.top, view.right, view.bottom)
+  }
+
+
+  private fun createFragment(root: FrameLayout, reactNativeViewId: Int?) {
+    reactNativeViewId ?: return
+    val activity = (reactContext.currentActivity as AppCompatActivity?) ?: return
+
+    viewId = reactNativeViewId
+
+    addStoryBlockListener(reactContext)
+
+    val parentView = root.findViewById(reactNativeViewId) as ViewGroup
+//    parentView.setBackgroundColor(Color.YELLOW)
+    setupLayout(parentView)
+
+    val fireworkPlayerFragment = FireworkPlayerFragment()
+    this.fireworkPlayerFragment = fireworkPlayerFragment
+
+    FWLogUtils.d { "FWStoryBlockManager createFragment doOnAttach before" }
+    parentView.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
+      override fun onViewAttachedToWindow(v: View?) {
+        FWLogUtils.d { "FWStoryBlockManager createFragment doOnAttach" }
+//      Log.e("isAttachedToWindow", parentView.isAttachedToWindow.toString())
+        activity.supportFragmentManager
+          .beginTransaction()
+          .replace(reactNativeViewId, fireworkPlayerFragment, reactNativeViewId.toString())
+          .commitNow()
+        parentView.requestLayout()
+//      Log.e("isAttachedToWindow", fireworkPlayerFragment.isAdded.toString())
+        setStoryBlockParameters()
+      }
+
+      override fun onViewDetachedFromWindow(v: View?) {
+      }
+
+    })
+
+//    activity.lifecycleScope.launch {
+////      withContext(Dispatchers.Default) {
+////        while (!FwSDK.initialized) {
+////          delay(2000)
+////        }
+////      }
+//
+//      withContext(Dispatchers.Main) {
+//        if(FwSDK.initialized) {
+//          delay(2000)
+//          Log.e("isAttachedToWindow", parentView.isAttachedToWindow.toString())
+////          FeedFactory.getVideoFeed(13, FeedType.DISCOVER, null, null)
+//          fireworkPlayerFragment.setStoryBlockParameters(FeedType.DISCOVER)
+////          fireworkPlayerFragment.setParameters(13, null)
+//        }
+//      }
+//    }
+
+  }
+
+  private fun addStoryBlockListener(reactContext: ReactApplicationContext) {
+    val reactNativeViewId = viewId
+    reactNativeViewId ?: return
+
+    FwSDK.addOnPlayerVideoContentStatusListener(object: OnVideoContentStatusListener {
+      override fun currentStatus(status: VideoContentStatus, extra: String) {
+        when (status) {
+          VideoContentStatus.LoadingContent -> {
+            FWLogUtils.d { "FWStoryBlockManager VideoContentStatus.LoadingContent" }
+          }
+          VideoContentStatus.LoadingContentFailed -> {
+            FWLogUtils.d { "FWStoryBlockManager VideoContentStatus.LoadingContentFailed" }
+            FWEventUtils.receiveStoryBlockLoadFinishedFailedEvent(reactContext, reactNativeViewId, VideoContentStatus.LoadingContentFailed.rawValue, extra)
+          }
+          VideoContentStatus.ContentLoaded -> {
+            FWLogUtils.d { "FWStoryBlockManager VideoContentStatus.ContentLoaded" }
+            FWEventUtils.receiveStoryBlockLoadFinishedSuccessEvent(reactContext, reactNativeViewId)
+          }
+          VideoContentStatus.ContentOver -> {
+            FWLogUtils.d { "FWStoryBlockManager VideoContentStatus.ContentOver" }
+          }
+          VideoContentStatus.ContentExpired -> {
+            FWLogUtils.d { "FWStoryBlockManager VideoContentStatus.ContentExpired" }
+          }
+          else -> {}
+        }
+      }
+    })
+  }
+
+  override fun onDropViewInstance(view: FrameLayout) {
+    LocalBroadcastManager.getInstance(reactContext).unregisterReceiver(broadcastReceiver)
+    super.onDropViewInstance(view)
+  }
+
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any>? {
+    return MapBuilder.builder<String, Any>()
+      .put(FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", FWStoryBlockEventName.StoryBlockLoadFinished.rawValue)))
+      .build()
+  }
+
+  companion object {
+    private const val REACT_CLASS = "FWStoryBlock"
+    const val FW_STORY_BLOCK_INIT_ACTION = "FW_STORY_BLOCK_INIT_ACTION"
+    const val FW_STORY_BLOCK_INIT_INTENT = "FW_STORY_BLOCK_INIT_INTENT"
+    private const val COMMAND_CREATE = 1
+  }
+
+  private fun setStoryBlockParameters() {
+    FWLogUtils.d { "FWStoryBlockManager setStoryBlockParameters viewId: $viewId, source: ${videoFeedPropsModel.source}, initSuccess: ${FireworkSDKModule.initSuccess}" }
+    val source = videoFeedPropsModel.source
+    if (source.isNullOrBlank()) {
+      return
+    }
+
+    val dynamicContentParameters = videoFeedPropsModel.dynamicContentParameters
+    val channel = videoFeedPropsModel.channel
+    val playlist = videoFeedPropsModel.playlist
+
+    if (FireworkSDKModule.initSuccess) {
+      when (source) {
+        FWVideoFeedSource.DynamicContent.rawValue -> {
+          fireworkPlayerFragment?.setStoryBlockParameters(FeedType.DYNAMIC_CONTENT, channel, playlist, dynamicContentParameters)
+        }
+        FWVideoFeedSource.Playlist.rawValue -> {
+          fireworkPlayerFragment?.setStoryBlockParameters(FeedType.PLAYLIST, channel, playlist)
+        }
+        FWVideoFeedSource.Channel.rawValue -> {
+          fireworkPlayerFragment?.setStoryBlockParameters(FeedType.CHANNEL, channel)
+        }
+        else -> {
+          fireworkPlayerFragment?.setStoryBlockParameters(FeedType.DISCOVER)
+        }
+      }
+    }
+  }
+
+  inner class MyReceiver : BroadcastReceiver() {
+
+    override fun onReceive(context: Context?, intent: Intent) {
+      val initSuccess = intent.getBooleanExtra(FW_STORY_BLOCK_INIT_INTENT, false)
+      if (initSuccess) {
+        setStoryBlockParameters()
+      }
+    }
+  }
+}

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWVideoFeedManager.kt

@@ -72,11 +72,11 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
           }
           VideoContentStatus.LoadingContentFailed -> {
             FWLogUtils.d { "VideoContentStatus.LoadingContentFailed" }
-            FWEventUtils.receiveVideoFeedLoadFinishedFailedEvent(reactContext, videoFeedView.id, VideoContentStatus.LoadingContentFailed.rawValue, extra)
+            FWEventUtils.receiveVideoFeedLoadFinishedFailedEvent(reactContext, videoFeed.id, VideoContentStatus.LoadingContentFailed.rawValue, extra)
           }
           VideoContentStatus.ContentLoaded -> {
             FWLogUtils.d { "VideoContentStatus.ContentLoaded" }
-            FWEventUtils.receiveVideoFeedLoadFinishedSuccessEvent(reactContext, videoFeedView.id)
+            FWEventUtils.receiveVideoFeedLoadFinishedSuccessEvent(reactContext, videoFeed.id)
           }
           else -> {
             FWLogUtils.d { "VideoContentStatus: $status" }
@@ -114,11 +114,14 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
           }
           VideoContentStatus.LoadingContentFailed -> {
             FWLogUtils.d { "VideoContentStatus.LoadingContentFailed" }
-            FWEventUtils.receiveVideoFeedLoadFinishedFailedEvent(reactContext, playlistGroupFeedView.id, VideoContentStatus.LoadingContentFailed.rawValue, extra)
+            FWEventUtils.receiveVideoFeedLoadFinishedFailedEvent(reactContext, videoFeed.id, VideoContentStatus.LoadingContentFailed.rawValue, extra)
           }
           VideoContentStatus.ContentLoaded -> {
             FWLogUtils.d { "VideoContentStatus.ContentLoaded" }
-            FWEventUtils.receiveVideoFeedLoadFinishedSuccessEvent(reactContext, playlistGroupFeedView.id)
+            FWEventUtils.receiveVideoFeedLoadFinishedSuccessEvent(reactContext, videoFeed.id)
+          }
+          else -> {
+            FWLogUtils.d { "VideoContentStatus: $status" }
           }
         }
       }
@@ -178,11 +181,15 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     return map
   }
 
-  override fun receiveCommand(root: FWVideoFeed, commandId: Int, args: ReadableArray?) {
-    when (commandId) {
-        FWCommandConstant.FW_COMMAND_VIDEO_FEED_REFRESH -> {
-          root.refresh()
-        }
+  override fun receiveCommand(root: FWVideoFeed, commandId: String?, args: ReadableArray?) {
+    super.receiveCommand(root, commandId, args)
+    FWLogUtils.d { "FWVideoFeedManager receiveCommand commandId: $commandId" }
+    when (commandId?.toInt()) {
+      FWCommandConstant.FW_COMMAND_VIDEO_FEED_REFRESH -> {
+        FWLogUtils.d { "FWVideoFeedManager call refresh" }
+        root.refresh()
+      }
+      else -> {}
     }
   }
 

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FireworkSDKModule.kt

@@ -1,8 +1,10 @@
 package com.fireworksdk.bridge.reactnative.module
 
 import android.annotation.SuppressLint
+import android.content.Intent
 import android.content.pm.PackageManager
 import android.provider.Settings
+import androidx.localbroadcastmanager.content.LocalBroadcastManager
 import com.facebook.react.bridge.*
 import com.fireworksdk.bridge.models.FWVideoPlaybackDetails
 import com.fireworksdk.bridge.models.FWVideoPlaybackSubEventName
@@ -12,6 +14,7 @@ import org.json.JSONObject
 import com.facebook.react.bridge.ReactMethod
 import com.fireworksdk.bridge.models.FWAdBadgeConfigModel
 import com.fireworksdk.bridge.FWInitializationProvider
+import com.fireworksdk.bridge.reactnative.manager.FWStoryBlockManager
 import com.fireworksdk.bridge.reactnative.models.FireworkSDKInterface
 import com.fireworksdk.bridge.reactnative.pages.FWContainerActivity
 import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
@@ -131,6 +134,15 @@ class FireworkSDKModule(
             when (status) {
               SdkStatus.Initialized -> {
                 FWEventUtils.sendInitSuccessEvent(reactApplicationContext)
+
+                initSuccess = true
+                val intent = Intent()
+                intent.action = FWStoryBlockManager.FW_STORY_BLOCK_INIT_ACTION
+                intent.putExtra(
+                  FWStoryBlockManager.FW_STORY_BLOCK_INIT_INTENT,
+                  initSuccess
+                )
+                LocalBroadcastManager.getInstance(reactApplicationContext).sendBroadcast(intent)
               }
               SdkStatus.InitializationFailed -> {
                 FWEventUtils.sendInitFailedEvent(reactApplicationContext, extra)
@@ -278,6 +290,7 @@ class FireworkSDKModule(
   companion object {
     var appComponentName: String? = null
     var customCTALinkContentPageRouteName: String? = null
+    var initSuccess: Boolean = false
   }
 
 }

package/android/src/main/java/com/fireworksdk/bridge/reactnative/utils/FWEventUtils.kt

@@ -194,6 +194,17 @@ object FWEventUtils {
     receiveEvent(reactContext, targetTag, FWFeedViewEventName.VideoFeedLoadFinished.rawValue, eventMap)
   }
 
+  fun receiveStoryBlockLoadFinishedSuccessEvent(reactContext: ReactContext, targetTag: Int) {
+    receiveEvent(reactContext, targetTag, FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, null)
+  }
+
+  fun receiveStoryBlockLoadFinishedFailedEvent(reactContext: ReactContext, targetTag: Int, name: String, reason: String?) {
+    val eventMap = Arguments.createMap()
+    eventMap.putString("name", name)
+    eventMap.putString("reason", reason)
+    receiveEvent(reactContext, targetTag, FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, eventMap)
+  }
+
   private fun receiveEvent(reactContext: ReactContext, targetTag: Int, eventName: String, event: WritableMap?) {
     reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(
       targetTag,

package/android/src/main/res/layout/fw_bridge_fragment_videofeed.xml

@@ -10,10 +10,6 @@
     android:id="@+id/fw_bridge_videofeed"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    app:feedLayout="horizontal"
-    app:showTitle="true"
-    app:titlePosition="alignBottom"
-    app:feedType="discover"
     app:imageStyle="@style/FWFeedViewImageStyle"
     app:textStyle="@style/FWFeedViewCaptionStyle"
     />

package/ios/Components/StoryBlock.swift

@@ -0,0 +1,105 @@
+//
+//  StoryBlock.swift
+//  react-native-firework-sdk
+//
+//  Created by linjie jiang on 2022/8/11.
+//
+
+import UIKit
+import FireworkVideo
+
+@objc
+public enum StoryBlockSourceType: Int {
+    case discover, channel, playlist, dynamicContent
+}
+
+public protocol StoryBlockViewDelegate: AnyObject {
+    func storyBlockDidLoadFeed(_ view: StoryBlock);
+    func storyBlock(_ view: StoryBlock, didFailToLoadFeed error: StoryBlockError)
+}
+
+@objc
+public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
+    @objc public var sourceType: StoryBlockSourceType = .discover
+    @objc public var channel: String = ""
+    @objc public var playlist: String = ""
+    @objc public var dynamicContentParameters: [String: [String]] = [:]
+
+    public weak var delegate: StoryBlockViewDelegate?
+
+    @objc var onStoryBlockLoadFinished: RCTBubblingEventBlock?
+
+    private var storyBlockVC: StoryBlockViewController?
+
+    private var source: StoryBlockContentSource {
+        switch sourceType {
+        case .discover:
+            return .discover
+        case .channel:
+            return .channel(channelID: channel)
+        case .playlist:
+            return .channelPlaylist(channelID: channel, playlistID: playlist)
+        case .dynamicContent:
+            return .dynamicContent(channelID: channel, parameters: dynamicContentParameters)
+        }
+    }
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.clipsToBounds = true
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        self.clipsToBounds = true
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        embed()
+    }
+
+    private func embed() {
+        guard let parentVC = parentViewController else {
+            return
+        }
+        guard self.storyBlockVC == nil else {
+            return
+        }
+
+        let storyBlockVC = StoryBlockViewController(source: source)
+        storyBlockVC.delegate = self
+        self.storyBlockVC = storyBlockVC
+
+        parentVC.attachChild(storyBlockVC, to: self)
+    }
+
+
+    public override func removeFromSuperview() {
+        super.removeFromSuperview()
+        
+        guard let storyBlockVC = self.storyBlockVC else {
+            return
+        }
+        
+        storyBlockVC.pause()
+        storyBlockVC.detachFromParent()
+        self.storyBlockVC = nil
+    }
+
+    public func storyBlockDidLoadFeed(_ viewController: StoryBlockViewController) {
+        guard let delegate = self.delegate else {
+            return
+        }
+
+        delegate.storyBlockDidLoadFeed(self)
+    }
+
+    public func storyBlock(_ viewController: StoryBlockViewController, didFailToLoadFeed error: StoryBlockError) {
+        guard let delegate = self.delegate else {
+            return
+        }
+
+        delegate.storyBlock(self, didFailToLoadFeed: error)
+    }
+}

package/ios/Components/StoryBlockManager.m

@@ -0,0 +1,29 @@
+//
+//  StoryBlockManager.m
+//  react-native-firework-sdk
+//
+//  Created by linjie jiang on 2022/8/11.
+//
+
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTUIManager.h>
+#import "react_native_firework_sdk-Swift.h"
+
+@interface RCT_EXTERN_REMAP_MODULE(FWStoryBlock, StoryBlockManager, NSObject)
+
+RCT_CUSTOM_VIEW_PROPERTY(source, StoryBlockSource, StoryBlock) {
+    if (json) {
+        StoryBlockSourceType sourceType = [RCTConvert storyBlockSourceType: json];
+        view.sourceType = sourceType;
+    }
+}
+RCT_EXPORT_VIEW_PROPERTY(channel, NSString)
+RCT_EXPORT_VIEW_PROPERTY(playlist, NSString)
+RCT_EXPORT_VIEW_PROPERTY(dynamicContentParameters, NSDictionary)
+
+
+RCT_EXPORT_VIEW_PROPERTY(onStoryBlockLoadFinished, RCTBubblingEventBlock)
+
+@end
+

package/ios/Components/StoryBlockManager.swift

@@ -0,0 +1,31 @@
+//
+//  StoryBlockManager.swift
+//  react-native-firework-sdk
+//
+//  Created by linjie jiang on 2022/8/11.
+//
+
+import Foundation
+import FireworkVideo
+
+@objc(StoryBlockManager)
+class StoryBlockManager: RCTViewManager, StoryBlockViewDelegate {
+    override func view() -> UIView! {
+        let storyBlock = StoryBlock()
+        storyBlock.delegate = self
+
+        return storyBlock
+    }
+
+    override class func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    func storyBlockDidLoadFeed(_ view: StoryBlock) {
+        view.onStoryBlockLoadFinished?(nil)
+    }
+
+    func storyBlock(_ view: StoryBlock, didFailToLoadFeed error: StoryBlockError) {
+        view.onStoryBlockLoadFinished?(error.jsObject)
+    }
+}