@shortkitsdk/react-native 0.2.6 → 0.2.12

package/android/src/main/java/com/shortkit/reactnative/ShortKitFeedView.kt

@@ -9,17 +9,14 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
 import androidx.fragment.app.FragmentActivity
-import androidx.viewpager2.widget.ViewPager2
-import com.facebook.react.uimanager.util.ReactFindViewUtil
-import com.shortkit.ShortKitFeedFragment
+import com.shortkit.sdk.feed.ShortKitFeedFragment
 
 /**
  * Fabric native view that embeds [ShortKitFeedFragment] using Android
  * Fragment transactions. Props are set by [ShortKitFeedViewManager].
  *
- * Also tracks the feed's scroll offset via [ViewPager2.OnPageChangeCallback]
- * and applies native translation transforms to the sibling RN overlay views
- * so they move with the active cell during swipe transitions.
+ * The native SDK owns overlay lifecycle via [ReactOverlayHost] and
+ * [ReactCarouselOverlayHost] — this view is purely a fragment container.
  *
  * Android equivalent of iOS `ShortKitFeedView.swift`.
  */
@@ -30,44 +27,92 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
     // -----------------------------------------------------------------------
 
     var config: String? = null
-    var overlayType: String? = null
+    var feedId: String? = null
+    var startAtItemId: String? = null
+    var preloadId: String? = null
 
     // -----------------------------------------------------------------------
     // Fragment management
     // -----------------------------------------------------------------------
 
     private var feedFragment: ShortKitFeedFragment? = null
+    private val fragmentContainer: FrameLayout
     private var fragmentContainerId: Int = View.generateViewId()
     private val handler = Handler(Looper.getMainLooper())
 
+    // The React Native-assigned size. Stored so we can re-apply it after the
+    // SDK's forceLayoutIfNeeded potentially re-measures to full-screen size.
+    private var rnWidth: Int = 0
+    private var rnHeight: Int = 0
+
     init {
-        id = fragmentContainerId
+        // Use a child FrameLayout as the fragment container. Fabric overrides
+        // this view's own id, so we can't use it as the fragment container.
+        fragmentContainer = FrameLayout(context).apply {
+            id = fragmentContainerId
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        }
+        addView(fragmentContainer)
     }
 
     // -----------------------------------------------------------------------
-    // Scroll tracking
+    // Fabric layout workarounds
     // -----------------------------------------------------------------------
 
-    private var viewPager: ViewPager2? = null
-    private var pageChangeCallback: ViewPager2.OnPageChangeCallback? = null
-
-    /** Video overlay for the currently active cell (nativeID="overlay-current"). */
-    private var currentOverlayView: View? = null
-
-    /** Video overlay for the upcoming cell (nativeID="overlay-next"). */
-    private var nextOverlayView: View? = null
+    /**
+     * Fabric intercepts requestLayout() and doesn't propagate measure/layout
+     * to programmatically-added children. Override to schedule a manual pass.
+     */
+    override fun requestLayout() {
+        super.requestLayout()
+        @Suppress("UNNECESSARY_SAFE_CALL")
+        handler?.post(layoutRunnable)
+    }
 
-    /** Carousel overlay for the currently active cell (nativeID="carousel-overlay-current"). */
-    private var currentCarouselOverlayView: View? = null
+    private val layoutRunnable = Runnable {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        )
+        layout(left, top, right, bottom)
+    }
 
-    /** Carousel overlay for the upcoming cell (nativeID="carousel-overlay-next"). */
-    private var nextCarouselOverlayView: View? = null
+    /**
+     * Re-apply the React Native-assigned size to the fragment container and
+     * all descendants (fragment root, VP, RV). The SDK's forceLayoutIfNeeded
+     * may have sized them to the full activity height instead.
+     */
+    private val constrainRunnable = Runnable {
+        val w = rnWidth
+        val h = rnHeight
+        if (w == 0 || h == 0) return@Runnable
+
+        val fragView = feedFragment?.view ?: return@Runnable
+        val wSpec = MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY)
+        val hSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY)
+
+        // Re-pin container
+        fragmentContainer.measure(wSpec, hSpec)
+        fragmentContainer.layout(0, 0, w, h)
+
+        // Re-pin fragment root, VP, and RV if they got the wrong size
+        if (fragView.height != h) {
+            fragView.measure(wSpec, hSpec)
+            fragView.layout(0, 0, w, h)
+        }
 
-    /** The page index used for overlay transform calculations. */
-    private var currentPage: Int = 0
+        val vp = findViewPager2(fragView)
+        if (vp != null && vp.height != h) {
+            vp.measure(wSpec, hSpec)
+            vp.layout(0, 0, w, h)
+            val rv = vp.getChildAt(0) as? ViewGroup
+            if (rv != null) {
+                rv.measure(wSpec, hSpec)
+                rv.layout(0, 0, w, h)
+            }
+        }
+    }
 
-    /** Deferred page update to avoid flashing stale metadata. */
-    private var pageUpdateRunnable: Runnable? = null
 
     // -----------------------------------------------------------------------
     // Lifecycle
@@ -75,12 +120,21 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
 
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
-        embedFeedFragmentIfNeeded()
+        // Defer to the next message-loop tick. onAttachedToWindow can fire
+        // during a parent fragment transaction (e.g. react-native-screens
+        // ScreenStack.onUpdate), and FragmentManager forbids nested
+        // commitNow calls. Posting ensures we run after the outer
+        // transaction completes — still before the first draw pass.
+        handler.post {
+            if (isAttachedToWindow) embedFeedFragmentIfNeeded()
+        }
     }
 
     override fun onDetachedFromWindow() {
-        teardownScrollTracking()
-        removeFeedFragment()
+        synchronized(ShortKitBridge.staticPendingFeedViews) {
+            ShortKitBridge.staticPendingFeedViews.remove(this)
+        }
+        suspendFeedFragment()
         super.onDetachedFromWindow()
     }
 
@@ -88,233 +142,177 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
     // Fragment containment
     // -----------------------------------------------------------------------
 
-    private fun embedFeedFragmentIfNeeded() {
-        if (feedFragment != null) return
+    internal fun embedFeedFragmentIfNeeded() {
+        val activity = getReactActivity()
+        if (activity == null) {
+            Log.e(TAG, "embedFeedFragment: FragmentActivity not found in context chain")
+            return
+        }
 
-        val sdk = ShortKitModule.shared?.sdk ?: run {
-            Log.w(TAG, "ShortKit SDK not initialized. Call ShortKitModule.initialize() first.")
+        // Show a hidden fragment (e.g. returning to this tab).
+        // Using hide()/show() instead of detach()/attach() preserves the
+        // entire view hierarchy (ViewPager, RecyclerView, player surface)
+        // so there is zero flicker — matching iOS behavior exactly.
+        val existingFragment = feedFragment
+        if (existingFragment != null) {
+            if (existingFragment.isHidden) {
+                try {
+                    activity.supportFragmentManager
+                        .beginTransaction()
+                        .show(existingFragment)
+                        .commitNowAllowingStateLoss()
+                    existingFragment.activate()
+                } catch (e: Exception) {
+                    Log.e(TAG, "Failed to show feed fragment", e)
+                }
+            }
+            feedId?.let { id ->
+                ShortKitBridge.shared?.registerFeed(id)
+                ShortKitBridge.shared?.registerFeedFragment(id, existingFragment)
+            }
             return
         }
 
-        val activity = getReactActivity() ?: run {
-            Log.w(TAG, "Could not find hosting Activity.")
+        val sdk = ShortKitBridge.shared?.sdk ?: run {
+            synchronized(ShortKitBridge.staticPendingFeedViews) {
+                ShortKitBridge.staticPendingFeedViews.add(this)
+            }
             return
         }
 
-        val fragment = ShortKitFeedFragment.newInstance(sdk)
+        var feedConfig = ShortKitBridge.parseFeedConfig(config ?: "{}", context)
+
+        preloadId?.let { id ->
+            val preload = ShortKitBridge.shared?.consumePreload(id)
+            if (preload != null) {
+                feedConfig = feedConfig.copy(preload = preload)
+            }
+        }
+
+        val fragment = ShortKitFeedFragment.newInstance(sdk, feedConfig, startAtItemId)
 
         try {
             activity.supportFragmentManager
                 .beginTransaction()
                 .replace(fragmentContainerId, fragment)
                 .commitNowAllowingStateLoss()
-            this.feedFragment = fragment  // Only assign after successful commit
-            setupScrollTracking(fragment)
+            this.feedFragment = fragment
+
+            // View.generateViewId() can return IDs that collide with Fabric-
+            // managed views (e.g. ReactSurfaceView also gets id=1).  When that
+            // happens, FragmentManager.replace() places the fragment view in
+            // the wrong parent.  Detect and correct this by reparenting.
+            val fragView = fragment.view
+            val fragParent = fragView?.parent
+            if (fragParent != null && fragParent !== fragmentContainer) {
+                Log.w(TAG, "embedFeedFragment: reparenting — fragment placed in ${fragParent.javaClass.simpleName} due to ID collision")
+                (fragParent as? ViewGroup)?.removeView(fragView)
+                fragmentContainer.addView(fragView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+            }
+
+            // Pin the fragment container to the React Native-assigned size.
+            // Without this, MATCH_PARENT causes Android to re-measure the
+            // container to the full activity size, and the SDK's deferred
+            // layout forcing picks up the wrong (full-screen) dimensions.
+            rnWidth = measuredWidth
+            rnHeight = measuredHeight
+            fragmentContainer.layoutParams = LayoutParams(measuredWidth, measuredHeight)
+            fragmentContainer.measure(
+                MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY)
+            )
+            fragmentContainer.layout(0, 0, measuredWidth, measuredHeight)
+            // Schedule a delayed re-pin: the SDK's forceLayoutIfNeeded will
+            // run when deferCellSetup exhausts retries (~3 post ticks later)
+            // and may size the VP/RV to the wrong dimensions. Re-apply our
+            // correct RN size after it runs.
+            handler.postDelayed(constrainRunnable, 500)
+
+            if (measuredWidth == 0 || measuredHeight == 0) {
+                Log.w(TAG, "embedFeedFragment: WARNING — container is 0x0, overlays will be invisible. Check if parent has display:none or flex:0")
+            }
+
+            feedId?.let { id ->
+                ShortKitBridge.shared?.registerFeed(id)
+                ShortKitBridge.shared?.registerFeedFragment(id, fragment)
+            }
         } catch (e: Exception) {
             Log.e(TAG, "Failed to embed feed fragment", e)
         }
     }
 
-    private fun removeFeedFragment() {
+    /**
+     * Hide the fragment without destroying its view hierarchy (mirrors iOS
+     * `suspendFeedViewController`). Using hide() instead of detach() keeps
+     * the ViewPager, RecyclerView, player surface, and all overlay views
+     * alive in memory — so returning to the tab is instant with no flicker.
+     */
+    private fun suspendFeedFragment() {
+        feedId?.let { id ->
+            ShortKitBridge.shared?.unregisterFeed(id)
+            ShortKitBridge.shared?.unregisterFeedFragment(id)
+        }
         val fragment = feedFragment ?: return
-        feedFragment = null  // Clear immediately to prevent leaks on early return
 
         try {
+            fragment.deactivate()
             val activity = getReactActivity() ?: return
             activity.supportFragmentManager
                 .beginTransaction()
-                .remove(fragment)
+                .hide(fragment)
                 .commitNowAllowingStateLoss()
         } catch (e: IllegalStateException) {
-            // Expected during Activity teardown — fragment already being destroyed
+            // Expected during Activity teardown — fall back to full destroy
+            feedFragment = null
         } catch (e: Exception) {
-            Log.e(TAG, "Unexpected error removing feed fragment", e)
-        }
-    }
-
-    // -----------------------------------------------------------------------
-    // Scroll tracking
-    // -----------------------------------------------------------------------
-
-    private fun setupScrollTracking(fragment: ShortKitFeedFragment) {
-        val pager = findViewPager2(fragment.view ?: return) ?: run {
-            Log.w(TAG, "Could not find ViewPager2 in feed fragment hierarchy.")
-            return
-        }
-        viewPager = pager
-
-        val callback = object : ViewPager2.OnPageChangeCallback() {
-            override fun onPageScrolled(
-                position: Int,
-                positionOffset: Float,
-                positionOffsetPixels: Int
-            ) {
-                handleScrollOffset(position, positionOffset, positionOffsetPixels)
-            }
-        }
-        pageChangeCallback = callback
-        pager.registerOnPageChangeCallback(callback)
-    }
-
-    private fun teardownScrollTracking() {
-        pageUpdateRunnable?.let { handler.removeCallbacks(it) }
-        pageUpdateRunnable = null
-        pageChangeCallback?.let { viewPager?.unregisterOnPageChangeCallback(it) }
-        pageChangeCallback = null
-        viewPager = null
-        currentOverlayView?.translationY = 0f
-        nextOverlayView?.translationY = 0f
-        currentCarouselOverlayView?.translationY = 0f
-        nextCarouselOverlayView?.translationY = 0f
-        currentOverlayView = null
-        nextOverlayView = null
-        currentCarouselOverlayView = null
-        nextCarouselOverlayView = null
-    }
-
-    private fun handleScrollOffset(
-        position: Int,
-        positionOffset: Float,
-        positionOffsetPixels: Int
-    ) {
-        val cellHeight = height.toFloat()
-        if (cellHeight <= 0) return
-
-        // Detect page change, but DEFER updating currentPage.
-        //
-        // Why: when the scroll settles on a new page, overlay-current still
-        // shows the OLD page's metadata (React hasn't processed OVERLAY_ACTIVATE
-        // yet). If we update currentPage immediately, delta snaps to 0 and
-        // overlay-current becomes visible with stale data.
-        //
-        // By deferring ~80ms, overlay-next (which already shows the correct
-        // data via NextOverlayProvider) stays visible at y=0 while React
-        // processes the state update.
-        if (positionOffset == 0f) {
-            if (position != currentPage && pageUpdateRunnable == null) {
-                val targetPage = position
-                val runnable = Runnable {
-                    currentPage = targetPage
-                    pageUpdateRunnable = null
-                    // Reapply overlay transforms now that currentPage is updated.
-                    // Without this, overlay-next (static NextOverlayProvider state)
-                    // stays visible at y=0 while overlay-current (live state) stays
-                    // hidden — no scroll event fires to trigger handleScrollOffset.
-                    val h = height.toFloat()
-                    currentOverlayView?.translationY = 0f
-                    nextOverlayView?.translationY = h
-                    currentCarouselOverlayView?.translationY = 0f
-                    nextCarouselOverlayView?.translationY = h
-                }
-                pageUpdateRunnable = runnable
-                handler.postDelayed(runnable, 80)
-            }
-        } else if (pageUpdateRunnable != null) {
-            // User is scrolling again — apply pending update immediately
-            // so transforms stay aligned for the new gesture.
-            handler.removeCallbacks(pageUpdateRunnable!!)
-            pageUpdateRunnable = null
-            currentPage = position
-        }
-
-        // positionOffset is 0.0 when settled, approaches 1.0 during forward scroll.
-        // position is the index of the page currently filling most of the screen.
-        val delta: Float = if (position >= currentPage) {
-            // Forward scroll (or idle)
-            positionOffsetPixels.toFloat()
-        } else {
-            // Backward scroll: position dropped below currentPage
-            -(cellHeight - positionOffsetPixels.toFloat())
-        }
-
-        // Find the overlay views if not cached
-        if (currentOverlayView == null || nextOverlayView == null) {
-            findOverlayViews()
-        }
-        if (currentCarouselOverlayView == null || nextCarouselOverlayView == null) {
-            findCarouselOverlayViews()
-        }
-
-        // Current overlays follow the active cell
-        currentOverlayView?.translationY = -delta
-        currentCarouselOverlayView?.translationY = -delta
-
-        // Next overlays: positioned one page ahead in the scroll direction
-        if (delta >= 0) {
-            // Forward scroll (or idle): next cell is below
-            val nextY = cellHeight - delta
-            nextOverlayView?.translationY = nextY
-            nextCarouselOverlayView?.translationY = nextY
-        } else {
-            // Backward scroll: next cell is above
-            val nextY = -cellHeight - delta
-            nextOverlayView?.translationY = nextY
-            nextCarouselOverlayView?.translationY = nextY
+            Log.e(TAG, "Unexpected error suspending feed fragment", e)
+            feedFragment = null
         }
     }
 
     /**
-     * Find the sibling RN overlay views by nativeID.
-     *
-     * In Fabric interop, this view may be wrapped in an intermediate
-     * ViewGroup, so `getParent()` may not be the React `<View>` container
-     * from ShortKitFeed.tsx. We walk up the ancestor chain until we find
-     * the overlays.
+     * Called by [ShortKitFeedViewManager.onDropViewInstance] when React
+     * unmounts the native view. Performs a full fragment teardown.
      */
-    private fun findOverlayViews() {
-        var ancestor = parent as? ViewGroup ?: return
-        while (true) {
-            for (i in 0 until ancestor.childCount) {
-                val child = ancestor.getChildAt(i)
-                if (child === this || isOwnAncestor(child)) continue
-
-                if (currentOverlayView == null) {
-                    currentOverlayView = ReactFindViewUtil.findView(child, "overlay-current")
-                }
-                if (nextOverlayView == null) {
-                    nextOverlayView = ReactFindViewUtil.findView(child, "overlay-next")
-                }
-            }
-            if (currentOverlayView != null && nextOverlayView != null) return
-            ancestor = ancestor.parent as? ViewGroup ?: return
-        }
+    fun destroy() {
+        handler.removeCallbacks(constrainRunnable)
+        handler.removeCallbacks(layoutRunnable)
+        destroyFeedFragment()
     }
 
     /**
-     * Find the sibling RN carousel overlay views by nativeID.
+     * Full teardown — removes the fragment from FragmentManager entirely.
+     * Called when the Fabric view is being destroyed (not just hidden).
      */
-    private fun findCarouselOverlayViews() {
-        var ancestor = parent as? ViewGroup ?: return
-        while (true) {
-            for (i in 0 until ancestor.childCount) {
-                val child = ancestor.getChildAt(i)
-                if (child === this || isOwnAncestor(child)) continue
-
-                if (currentCarouselOverlayView == null) {
-                    currentCarouselOverlayView = ReactFindViewUtil.findView(child, "carousel-overlay-current")
-                }
-                if (nextCarouselOverlayView == null) {
-                    nextCarouselOverlayView = ReactFindViewUtil.findView(child, "carousel-overlay-next")
-                }
-            }
-            if (currentCarouselOverlayView != null && nextCarouselOverlayView != null) return
-            ancestor = ancestor.parent as? ViewGroup ?: return
+    private fun destroyFeedFragment() {
+        feedId?.let { id ->
+            ShortKitBridge.shared?.unregisterFeed(id)
+            ShortKitBridge.shared?.unregisterFeedFragment(id)
         }
-    }
+        val fragment = feedFragment ?: return
+        fragment.deactivate()
+        feedFragment = null
 
-    /** Check if the given view is an ancestor of this view. */
-    private fun isOwnAncestor(view: View): Boolean {
-        var current: ViewParent? = parent
-        while (current != null) {
-            if (current === view) return true
-            current = current.parent
+        try {
+            val activity = getReactActivity() ?: return
+            activity.supportFragmentManager
+                .beginTransaction()
+                .remove(fragment)
+                .commitNowAllowingStateLoss()
+        } catch (e: IllegalStateException) {
+            // Expected during Activity teardown
+        } catch (e: Exception) {
+            Log.e(TAG, "Unexpected error removing feed fragment", e)
         }
-        return false
     }
 
-    /** Recursively find the first [ViewPager2] in a view hierarchy. */
-    private fun findViewPager2(view: View): ViewPager2? {
-        if (view is ViewPager2) return view
+    // -----------------------------------------------------------------------
+    // Helpers
+    // -----------------------------------------------------------------------
+
+    /** Recursively find the first ViewPager2 in a view hierarchy. */
+    private fun findViewPager2(view: View): androidx.viewpager2.widget.ViewPager2? {
+        if (view is androidx.viewpager2.widget.ViewPager2) return view
         if (view is ViewGroup) {
             for (i in 0 until view.childCount) {
                 findViewPager2(view.getChildAt(i))?.let { return it }
@@ -323,13 +321,8 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
         return null
     }
 
-    // -----------------------------------------------------------------------
-    // Helpers
-    // -----------------------------------------------------------------------
-
     /**
      * Walk the context wrapper chain to find the hosting [FragmentActivity].
-     * React Native's [ThemedReactContext] wraps the Activity, so we unwrap it.
      */
     private fun getReactActivity(): FragmentActivity? {
         var ctx = context

package/android/src/main/java/com/shortkit/reactnative/ShortKitFeedViewManager.kt

@@ -15,16 +15,30 @@ class ShortKitFeedViewManager : SimpleViewManager<ShortKitFeedView>() {
         return ShortKitFeedView(context)
     }
 
+    @ReactProp(name = "feedId")
+    fun setFeedId(view: ShortKitFeedView, feedId: String?) {
+        view.feedId = feedId
+    }
+
     @ReactProp(name = "config")
     fun setConfig(view: ShortKitFeedView, config: String?) {
         view.config = config
     }
 
-    @ReactProp(name = "overlayType", defaultString = "none")
-    fun setOverlayType(view: ShortKitFeedView, overlayType: String?) {
-        view.overlayType = overlayType
+    @ReactProp(name = "startAtItemId")
+    fun setStartAtItemId(view: ShortKitFeedView, startAtItemId: String?) {
+        view.startAtItemId = startAtItemId
     }
 
+    @ReactProp(name = "preloadId")
+    fun setPreloadId(view: ShortKitFeedView, preloadId: String?) {
+        view.preloadId = preloadId
+    }
+
+    override fun onDropViewInstance(view: ShortKitFeedView) {
+        view.destroy()
+        super.onDropViewInstance(view)
+    }
 
     companion object {
         const val REACT_CLASS = "ShortKitFeedView"