Expose Gap Percentage to ReactNative

Summary: Expose the Gap Percent from Yoga to RN Layer Changelog: [Internal] - Enable flex gap percentage value for RN. Differential Revision: D56160597
realsoelynn · Apr 17, 2024 · 5da109e · 5da109e
1 parent 2509eb7
commit 5da109e
Show file tree

Hide file tree

Showing 14 changed files with 137 additions and 20 deletions.
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -65,9 +65,9 @@ export interface FlexStyle {
     | 'row-reverse'
     | 'column-reverse'
     | undefined;
-  rowGap?: number | undefined;
-  gap?: number | undefined;
-  columnGap?: number | undefined;
+  rowGap?: DimensionValue | undefined;
+  gap?: DimensionValue | undefined;
+  columnGap?: DimensionValue | undefined;
   flexGrow?: number | undefined;
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
@@ -644,9 +644,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    * between children may be larger than the gap value.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
    */
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number,
+  rowGap?: DimensionValue,
+  columnGap?: DimensionValue,
+  gap?: DimensionValue,
 }>;
 
 /**

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -7584,9 +7584,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
   aspectRatio?: number | string,
   zIndex?: number,
   direction?: \\"inherit\\" | \\"ltr\\" | \\"rtl\\",
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number,
+  rowGap?: DimensionValue,
+  columnGap?: DimensionValue,
+  gap?: DimensionValue,
 }>;
 export type ____ShadowStyle_InternalCore = $ReadOnly<{
   shadowColor?: ____ColorValue_Internal,

diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m
@@ -507,9 +507,9 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
 RCT_EXPORT_SHADOW_PROPERTY(alignContent, YGAlign)
 RCT_EXPORT_SHADOW_PROPERTY(position, YGPositionType)
 RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
-RCT_EXPORT_SHADOW_PROPERTY(rowGap, float)
-RCT_EXPORT_SHADOW_PROPERTY(columnGap, float)
-RCT_EXPORT_SHADOW_PROPERTY(gap, float)
+RCT_EXPORT_SHADOW_PROPERTY(rowGap, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(columnGap, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(gap, YGValue)
 
 RCT_EXPORT_SHADOW_PROPERTY(overflow, YGOverflow)
 RCT_EXPORT_SHADOW_PROPERTY(display, YGDisplay)

diff --git a/...eact-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java b/...eact-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
@@ -231,27 +231,72 @@ public void setFlexGrow(float flexGrow) {
   }
 
   @ReactProp(name = ViewProps.ROW_GAP, defaultFloat = YogaConstants.UNDEFINED)
-  public void setRowGap(float rowGap) {
+  public void setRowGap(Dynamic rowGap) {
     if (isVirtual()) {
       return;
     }
-    super.setRowGap(PixelUtil.toPixelFromDIP(rowGap));
+
+    mTempYogaValue.setFromDynamic(rowGap);
+    switch (mTempYogaValue.unit) {
+      case POINT:
+      case UNDEFINED:
+        setRowGap(mTempYogaValue.value);
+        break;
+      case AUTO:
+        setRowGapAuto();
+        break;
+      case PERCENT:
+        setRowGapPercent(mTempYogaValue.value);
+        break;
+    }
+
+    rowGap.recycle();
   }
 
-  @ReactProp(name = ViewProps.COLUMN_GAP, defaultFloat = YogaConstants.UNDEFINED)
-  public void setColumnGap(float columnGap) {
+  @ReactProp(name = ViewProps.COLUMN_GAP)
+  public void setColumnGap(Dynamic columnGap) {
     if (isVirtual()) {
       return;
     }
-    super.setColumnGap(PixelUtil.toPixelFromDIP(columnGap));
+
+    mTempYogaValue.setFromDynamic(columnGap);
+    switch (mTempYogaValue.unit) {
+      case POINT:
+      case UNDEFINED:
+        setColumnGap(mTempYogaValue.value);
+        break;
+      case AUTO:
+        setColumnGapAuto();
+        break;
+      case PERCENT:
+        setColumnGapPercent(mTempYogaValue.value);
+        break;
+    }
+
+    columnGap.recycle();
   }
 
-  @ReactProp(name = ViewProps.GAP, defaultFloat = YogaConstants.UNDEFINED)
-  public void setGap(float gap) {
+  @ReactProp(name = ViewProps.GAP)
+  public void setGap(Dynamic gap) {
     if (isVirtual()) {
       return;
     }
-    super.setGap(PixelUtil.toPixelFromDIP(gap));
+
+    mTempYogaValue.setFromDynamic(gap);
+    switch (mTempYogaValue.unit) {
+      case POINT:
+      case UNDEFINED:
+        setGap(mTempYogaValue.value);
+        break;
+      case AUTO:
+        setGapAuto();
+        break;
+      case PERCENT:
+        setGapPercent(mTempYogaValue.value);
+        break;
+    }
+
+    gap.recycle();
   }
 
   @ReactProp(name = ViewProps.FLEX_SHRINK, defaultFloat = 0f)

diff --git a/...react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java b/...react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java
@@ -318,10 +318,22 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
 
   void setRowGap(float rowGap);
 
+  void setRowGapAuto();
+
+  void setRowGapPercent(float percent);
+
   void setColumnGap(float columnGap);
 
+  void setColumnGapAuto();
+
+  void setColumnGapPercent(float percent);
+
   void setGap(float gap);
 
+  void setGapAuto();
+
+  void setGapPercent(float percent);
+
   void setFlexShrink(float flexShrink);
 
   void setFlexBasis(float flexBasis);

diff --git a/...t-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java b/...t-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java
@@ -827,16 +827,46 @@ public void setRowGap(float rowGap) {
     mYogaNode.setGap(YogaGutter.ROW, rowGap);
   }
 
+  @Override
+  public void setRowGapAuto() {
+    mYogaNode.setGapAuto(YogaGutter.ROW);
+  }
+
+  @Override
+  public void setRowGapPercent(float percent) {
+    mYogaNode.setGapPercent(YogaGutter.ROW, percent);
+  }
+
   @Override
   public void setColumnGap(float columnGap) {
     mYogaNode.setGap(YogaGutter.COLUMN, columnGap);
   }
 
+  @Override
+  public void setColumnGapAuto() {
+    mYogaNode.setGapAuto(YogaGutter.COLUMN);
+  }
+
+  @Override
+  public void setColumnGapPercent(float percent) {
+    mYogaNode.setGapPercent(YogaGutter.COLUMN, percent);
+  }
+
   @Override
   public void setGap(float gap) {
     mYogaNode.setGap(YogaGutter.ALL, gap);
   }
 
+  @Override
+  public void setGapPercent(float percent) {
+    mYogaNode.setGap(YogaGutter.ALL, percent);
+  }
+
+  @Override
+  public void setGapAuto() {
+    mYogaNode.setGapAuto(YogaGutter.ALL);
+  }
+
   @Override
   public void setFlexShrink(float flexShrink) {
     mYogaNode.setFlexShrink(flexShrink);

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNative.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNative.java
@@ -109,6 +109,7 @@ public class YogaNative {
   static native float jni_YGNodeStyleGetGapJNI(long nativePointer, int gutter);
   static native void jni_YGNodeStyleSetGapJNI(long nativePointer, int gutter, float gapLength);
   static native void jni_YGNodeStyleSetGapPercentJNI(long nativePointer, int gutter, float gapLength);
+  static native void jni_YGNodeStyleSetGapAutoJNI(long nativePointer, int gutter);
   static native void jni_YGNodeSetHasMeasureFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetHasBaselineFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetStyleInputsJNI(long nativePointer, float[] styleInputsArray, int size);

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNode.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNode.java
@@ -194,6 +194,8 @@ public interface Inputs {
 
   public abstract void setGapPercent(YogaGutter gutter, float gapLength);
 
+  public abstract void setGapAuto(YogaGutter gutter);
+
   public abstract float getLayoutX();
 
   public abstract float getLayoutY();

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNodeJNIBase.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaNodeJNIBase.java
@@ -726,4 +726,9 @@ public void setGap(YogaGutter gutter, float gapLength) {
   public void setGapPercent(YogaGutter gutter, float gapLength) {
     YogaNative.jni_YGNodeStyleSetGapPercentJNI(mNativePointer, gutter.intValue(), gapLength);
   }
+
+  @Override
+  public void setGapAuto(YogaGutter gutter) {
+    YogaNative.jni_YGNodeStyleSetGapAutoJNI(mNativePointer, gutter.intValue());
+  }
 }
diff --git a/packages/react-native/ReactAndroid/src/main/jni/first-party/yogajni/jni/YGJNIVanilla.cpp b/packages/react-native/ReactAndroid/src/main/jni/first-party/yogajni/jni/YGJNIVanilla.cpp
@@ -727,6 +727,15 @@ static void jni_YGNodeStyleSetGapPercentJNI(
       static_cast<float>(gapLength));
 }
 
+static void jni_YGNodeStyleSetGapAutoJNI(
+    JNIEnv* /*env*/,
+    jobject /*obj*/,
+    jlong nativePointer,
+    jint gutter) {
+  YGNodeStyleSetGapAuto(
+      _jlong2YGNodeRef(nativePointer), static_cast<YGGutter>(gutter));
+}
+
 // Yoga specific properties, not compatible with flexbox specification
 YG_NODE_JNI_STYLE_PROP(jfloat, float, AspectRatio);
 
@@ -959,6 +968,9 @@ static JNINativeMethod methods[] = {
     {"jni_YGNodeStyleSetGapPercentJNI",
      "(JIF)V",
      (void*)jni_YGNodeStyleSetGapPercentJNI},
+    {"jni_YGNodeStyleSetGapAutoJNI",
+     "(JI)V",
+     (void*)jni_YGNodeStyleSetGapAutoJNI},
     {"jni_YGNodeSetHasBaselineFuncJNI",
      "(JZ)V",
      (void*)jni_YGNodeSetHasBaselineFuncJNI},

diff --git a/...ages/react-native/ReactAndroid/src/test/java/com/facebook/testutils/fakes/FakeYogaNode.kt b/...ages/react-native/ReactAndroid/src/test/java/com/facebook/testutils/fakes/FakeYogaNode.kt
@@ -217,6 +217,10 @@ class FakeYogaNode : YogaNode() {
     // no-op
   }
 
+  override fun setGapAuto(gutter: YogaGutter?, gapLength: Float) {
+    // no-op
+  }
+
   override fun setGapPercent(gutter: YogaGutter?, gapLength: Float) {
     // no-op
   }

diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp
@@ -267,6 +267,11 @@ void YGNodeStyleSetGap(
       node, scopedEnum(gutter), value::points(gapLength));
 }
 
+void YGNodeStyleSetGapAuto(YGNodeRef node, YGGutter gutter) {
+  updateStyle<&Style::gap, &Style::setGap>(
+      node, scopedEnum(gutter), value::ofAuto());
+}
+
 void YGNodeStyleSetGapPercent(YGNodeRef node, YGGutter gutter, float percent) {
   updateStyle<&Style::gap, &Style::setGap>(
       node, scopedEnum(gutter), value::percent(percent));

diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.h b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.h
@@ -89,6 +89,7 @@ YG_EXPORT float YGNodeStyleGetBorder(YGNodeConstRef node, YGEdge edge);
 
 YG_EXPORT void
 YGNodeStyleSetGap(YGNodeRef node, YGGutter gutter, float gapLength);
+YG_EXPORT void YGNodeStyleSetGapAuto(YGNodeRef node, YGGutter gutter);
 YG_EXPORT void
 YGNodeStyleSetGapPercent(YGNodeRef node, YGGutter gutter, float gapLength);
 YG_EXPORT float YGNodeStyleGetGap(YGNodeConstRef node, YGGutter gutter);