react-native-navigation 8.8.6 → 8.8.7

package/android/src/main/java/com/reactnativenavigation/NavigationApplication.java

@@ -7,6 +7,7 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.soloader.OpenSourceMergedSoMapping;
 import com.facebook.soloader.SoLoader;
+import com.reactnativenavigation.customrow.BottomTabsCustomRowAttacher;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
@@ -45,6 +46,8 @@ public abstract class NavigationApplication extends Application implements React
         DefaultNewArchitectureEntryPoint.load();
 
         reactGateway = createReactGateway();
+
+        BottomTabsCustomRowAttacher.INSTANCE.registerOnce(this, null);
 	}
 
     /**

package/android/src/main/java/com/reactnativenavigation/NavigationPackage.kt

@@ -7,6 +7,9 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
+import android.app.Application
+import com.reactnativenavigation.customrow.BottomTabsCustomRowAttacher
+import com.reactnativenavigation.customrow.BottomTabsCustomRowModule
 import com.reactnativenavigation.options.LayoutFactory
 import com.reactnativenavigation.react.NavigationTurboModule
 import com.reactnativenavigation.react.modal.ModalViewManager
@@ -15,10 +18,16 @@ class NavigationPackage() : BaseReactPackage() {
 
     override fun getModule(name: String, context: ReactApplicationContext): NativeModule? {
         val reactApp = context.applicationContext as ReactApplication
+        (context.applicationContext as? Application)?.let {
+            BottomTabsCustomRowAttacher.registerOnce(it, context.currentActivity)
+        }
         return when (name) {
             NavigationTurboModule.NAME -> {
                 NavigationTurboModule(context, LayoutFactory(reactApp.reactHost))
             }
+            BottomTabsCustomRowModule.NAME -> {
+                BottomTabsCustomRowModule(context)
+            }
             else -> {
                 null
             }
@@ -26,14 +35,24 @@ class NavigationPackage() : BaseReactPackage() {
     }
 
     override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
-        mapOf(NavigationTurboModule.NAME to ReactModuleInfo(
-            name = NavigationTurboModule.NAME,
-            className = NavigationTurboModule.NAME,
-            canOverrideExistingModule = false,
-            needsEagerInit = false,
-            isCxxModule = false,
-            isTurboModule = true
-        ))
+        mapOf(
+            NavigationTurboModule.NAME to ReactModuleInfo(
+                name = NavigationTurboModule.NAME,
+                className = NavigationTurboModule.NAME,
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = true
+            ),
+            BottomTabsCustomRowModule.NAME to ReactModuleInfo(
+                name = BottomTabsCustomRowModule.NAME,
+                className = BottomTabsCustomRowModule.NAME,
+                canOverrideExistingModule = false,
+                needsEagerInit = true,
+                isCxxModule = false,
+                isTurboModule = false
+            )
+        )
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {

package/android/src/main/java/com/reactnativenavigation/customrow/BottomTabsCustomRow.kt

@@ -0,0 +1,262 @@
+package com.reactnativenavigation.customrow
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Outline
+import android.graphics.RenderEffect
+import android.graphics.Shader
+import android.os.Build
+import android.util.Log
+import android.util.TypedValue
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout
+import com.reactnativenavigation.views.bottomtabs.BottomTabs
+import com.reactnativenavigation.views.bottomtabs.CustomBottomTabItemView
+
+/**
+ * Floating row that hosts the React-rendered `CustomBottomTabItemView`
+ * cells produced by RNN's existing custom-tab path. Mimics the iOS
+ * `RNNBottomTabsCustomRow` (Approach B): the underlying `BottomTabs` view
+ * is kept for state but its visuals are hidden; this view is the only
+ * thing the user sees.
+ *
+ * Strict zero-touch on the existing tabs implementation: only public APIs
+ * of `BottomTabs` (`hasCustomItemViews`, `getCustomItemView`,
+ * `getItemsCount`, `setCurrentItem`) are used, plus standard `View`
+ * methods.
+ */
+@SuppressLint("ViewConstructor")
+class BottomTabsCustomRow(
+    context: Context,
+    private val bottomTabs: BottomTabs,
+) : FrameLayout(context) {
+
+    private val cells = mutableListOf<Cell>()
+    private var currentOptions: BottomTabsCustomRowOptions = BottomTabsCustomRowConfigStore.get()
+    private var selectedIndex: Int = bottomTabs.currentItem
+    private var safeBottomInsetPx: Int = 0
+
+    /**
+     * Visible chrome (background colour, rounded corners, shadow) that also
+     * hosts the cell views as children. Lives as a dedicated child of the
+     * row so it can be inset from the row's bottom by
+     * `safeBottom + bottomMargin` and only paint over the content area —
+     * mirrors iOS's `backgroundColorView` / `backgroundEffectView`. Hosting
+     * the cells inside it ensures cells render *above* the chrome regardless
+     * of elevation.
+     */
+    private val backgroundView: FrameLayout = FrameLayout(context).apply {
+        clipToOutline = true
+        clipChildren = true
+        outlineProvider = object : ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) {
+                val r = effectiveCornerRadiusPx()
+                outline.setRoundRect(0, 0, view.width, view.height, r)
+            }
+        }
+    }
+
+    private val configListener: (BottomTabsCustomRowOptions) -> Unit = { opts ->
+        post { applyOptions(opts) }
+    }
+
+    init {
+        setWillNotDraw(true)
+        clipChildren = false
+        clipToPadding = false
+        addView(backgroundView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        BottomTabsCustomRowConfigStore.addListener(configListener)
+        applyOptions(currentOptions)
+        rebuildCells()
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        BottomTabsCustomRowConfigStore.removeListener(configListener)
+    }
+
+    fun rebuildCells() {
+        for (cell in cells) {
+            (cell.parent as? ViewGroup)?.removeView(cell)
+        }
+        cells.clear()
+        if (!bottomTabs.hasCustomItemViews()) return
+
+        val count = bottomTabs.itemsCount
+        for (i in 0 until count) {
+            val itemView = bottomTabs.getCustomItemView(i) ?: continue
+            (itemView.parent as? ViewGroup)?.removeView(itemView)
+            val cell = Cell(context, i, itemView).also {
+                it.setOnClickListener { _ ->
+                    bottomTabs.setCurrentItem(i, true)
+                    setSelectedIndex(i)
+                }
+            }
+            backgroundView.addView(
+                cell,
+                FrameLayout.LayoutParams(
+                    FrameLayout.LayoutParams.MATCH_PARENT,
+                    FrameLayout.LayoutParams.MATCH_PARENT
+                )
+            )
+            cells.add(cell)
+        }
+        setSelectedIndex(selectedIndex)
+        requestLayout()
+    }
+
+    fun setSelectedIndex(index: Int) {
+        selectedIndex = index
+        for (cell in cells) cell.itemView.setItemSelected(cell.index == index)
+    }
+
+    fun applyOptions(options: BottomTabsCustomRowOptions) {
+        currentOptions = options
+
+        val solidColor = options.backgroundColor
+        val effect = options.backgroundEffect
+        val backgroundColorToUse = solidColor
+            ?: if (effect == BottomTabsCustomRowOptions.BackgroundEffect.None)
+                Color.TRANSPARENT
+            else
+                materialChromeColor()
+
+        backgroundView.setBackgroundColor(backgroundColorToUse)
+
+        // NOTE: Android does not expose a true blur-behind API for arbitrary
+        // views (the `RenderEffect.createBlurEffect` API blurs the view's own
+        // rendered content, which would smear the cells we host). For
+        // `glass` / `blur` we therefore render an opaque-ish chrome material
+        // colour; a future enhancement can swap this for `eightbitlab/
+        // BlurView` to get true blur-behind on Android.
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            backgroundView.setRenderEffect(null)
+        }
+
+        // iOS gets a soft visual lift from `UIGlassEffect`'s built-in ring +
+        // highlight. Android has no equivalent, so we emulate it with a
+        // low-elevation shadow tinted at low alpha. Hard `elevation = 8` (the
+        // Material default) looks much heavier than the iOS reference, so
+        // we stay subtle: ~3dp elevation, ~30% / 12% shadow alpha.
+        backgroundView.elevation = dp(3f)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            backgroundView.outlineSpotShadowColor = Color.argb(0x4C, 0, 0, 0)
+            backgroundView.outlineAmbientShadowColor = Color.argb(0x1E, 0, 0, 0)
+        }
+        backgroundView.invalidateOutline()
+        requestLayout()
+    }
+
+    private fun materialChromeColor(): Int {
+        val typed = TypedValue()
+        val resolved = context.theme.resolveAttribute(
+            android.R.attr.colorBackground, typed, true
+        )
+        val base = if (resolved && typed.type >= TypedValue.TYPE_FIRST_COLOR_INT &&
+            typed.type <= TypedValue.TYPE_LAST_COLOR_INT
+        ) typed.data else Color.WHITE
+        return alphaOver(base, 0xF0)
+    }
+
+    private fun alphaOver(color: Int, alpha: Int): Int {
+        return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color))
+    }
+
+    private fun effectiveCornerRadiusPx(): Float {
+        val dp = currentOptions.cornerRadius ?: 28f
+        return dp(dp)
+    }
+
+    /**
+     * Content-area height (where cells live), excluding the bottom safe-area
+     * inset and bottomMargin.
+     */
+    fun effectiveContentHeightPx(nativeBarHeightPx: Int): Int {
+        val heightOption = currentOptions.height
+        if (heightOption != null) {
+            val configured = dp(heightOption).toInt()
+            // JS height targets iOS floating chrome; keep Android shell tight so
+            // the pill sits on the tab bar without a tall empty box above nav.
+            return minOf(configured, nativeBarHeightPx.coerceAtLeast(dp(52f).toInt()))
+        }
+        // Default: a touch taller than the native bar's content area to give
+        // icon + label + pill enough room — mirrors iOS's +18pt default.
+        val nativeContent = (nativeBarHeightPx - safeBottomInsetPx).coerceAtLeast(0)
+        return (nativeContent + dp(18f)).toInt()
+    }
+
+    /**
+     * Total row height including the bottom safe-area inset and bottomMargin
+     * — mirrors iOS's `desiredRowHeightForNativeTabBarHeight:safeBottom:`.
+     */
+    fun effectiveTotalHeightPx(nativeBarHeightPx: Int): Int =
+        effectiveContentHeightPx(nativeBarHeightPx) + safeBottomInsetPx + effectiveBottomMarginPx()
+
+    fun effectiveHorizontalMarginPx(): Int = dp(currentOptions.horizontalMargin ?: 16f).toInt()
+    fun effectiveBottomMarginPx(): Int = dp(currentOptions.bottomMargin ?: 0f).toInt()
+
+    fun setSafeBottomInsetPx(insetPx: Int) {
+        if (safeBottomInsetPx == insetPx) return
+        safeBottomInsetPx = insetPx
+        requestLayout()
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        val w = width
+        // Visible chrome only covers the content area — never the safe-area
+        // strip below (matches iOS where `backgroundEffectView.frame =
+        // content` excludes `safe.bottom + bottomMargin`).
+        val contentBottom = (height - safeBottomInsetPx - effectiveBottomMarginPx()).coerceAtLeast(0)
+        val bgSpec = MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY)
+        val bgHeightSpec = MeasureSpec.makeMeasureSpec(contentBottom, MeasureSpec.EXACTLY)
+        backgroundView.measure(bgSpec, bgHeightSpec)
+        backgroundView.layout(0, 0, w, contentBottom)
+        backgroundView.invalidateOutline()
+        layoutCells(w, contentBottom)
+    }
+
+    private fun layoutCells(parentWidth: Int, parentHeight: Int) {
+        if (cells.isEmpty() || parentWidth <= 0 || parentHeight <= 0) return
+        val per = parentWidth.toFloat() / cells.size.toFloat()
+        for (i in cells.indices) {
+            val cell = cells[i]
+            val l = (i * per).toInt()
+            val r = ((i + 1) * per).toInt()
+            val widthSpec = MeasureSpec.makeMeasureSpec(r - l, MeasureSpec.EXACTLY)
+            val heightSpec = MeasureSpec.makeMeasureSpec(parentHeight, MeasureSpec.EXACTLY)
+            cell.measure(widthSpec, heightSpec)
+            // Cells are children of `backgroundView`, laid out in its local
+            // coordinate space (which is already 0..contentBottom).
+            cell.layout(l, 0, r, parentHeight)
+        }
+    }
+
+    private fun dp(value: Float): Float =
+        value * resources.displayMetrics.density
+
+    @SuppressLint("ViewConstructor")
+    private class Cell(
+        context: Context,
+        val index: Int,
+        val itemView: CustomBottomTabItemView,
+    ) : FrameLayout(context) {
+        init {
+            isClickable = true
+            isFocusable = true
+            // Host the React item view inside this cell so it inherits taps
+            // we don't consume.
+            addView(itemView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        }
+
+        override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
+            // Bypass the React view's pass-through and let this Cell receive
+            // the click event directly.
+            return onTouchEvent(ev) || super.dispatchTouchEvent(ev)
+        }
+    }
+}

package/android/src/main/java/com/reactnativenavigation/customrow/BottomTabsCustomRowAttacher.kt

@@ -0,0 +1,205 @@
+package com.reactnativenavigation.customrow
+
+import android.app.Activity
+import android.app.Application
+import android.os.Build
+import android.os.Bundle
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.view.WindowInsets
+import android.widget.FrameLayout
+import com.reactnativenavigation.views.bottomtabs.BottomTabs
+
+/**
+ * Activity-lifecycle observer that watches every started activity for
+ * `BottomTabs` instances using the existing custom-tab path and injects a
+ * [BottomTabsCustomRow] above them, hiding the native chrome via public
+ * `View` APIs (`alpha = 0f`).
+ *
+ * Layout listeners are registered once per activity (on the decor view) and
+ * placement updates are deduplicated so Espresso / Detox can reach idle.
+ */
+internal object BottomTabsCustomRowAttacher : Application.ActivityLifecycleCallbacks {
+
+    @Volatile private var registered: Boolean = false
+    @Volatile private var lastResumedActivity: Activity? = null
+
+    private data class LastPlacement(
+        val left: Int,
+        val top: Int,
+        val width: Int,
+        val height: Int,
+        val safeBottomInsetPx: Int,
+    )
+
+    fun registerOnce(application: Application, currentActivity: Activity? = null) {
+        if (!registered) {
+            registered = true
+            application.registerActivityLifecycleCallbacks(this)
+        }
+        if (currentActivity != null && lastResumedActivity == null) {
+            lastResumedActivity = currentActivity
+            ensureLayoutObserver(currentActivity)
+            tryAttach(currentActivity)
+        }
+    }
+
+    fun rescan() {
+        val activity = lastResumedActivity ?: return
+        tryAttach(activity)
+    }
+
+    override fun onActivityCreated(activity: Activity, savedInstanceState: Bundle?) {
+        ensureLayoutObserver(activity)
+        tryAttach(activity)
+    }
+
+    override fun onActivityStarted(activity: Activity) {
+        ensureLayoutObserver(activity)
+        tryAttach(activity)
+    }
+
+    override fun onActivityResumed(activity: Activity) {
+        lastResumedActivity = activity
+        ensureLayoutObserver(activity)
+        tryAttach(activity)
+    }
+
+    override fun onActivityPaused(activity: Activity) {
+        if (lastResumedActivity === activity) lastResumedActivity = null
+    }
+
+    override fun onActivityStopped(activity: Activity) {}
+    override fun onActivitySaveInstanceState(activity: Activity, outState: Bundle) {}
+    override fun onActivityDestroyed(activity: Activity) {
+        activity.window?.decorView?.setTag(TAG_OBSERVING, null)
+    }
+
+    private fun ensureLayoutObserver(activity: Activity) {
+        val decor = activity.window?.decorView as? ViewGroup ?: return
+        if (decor.getTag(TAG_OBSERVING) == true) return
+        decor.setTag(TAG_OBSERVING, true)
+        decor.viewTreeObserver.addOnGlobalLayoutListener(
+            object : ViewTreeObserver.OnGlobalLayoutListener {
+                override fun onGlobalLayout() {
+                    tryAttach(activity)
+                }
+            }
+        )
+    }
+
+    private fun tryAttach(activity: Activity) {
+        val scanRoot = activity.window?.decorView as? ViewGroup
+            ?: activity.findViewById<View>(android.R.id.content) as? ViewGroup
+            ?: return
+        val overlayHost = activity.findViewById<View>(android.R.id.content) as? ViewGroup
+            ?: scanRoot
+
+        forEachBottomTabs(scanRoot) { bottomTabs ->
+            if (!bottomTabs.hasCustomItemViews()) return@forEachBottomTabs
+
+            val existing = bottomTabs.getTag(TAG_ATTACHED_ROW_ID) as? BottomTabsCustomRow
+            if (existing != null) {
+                ensureRowHostedOn(existing, overlayHost)
+                positionRow(existing, bottomTabs, overlayHost, activity)
+                return@forEachBottomTabs
+            }
+
+            bottomTabs.setExternalCustomItemViewHost(true)
+            val row = BottomTabsCustomRow(overlayHost.context, bottomTabs)
+            overlayHost.addView(
+                row,
+                FrameLayout.LayoutParams(
+                    FrameLayout.LayoutParams.WRAP_CONTENT,
+                    FrameLayout.LayoutParams.WRAP_CONTENT
+                )
+            )
+            bottomTabs.setTag(TAG_ATTACHED_ROW_ID, row)
+            bottomTabs.alpha = 0f
+            bottomTabs.elevation = 0f
+            positionRow(row, bottomTabs, overlayHost, activity)
+        }
+    }
+
+    private fun ensureRowHostedOn(row: BottomTabsCustomRow, overlayHost: ViewGroup) {
+        if (row.parent === overlayHost) return
+        (row.parent as? ViewGroup)?.removeView(row)
+        overlayHost.addView(
+            row,
+            FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.WRAP_CONTENT,
+                FrameLayout.LayoutParams.WRAP_CONTENT
+            )
+        )
+    }
+
+    private fun positionRow(
+        row: BottomTabsCustomRow,
+        bottomTabs: BottomTabs,
+        overlayHost: ViewGroup,
+        activity: Activity,
+    ) {
+        val navBarInsetPx = systemBottomInsetPx(overlayHost, bottomTabs)
+        val placement = BottomTabsCustomRowLayout.resolvePlacement(
+            activity,
+            row,
+            bottomTabs,
+            overlayHost,
+            navBarInsetPx,
+        ) ?: return
+
+        val next = LastPlacement(
+            placement.left,
+            placement.top,
+            placement.width,
+            placement.height,
+            placement.rowSafeBottomInsetPx,
+        )
+        if (row.getTag(TAG_LAST_PLACEMENT) == next) {
+            return
+        }
+        row.setTag(TAG_LAST_PLACEMENT, next)
+        row.setSafeBottomInsetPx(placement.rowSafeBottomInsetPx)
+
+        val lp = (row.layoutParams as? FrameLayout.LayoutParams)
+            ?: FrameLayout.LayoutParams(placement.width, placement.height)
+        lp.width = placement.width
+        lp.height = placement.height
+        lp.leftMargin = placement.left
+        lp.topMargin = placement.top
+        row.layoutParams = lp
+        row.bringToFront()
+    }
+
+    private fun systemBottomInsetPx(overlayHost: View, bottomTabs: View): Int {
+        for (source in listOf(bottomTabs, overlayHost)) {
+            val insets = source.rootWindowInsets ?: continue
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+                val navBars = insets.getInsets(WindowInsets.Type.navigationBars()).bottom
+                if (navBars > 0) return navBars
+            } else {
+                @Suppress("DEPRECATION")
+                val legacy = insets.systemWindowInsetBottom
+                if (legacy > 0) return legacy
+            }
+        }
+        return 0
+    }
+
+    private fun forEachBottomTabs(view: View, block: (BottomTabs) -> Unit) {
+        if (view is BottomTabs) {
+            block(view)
+            return
+        }
+        if (view is ViewGroup) {
+            for (i in 0 until view.childCount) {
+                forEachBottomTabs(view.getChildAt(i), block)
+            }
+        }
+    }
+
+    private val TAG_ATTACHED_ROW_ID = "rnnBottomTabsCustomRow".hashCode()
+    private val TAG_OBSERVING = "rnnCustomRowObserving".hashCode()
+    private val TAG_LAST_PLACEMENT = "rnnCustomRowLastPlacement".hashCode()
+}

package/android/src/main/java/com/reactnativenavigation/customrow/BottomTabsCustomRowConfigStore.kt

@@ -0,0 +1,32 @@
+package com.reactnativenavigation.customrow
+
+/**
+ * Process-wide singleton holding the latest custom-row configuration
+ * pushed from JS via the `RNNBottomTabsCustomRowModule` native module.
+ *
+ * The attacher reads from here when it needs to apply chrome to a freshly
+ * detected `BottomTabs` instance.
+ */
+object BottomTabsCustomRowConfigStore {
+    @Volatile
+    private var current: BottomTabsCustomRowOptions = BottomTabsCustomRowOptions()
+
+    private val listeners = mutableSetOf<(BottomTabsCustomRowOptions) -> Unit>()
+
+    fun update(options: BottomTabsCustomRowOptions) {
+        current = options
+        synchronized(listeners) {
+            listeners.toList().forEach { it.invoke(options) }
+        }
+    }
+
+    fun get(): BottomTabsCustomRowOptions = current
+
+    fun addListener(listener: (BottomTabsCustomRowOptions) -> Unit) {
+        synchronized(listeners) { listeners.add(listener) }
+    }
+
+    fun removeListener(listener: (BottomTabsCustomRowOptions) -> Unit) {
+        synchronized(listeners) { listeners.remove(listener) }
+    }
+}