Fix changes of View visibilities

Summary:
The purpose of this diff is to ensure that visibility changes are handled correctly when the value of "display" for a View changes from 'flex' to 'none'.

RNTester is nesting several Views with different kind of visibilities. When the user tap on an item there's a state update that changes the visibility styles for some of these views. Fabric does not reflect the right changes of visibility on the screen.

changelog: internal

Reviewed By: shergin

Differential Revision: D25841763

fbshipit-source-id: 769b97afb72939d346a4c6f2669ff938b35596bc

ReactAndroid/src/main/java/com/facebook/react/fabric/jni/Binding.cpp

@@ -102,7 +102,7 @@ static inline int getIntBufferSizeForType(CppMountItem::Type mountItemType) {
  } else if (mountItemType == CppMountItem::Type::UpdatePadding) {
  return 5; // tag, top, left, bottom, right
  } else if (mountItemType == CppMountItem::Type::UpdateLayout) {
- return 6; // tag, x, y, w, h, layoutDirection
+ return 7; // tag, x, y, w, h, layoutDirection, DisplayType
  } else if (mountItemType == CppMountItem::Type::UpdateEventEmitter) {
  return 1; // tag
  } else {
@@ -714,7 +714,7 @@ void Binding::schedulerDidFinishTransaction(
  int intBufferPosition = 0;
  int objBufferPosition = 0;
  int prevMountItemType = -1;
- jint temp[6];
+ jint temp[7];
  for (int i = 0; i < cppCommonMountItems.size(); i++) {
  const auto &mountItem = cppCommonMountItems[i];
  const auto &mountItemType = mountItem.type;
@@ -879,15 +879,18 @@ void Binding::schedulerDidFinishTransaction(
  int h = round(frame.size.height * pointScaleFactor);
  int layoutDirection =
  toInt(mountItem.newChildShadowView.layoutMetrics.layoutDirection);
+ int displayType =
+ toInt(mountItem.newChildShadowView.layoutMetrics.displayType);
 
  temp[0] = mountItem.newChildShadowView.tag;
  temp[1] = x;
  temp[2] = y;
  temp[3] = w;
  temp[4] = h;
  temp[5] = layoutDirection;
- env->SetIntArrayRegion(intBufferArray, intBufferPosition, 6, temp);
- intBufferPosition += 6;
+ temp[6] = displayType;
+ env->SetIntArrayRegion(intBufferArray, intBufferPosition, 7, temp);
+ intBufferPosition += 7;
  }
  }
  if (cppUpdateEventEmitterMountItems.size() > 0) {

ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountingManager.java

@@ -563,7 +563,7 @@ public void updateProps(int reactTag, @Nullable ReadableMap props) {
  }
 
  @UiThread
- public void updateLayout(int reactTag, int x, int y, int width, int height) {
+ public void updateLayout(int reactTag, int x, int y, int width, int height, int displayType) {
  UiThreadUtil.assertOnUiThread();
 
  ViewState viewState = getViewState(reactTag);
@@ -589,6 +589,12 @@ public void updateLayout(int reactTag, int x, int y, int width, int height) {
  // TODO: T31905686 Check if the parent of the view has to layout the view, or the child has
  // to lay itself out. see NativeViewHierarchyManager.updateLayout
  viewToUpdate.layout(x, y, x + width, y + height);
+
+ // displayType: 0 represents display: 'none'
+ int visibility = displayType == 0 ? View.INVISIBLE : View.VISIBLE;
+ if (viewToUpdate.getVisibility() != visibility) {
+ viewToUpdate.setVisibility(visibility);
+ }
  }
 
  @UiThread

ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/mountitems/IntBufferBatchMountItem.java

@@ -157,11 +157,16 @@ public void execute(@NonNull MountingManager mountingManager) {
  } else if (type == INSTRUCTION_UPDATE_STATE) {
  mountingManager.updateState(mIntBuffer[i++], castToState(mObjBuffer[j++]));
  } else if (type == INSTRUCTION_UPDATE_LAYOUT) {
- mountingManager.updateLayout(
- mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++]);
-
+ int reactTag = mIntBuffer[i++];
+ int x = mIntBuffer[i++];
+ int y = mIntBuffer[i++];
+ int width = mIntBuffer[i++];
+ int height = mIntBuffer[i++];
  // The final buffer, layoutDirection, seems unused?
  i++;
+ int displayType = mIntBuffer[i++];
+ mountingManager.updateLayout(reactTag, x, y, width, height, displayType);
+
  } else if (type == INSTRUCTION_UPDATE_PADDING) {
  mountingManager.updatePadding(
  mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++], mIntBuffer[i++]);

ReactCommon/react/renderer/core/conversions.h

@@ -34,6 +34,17 @@ inline int toInt(const LayoutDirection &layoutDirection) {
  }
 }
 
+inline int toInt(const DisplayType &displayType) {
+ switch (displayType) {
+ case DisplayType::None:
+ return 0;
+ case DisplayType::Flex:
+ return 1;
+ case DisplayType::Inline:
+ return 2;
+ }
+}
+
 inline std::string toString(const DisplayType &displayType) {
  switch (displayType) {
  case DisplayType::None: