Fix truncated topBar title component on RN0.71 (#7716)

* Fix title component layout on RN71

* Update package.json version to 7.33.0-alpha.1 [buildkite skip]

* Fix TitleBarReactView flavor

* Update package.json version to 7.33.0-alpha.2 [buildkite skip]

* f

* f

* Update package.json version to 7.33.0-alpha.3 [buildkite skip]

* Remove unnecessary cast to ViewGroup (#7706)

* Update package.json version to 7.33.0-alpha.4 [buildkite skip]

* Fix condition for rootview having no children (#7707)

* Update package.json version to 7.33.0-alpha.5 [buildkite skip]

* Fix component title crash

* verify rootView has children

* Update package.json version to 7.33.0-alpha.6 [buildkite skip]

* Update package.json version to 7.33.0-alpha.7 [buildkite skip]

* A fix (possible) of title bar width issue.

* A fix (second attempt) of title bar width issue.

* A fix (second attempt) of title bar width issue.

* We need a dirty trick only in debug mode.

* Update package.json version to 7.33.0-alpha.8 [buildkite skip]

* Fixed TitleBarReactView.kt.

* Fix YellowBox delegate on RN71

* Remove unneeded YellowBoxDelegate.kt

* Update package.json version to 7.33.0-alpha.9 [buildkite skip]

* Fix TitleBarReactView.kt

* Update package.json version to 7.33.0-alpha.10 [buildkite skip]

* Update package.json version to 7.33.0-alpha.11 [buildkite skip]

---------

Co-authored-by: wixmobile <mobile1@wix.com>
Co-authored-by: Yedidya Kennard <yedidyak@wix.com>
Co-authored-by: Evgeni Silman <evgenis@wix.com>

lib/android/app/src/reactNative55/java/com/reactnativenavigation/viewcontrollers/viewcontroller/YellowBoxDelegate.kt

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RestrictTo
+import androidx.core.view.get
+import com.reactnativenavigation.utils.isDebug
+import java.util.*
+
+open class YellowBoxDelegate(private val context: Context, private val yellowBoxHelper: YellowBoxHelper = YellowBoxHelper()) {
+    constructor(context: Context) : this(context, YellowBoxHelper())
+
+    var parent: ViewGroup? = null
+        private set
+    @get:RestrictTo(RestrictTo.Scope.TESTS)
+    val yellowBoxes: List<View>
+        get() = yellowBoxViews
+
+    private var isDestroyed = false
+    private val yellowBoxViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        if (yellowBoxHelper.isYellowBox(parent, child)) onYellowBoxAdded(parent)
+    }
+
+    fun onYellowBoxAdded(parent: View) {
+        if (isDestroyed) return
+        this.parent = parent as ViewGroup
+        for (i in 1 until parent.childCount) {
+            yellowBoxViews.add(parent[i])
+            parent.removeView(parent[i])
+            parent.addView(View(context), i)
+        }
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

lib/android/app/src/reactNative55/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,31 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.core.view.children
+import com.facebook.react.ReactInstanceManager
+import com.reactnativenavigation.react.ReactView
+
+@SuppressLint("ViewConstructor")
+class TitleBarReactView(context: Context?, reactInstanceManager: ReactInstanceManager?, componentId: String?,
+                        componentName: String?) : ReactView(context, reactInstanceManager, componentId, componentName) {
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(interceptReactRootViewMeasureSpec(widthMeasureSpec), heightMeasureSpec)
+    }
+
+    private fun interceptReactRootViewMeasureSpec(widthMeasureSpec: Int): Int {
+        // This is a HACK.
+        // ReactRootView has problematic behavior when setting width to WRAP_CONTENT,
+        // It's causing infinite measurements, that hung up the UI.
+        // Intercepting largest child by width, and use its width as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        var measuredWidth = 0;
+        this.children.forEach {
+            if (it.measuredWidth > measuredWidth) {
+                measuredWidth = it.measuredWidth
+            }
+        }
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}

lib/android/app/src/reactNative56/java/com/reactnativenavigation/viewcontrollers/viewcontroller/YellowBoxDelegate.kt

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RestrictTo
+import androidx.core.view.get
+import com.reactnativenavigation.utils.isDebug
+import java.util.*
+
+open class YellowBoxDelegate(private val context: Context, private val yellowBoxHelper: YellowBoxHelper = YellowBoxHelper()) {
+    constructor(context: Context) : this(context, YellowBoxHelper())
+
+    var parent: ViewGroup? = null
+        private set
+    @get:RestrictTo(RestrictTo.Scope.TESTS)
+    val yellowBoxes: List<View>
+        get() = yellowBoxViews
+
+    private var isDestroyed = false
+    private val yellowBoxViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        if (yellowBoxHelper.isYellowBox(parent, child)) onYellowBoxAdded(parent)
+    }
+
+    fun onYellowBoxAdded(parent: View) {
+        if (isDestroyed) return
+        this.parent = parent as ViewGroup
+        for (i in 1 until parent.childCount) {
+            yellowBoxViews.add(parent[i])
+            parent.removeView(parent[i])
+            parent.addView(View(context), i)
+        }
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

lib/android/app/src/reactNative56/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,31 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.core.view.children
+import com.facebook.react.ReactInstanceManager
+import com.reactnativenavigation.react.ReactView
+
+@SuppressLint("ViewConstructor")
+class TitleBarReactView(context: Context?, reactInstanceManager: ReactInstanceManager?, componentId: String?,
+                        componentName: String?) : ReactView(context, reactInstanceManager, componentId, componentName) {
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(interceptReactRootViewMeasureSpec(widthMeasureSpec), heightMeasureSpec)
+    }
+
+    private fun interceptReactRootViewMeasureSpec(widthMeasureSpec: Int): Int {
+        // This is a HACK.
+        // ReactRootView has problematic behavior when setting width to WRAP_CONTENT,
+        // It's causing infinite measurements, that hung up the UI.
+        // Intercepting largest child by width, and use its width as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        var measuredWidth = 0;
+        this.children.forEach {
+            if (it.measuredWidth > measuredWidth) {
+                measuredWidth = it.measuredWidth
+            }
+        }
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}

lib/android/app/src/reactNative57/java/com/reactnativenavigation/viewcontrollers/viewcontroller/YellowBoxDelegate.kt

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RestrictTo
+import androidx.core.view.get
+import com.reactnativenavigation.utils.isDebug
+import java.util.*
+
+open class YellowBoxDelegate(private val context: Context, private val yellowBoxHelper: YellowBoxHelper = YellowBoxHelper()) {
+    constructor(context: Context) : this(context, YellowBoxHelper())
+
+    var parent: ViewGroup? = null
+        private set
+    @get:RestrictTo(RestrictTo.Scope.TESTS)
+    val yellowBoxes: List<View>
+        get() = yellowBoxViews
+
+    private var isDestroyed = false
+    private val yellowBoxViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        if (yellowBoxHelper.isYellowBox(parent, child)) onYellowBoxAdded(parent)
+    }
+
+    fun onYellowBoxAdded(parent: View) {
+        if (isDestroyed) return
+        this.parent = parent as ViewGroup
+        for (i in 1 until parent.childCount) {
+            yellowBoxViews.add(parent[i])
+            parent.removeView(parent[i])
+            parent.addView(View(context), i)
+        }
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

lib/android/app/src/reactNative57/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,31 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.core.view.children
+import com.facebook.react.ReactInstanceManager
+import com.reactnativenavigation.react.ReactView
+
+@SuppressLint("ViewConstructor")
+class TitleBarReactView(context: Context?, reactInstanceManager: ReactInstanceManager?, componentId: String?,
+                        componentName: String?) : ReactView(context, reactInstanceManager, componentId, componentName) {
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(interceptReactRootViewMeasureSpec(widthMeasureSpec), heightMeasureSpec)
+    }
+
+    private fun interceptReactRootViewMeasureSpec(widthMeasureSpec: Int): Int {
+        // This is a HACK.
+        // ReactRootView has problematic behavior when setting width to WRAP_CONTENT,
+        // It's causing infinite measurements, that hung up the UI.
+        // Intercepting largest child by width, and use its width as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        var measuredWidth = 0;
+        this.children.forEach {
+            if (it.measuredWidth > measuredWidth) {
+                measuredWidth = it.measuredWidth
+            }
+        }
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/viewcontrollers/viewcontroller/YellowBoxDelegate.kt

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RestrictTo
+import androidx.core.view.get
+import com.reactnativenavigation.utils.isDebug
+import java.util.*
+
+open class YellowBoxDelegate(private val context: Context, private val yellowBoxHelper: YellowBoxHelper = YellowBoxHelper()) {
+    constructor(context: Context) : this(context, YellowBoxHelper())
+
+    var parent: ViewGroup? = null
+        private set
+    @get:RestrictTo(RestrictTo.Scope.TESTS)
+    val yellowBoxes: List<View>
+        get() = yellowBoxViews
+
+    private var isDestroyed = false
+    private val yellowBoxViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        if (yellowBoxHelper.isYellowBox(parent, child)) onYellowBoxAdded(parent)
+    }
+
+    fun onYellowBoxAdded(parent: View) {
+        if (isDestroyed) return
+        this.parent = parent as ViewGroup
+        for (i in 1 until parent.childCount) {
+            yellowBoxViews.add(parent[i])
+            parent.removeView(parent[i])
+            parent.addView(View(context), i)
+        }
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,31 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.core.view.children
+import com.facebook.react.ReactInstanceManager
+import com.reactnativenavigation.react.ReactView
+
+@SuppressLint("ViewConstructor")
+class TitleBarReactView(context: Context?, reactInstanceManager: ReactInstanceManager?, componentId: String?,
+                        componentName: String?) : ReactView(context, reactInstanceManager, componentId, componentName) {
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(interceptReactRootViewMeasureSpec(widthMeasureSpec), heightMeasureSpec)
+    }
+
+    private fun interceptReactRootViewMeasureSpec(widthMeasureSpec: Int): Int {
+        // This is a HACK.
+        // ReactRootView has problematic behavior when setting width to WRAP_CONTENT,
+        // It's causing infinite measurements, that hung up the UI.
+        // Intercepting largest child by width, and use its width as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        var measuredWidth = 0;
+        this.children.forEach {
+            if (it.measuredWidth > measuredWidth) {
+                measuredWidth = it.measuredWidth
+            }
+        }
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}

lib/android/app/src/reactNative60/java/com/reactnativenavigation/viewcontrollers/viewcontroller/YellowBoxDelegate.kt

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RestrictTo
+import androidx.core.view.get
+import com.reactnativenavigation.utils.isDebug
+import java.util.*
+
+open class YellowBoxDelegate(private val context: Context, private val yellowBoxHelper: YellowBoxHelper = YellowBoxHelper()) {
+    constructor(context: Context) : this(context, YellowBoxHelper())
+
+    var parent: ViewGroup? = null
+        private set
+    @get:RestrictTo(RestrictTo.Scope.TESTS)
+    val yellowBoxes: List<View>
+        get() = yellowBoxViews
+
+    private var isDestroyed = false
+    private val yellowBoxViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        if (yellowBoxHelper.isYellowBox(parent, child)) onYellowBoxAdded(parent)
+    }
+
+    fun onYellowBoxAdded(parent: View) {
+        if (isDestroyed) return
+        this.parent = parent as ViewGroup
+        for (i in 1 until parent.childCount) {
+            yellowBoxViews.add(parent[i])
+            parent.removeView(parent[i])
+            parent.addView(View(context), i)
+        }
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

lib/android/app/src/reactNative60/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,31 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.core.view.children
+import com.facebook.react.ReactInstanceManager
+import com.reactnativenavigation.react.ReactView
+
+@SuppressLint("ViewConstructor")
+class TitleBarReactView(context: Context?, reactInstanceManager: ReactInstanceManager?, componentId: String?,
+                        componentName: String?) : ReactView(context, reactInstanceManager, componentId, componentName) {
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(interceptReactRootViewMeasureSpec(widthMeasureSpec), heightMeasureSpec)
+    }
+
+    private fun interceptReactRootViewMeasureSpec(widthMeasureSpec: Int): Int {
+        // This is a HACK.
+        // ReactRootView has problematic behavior when setting width to WRAP_CONTENT,
+        // It's causing infinite measurements, that hung up the UI.
+        // Intercepting largest child by width, and use its width as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        var measuredWidth = 0;
+        this.children.forEach {
+            if (it.measuredWidth > measuredWidth) {
+                measuredWidth = it.measuredWidth
+            }
+        }
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}