react-native-navigation 7.32.1 → 7.33.0-alpha.10

package/lib/Mock/Layouts/ComponentNode.ts

@@ -18,47 +18,43 @@ export default class ComponentNode extends ParentNode {
 
   public componentDidAppear() {
     if (this.componentDidMountOnce) {
-      setTimeout(() => {
-        events.invokeComponentWillAppear({
-          componentName: this.data.name,
-          componentId: this.nodeId,
-          componentType: 'Component',
-        });
-        events.invokeComponentDidAppear({
-          componentName: this.data.name,
-          componentId: this.nodeId,
-          componentType: 'Component',
-        });
-
-        this.buttonsDidAppear(
-          _.concat(
-            this.data.options.topBar?.rightButtons || [],
-            this.data.options.topBar?.leftButtons || []
-          )
-        );
-        this.titleChanged(undefined, this.data.options.topBar?.title);
-      }, 0);
-    } else {
-      this.componentDidAppearPending = true;
-    }
-  }
-
-  public componentDidDisappear() {
-    setTimeout(() => {
-      events.invokeComponentDidDisappear({
+      events.invokeComponentWillAppear({
+        componentName: this.data.name,
+        componentId: this.nodeId,
+        componentType: 'Component',
+      });
+      events.invokeComponentDidAppear({
         componentName: this.data.name,
         componentId: this.nodeId,
         componentType: 'Component',
       });
 
-      this.buttonsDidDisappear(
+      this.buttonsDidAppear(
         _.concat(
           this.data.options.topBar?.rightButtons || [],
           this.data.options.topBar?.leftButtons || []
         )
       );
-      this.titleChanged(this.data.options.topBar?.title);
-    }, 0);
+      this.titleChanged(undefined, this.data.options.topBar?.title);
+    } else {
+      this.componentDidAppearPending = true;
+    }
+  }
+
+  public componentDidDisappear() {
+    events.invokeComponentDidDisappear({
+      componentName: this.data.name,
+      componentId: this.nodeId,
+      componentType: 'Component',
+    });
+
+    this.buttonsDidDisappear(
+      _.concat(
+        this.data.options.topBar?.rightButtons || [],
+        this.data.options.topBar?.leftButtons || []
+      )
+    );
+    this.titleChanged(this.data.options.topBar?.title);
   }
 
   titleChanged(oldTitle: any, newTitle?: any) {

package/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) }
+    }
+}

package/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
+    }
+}

package/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) }
+    }
+}

package/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
+    }
+}

package/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) }
+    }
+}

package/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
+    }
+}

package/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) }
+    }
+}

package/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
+    }
+}

package/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) }
+    }
+}

package/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
+    }
+}

package/lib/android/app/src/reactNative62/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) }
+    }
+}

package/lib/android/app/src/reactNative62/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
+    }
+}

package/lib/android/app/src/reactNative63/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) }
+    }
+}

package/lib/android/app/src/reactNative63/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
+    }
+}

package/lib/android/app/src/reactNative68/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) }
+    }
+}

package/lib/android/app/src/reactNative68/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
+    }
+}

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

@@ -0,0 +1,57 @@
+package com.reactnativenavigation.viewcontrollers.viewcontroller
+
+import android.content.Context
+import android.util.Log
+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>()
+    private val tempViews = ArrayList<View>()
+
+    open fun onChildViewAdded(parent: View, child: View?) {
+        if (!context.isDebug()) return
+        onYellowBoxAdded(child)
+    }
+
+    fun onYellowBoxAdded(parent: View?) {
+        if (isDestroyed) return
+
+        this.parent = parent as ViewGroup
+
+        parent.setOnHierarchyChangeListener(object : ViewGroup.OnHierarchyChangeListener {
+            override fun onChildViewAdded(parent: View, child: View) {
+                if (!yellowBoxHelper.isYellowBox(parent, child) && (isDestroyed || tempViews.contains(child))) return
+                parent as ViewGroup
+                for (i in 1 until parent.childCount) {
+                    yellowBoxViews.add(parent[i])
+                    parent.removeView(parent[i])
+                    var tempView = View(context)
+                    tempViews.add(tempView)
+                    parent.addView(tempView, i)
+                }
+            }
+
+            override fun onChildViewRemoved(parent: View?, child: View?) {
+            }
+        })
+    }
+
+    fun destroy() {
+        isDestroyed = true
+        if (yellowBoxViews.isNotEmpty()) yellowBoxViews.forEach { parent?.addView(it) }
+    }
+}

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

@@ -0,0 +1,71 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+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(interceptReactRootViewMeasureSpecWidth(widthMeasureSpec), interceptReactRootViewMeasureSpecHeight(heightMeasureSpec))
+    }
+
+    private fun interceptReactRootViewMeasureSpecWidth(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
+        val measuredWidth = this.getLastRootViewChildMaxWidth()
+
+        return MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY)
+    }
+
+    private fun interceptReactRootViewMeasureSpecHeight(heightMeasureSpec: 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 height, and use its height as (parent) ReactRootView width fixed that.
+        // See for more details https://github.com/wix/react-native-navigation/pull/7096
+        val measuredHeight = this.getLastRootViewChild()?.height
+
+        return if (measuredHeight != null) MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY) else
+            heightMeasureSpec
+    }
+
+    private fun getLastRootViewChildMaxWidth(): Int {
+        if (rootViewGroup.children.count() == 0) {
+            return 0
+        }
+        var maxWidth = rootViewGroup.width
+        var next = rootViewGroup as Any
+        while(next is ViewGroup) { //try {
+            if (next.width > maxWidth) {
+                maxWidth = next.width
+            }
+            if (next.children.count() == 0) break
+            next.children.first().also { next = it }
+        }
+        return maxWidth
+    }
+
+    private fun getLastRootViewChild(): View? {
+        if (rootViewGroup.children.count() == 0) {
+            return null
+        }
+        var rootViewGroupLastChild: View = rootViewGroup
+        var next = rootViewGroup as Any
+        while(next is ViewGroup) { //try {
+            rootViewGroupLastChild = next
+            if (next.children.count() == 0) break
+            next.children.first().also { next = it }
+        }
+        @Suppress("UNREACHABLE_CODE")
+        return rootViewGroupLastChild
+    }
+}

package/lib/dist/Mock/Layouts/ComponentNode.js

@@ -16,35 +16,31 @@ class ComponentNode extends ParentNode_1.default {
     }
     componentDidAppear() {
         if (this.componentDidMountOnce) {
-            setTimeout(() => {
-                EventsStore_1.events.invokeComponentWillAppear({
-                    componentName: this.data.name,
-                    componentId: this.nodeId,
-                    componentType: 'Component',
-                });
-                EventsStore_1.events.invokeComponentDidAppear({
-                    componentName: this.data.name,
-                    componentId: this.nodeId,
-                    componentType: 'Component',
-                });
-                this.buttonsDidAppear(lodash_1.default.concat(this.data.options.topBar?.rightButtons || [], this.data.options.topBar?.leftButtons || []));
-                this.titleChanged(undefined, this.data.options.topBar?.title);
-            }, 0);
+            EventsStore_1.events.invokeComponentWillAppear({
+                componentName: this.data.name,
+                componentId: this.nodeId,
+                componentType: 'Component',
+            });
+            EventsStore_1.events.invokeComponentDidAppear({
+                componentName: this.data.name,
+                componentId: this.nodeId,
+                componentType: 'Component',
+            });
+            this.buttonsDidAppear(lodash_1.default.concat(this.data.options.topBar?.rightButtons || [], this.data.options.topBar?.leftButtons || []));
+            this.titleChanged(undefined, this.data.options.topBar?.title);
         }
         else {
             this.componentDidAppearPending = true;
         }
     }
     componentDidDisappear() {
-        setTimeout(() => {
-            EventsStore_1.events.invokeComponentDidDisappear({
-                componentName: this.data.name,
-                componentId: this.nodeId,
-                componentType: 'Component',
-            });
-            this.buttonsDidDisappear(lodash_1.default.concat(this.data.options.topBar?.rightButtons || [], this.data.options.topBar?.leftButtons || []));
-            this.titleChanged(this.data.options.topBar?.title);
-        }, 0);
+        EventsStore_1.events.invokeComponentDidDisappear({
+            componentName: this.data.name,
+            componentId: this.nodeId,
+            componentType: 'Component',
+        });
+        this.buttonsDidDisappear(lodash_1.default.concat(this.data.options.topBar?.rightButtons || [], this.data.options.topBar?.leftButtons || []));
+        this.titleChanged(this.data.options.topBar?.title);
     }
     titleChanged(oldTitle, newTitle) {
         if (oldTitle && oldTitle.component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.32.1",
+  "version": "7.33.0-alpha.10",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -148,7 +148,7 @@
       "simulator": {
         "type": "ios.simulator",
         "device": {
-          "type": "iPhone 11"
+          "type": "iPhone 13 Pro Max"
         }
       },
       "genymotion.emulator.name": {