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

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/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/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/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/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/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/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/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/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/views/stack/topbar/titlebar/TitleBarReactView.kt

@@ -0,0 +1,32 @@
+package com.reactnativenavigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+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(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
+
+        if (rootViewGroup.children.count() > 0) {
+            measuredWidth = (((rootViewGroup.children.first() as ViewGroup).children.first() as ViewGroup).children.first() as ViewGroup).width
+        }
+
+        return if (measuredWidth > 0) MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY) else
+            widthMeasureSpec
+    }
+}

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.2",
   "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": {