add ReactRootView in RelativeLayout, will cause endless loop

[killerJava]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

System:
OS: Windows 7 6.1
CPU: x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
Memory: 1.46 GB / 7.88 GB
IDEs:
Android Studio 3.0.1
Build #AI-171.4443003, built on November 10, 2017
JRE: 1.8.0_152-release-915-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

Steps to Reproduce

add ReactRootView in RelativeLayout, we see onMeasure code in ReactRootView:

1

updateRootLayoutSpecs(mWidthMeasureSpec, mHeightMeasureSpec);

2

this method will call YGNodeCalculateLayout func in Yoga.cpp.

3

if the root node has changed, yoga set node has a new layout flag. reflect in YGJNI.CPP
obj->setFieldValue(hasNewLayoutField, true);
YGTransferLayoutDirection(root, obj);
root->setHasNewLayout(false);

4

this flag will cause to put node to mOperations, and wait to update:
mUIViewOperationQueue.enqueueUpdateLayout(
toUpdate.getNativeParent().getReactTag(),
tag,
x,
y,
toUpdate.getScreenWidth(),
toUpdate.getScreenHeight());

5

in NativeViewHierarchyManager class, updateLayout will call ReactRootView' requestLayout:
if (parent instanceof RootView) {
parent.requestLayout();
}

requestLayout -----> onMeasure, loop ...

because RelativeLayout will measure child twice, but the height is diffrent between two measures:
ReactRootView: onMeasure: width is 1080, height is 1728

ReactRootView: onMeasure: width is 1080, height is 1581

hope can fix this question in ReactRootView

Expected Behavior

not occur always call onMeasure func

Actual Behavior

always call onMeasure in ReactRootView,

RelativeLayout will measure child twice:
ReactRootView: onMeasure: width is 1080, height is 1728
ReactRootView: onMeasure: width is 1080, height is 1581

height changed, will call NativeViewHierarchyManager.updateLayout func, in this func, will
call ReactRootView.requestLayout, requestLayout will cause measue child, cause endless loop

[react-native-bot]

Please run react-native info and update your issue.

[ethanleeX]

I have the same problem , I solve it by relpace relativelayout with linearlayout , but I don't think it is a good way, sometimes it may course overdraw

[hramos]

This issue can be improved by providing a small code sample that reproduces the issue.

[allenhsu]

We've encountered this problem as well, I think the problem is that with RelativeLayout, if you have used something like layout_above (in our case, a container view above bottom bar), measure and onMeasure of ReactRootView will be called twice with different height.

The first time to calculate max height, the second time to calculate exact height. Since the container is set to match parent's size, the first time it's height is set to parent's height (screen height most of the time). The second time, it's parent's height minus bottom bar's height. Since the two heights are different, it triggers layout of RN components, this layout somehow triggered measure/layout of the app again. Thus, it becomes a dead loop.

We resolved this by using LinearLayout instead of RelativeLayout as well, but I think it can and should be fixed in ReactRootView.

My question is, why updateRootLayoutSpecs is called in onMeasure rather than in onLayout?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.