facebook · intergalacticspacehighway · Aug 6, 2022 · Aug 6, 2022
diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -31,6 +31,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderTopWidth: true,
   borderWidth: true,
   bottom: true,
+  columnGap: true,
   direction: true,
   display: true,
   end: true,
@@ -40,6 +41,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexGrow: true,
   flexShrink: true,
   flexWrap: true,
+  gap: true,
   height: true,
   justifyContent: true,
   left: true,
@@ -68,6 +70,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   paddingVertical: true,
   position: true,
   right: true,
+  rowGap: true,
   start: true,
   top: true,
   width: true,

diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -438,12 +438,15 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    *  `width` and `height`. However, if there's not enough space,
    *  the component will shrink to its `minWidth` and `minHeight`.
    *
-   * flexGrow, flexShrink, and flexBasis work the same as in CSS.
+   * flexGrow, flexShrink, rowGap, columnGap, gap and flexBasis work the same as in CSS.
    */
   flex?: number,
   flexGrow?: number,
   flexShrink?: number,
   flexBasis?: number | string,
+  rowGap?: number,
+  columnGap?: number,
+  gap?: number,
 
   /**
    * Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a

diff --git a/Libraries/StyleSheet/splitLayoutProps.js b/Libraries/StyleSheet/splitLayoutProps.js
@@ -49,6 +49,9 @@ export default function splitLayoutProps(props: ?____ViewStyle_Internal): {
         case 'bottom':
         case 'top':
         case 'transform':
+        case 'rowGap':
+        case 'columnGap':
+        case 'gap':
           // $FlowFixMe[cannot-write]
           // $FlowFixMe[incompatible-use]
           // $FlowFixMe[prop-missing]

diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h
@@ -152,6 +152,9 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
 
 @property (nonatomic, assign) float flex;
 @property (nonatomic, assign) float flexGrow;
+@property (nonatomic, assign) float rowGap;
+@property (nonatomic, assign) float columnGap;
+@property (nonatomic, assign) float gap;
 @property (nonatomic, assign) float flexShrink;
 @property (nonatomic, assign) YGValue flexBasis;
 

diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m
@@ -642,6 +642,20 @@ - (YGValue)flexBasis
   return YGNodeStyleGetFlexBasis(_yogaNode);
 }
 
+#define RCT_GAP_PROPERTY(setProp, getProp, cssProp, type, gap) \
+  -(void)set##setProp : (type)value                         \
+  {                                                         \
+    YGNodeStyleSet##cssProp(_yogaNode, gap, value);              \
+  }                                                         \
+  -(type)getProp                                            \
+  {                                                         \
+    return YGNodeStyleGet##cssProp(_yogaNode, gap);              \
+  }
+
+RCT_GAP_PROPERTY(RowGap, rowGap, Gap, float, YGGapRow);
+RCT_GAP_PROPERTY(ColumnGap, columnGap, Gap, float, YGGapColumn);
+RCT_GAP_PROPERTY(Gap, gap, Gap, float, YGGapAll);
+
 #define RCT_STYLE_PROPERTY(setProp, getProp, cssProp, type) \
   -(void)set##setProp : (type)value                         \
   {                                                         \

diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
@@ -416,6 +416,9 @@ - (RCTShadowView *)shadowView
 
 RCT_EXPORT_SHADOW_PROPERTY(flex, float)
 RCT_EXPORT_SHADOW_PROPERTY(flexGrow, float)
+RCT_EXPORT_SHADOW_PROPERTY(rowGap, float)
+RCT_EXPORT_SHADOW_PROPERTY(columnGap, float)
+RCT_EXPORT_SHADOW_PROPERTY(gap, float)
 RCT_EXPORT_SHADOW_PROPERTY(flexShrink, float)
 RCT_EXPORT_SHADOW_PROPERTY(flexBasis, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(flexDirection, YGFlexDirection)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
@@ -224,6 +224,30 @@ public void setFlexGrow(float flexGrow) {
     super.setFlexGrow(flexGrow);
   }
 
+  @ReactProp(name = ViewProps.ROW_GAP, defaultFloat = 0f)
+  public void setRowGap(float rowGap) {
+    if (isVirtual()) {
+      return;
+    }
+    super.setRowGap(rowGap);
+  }
+
+  @ReactProp(name = ViewProps.COLUMN_GAP, defaultFloat = 0f)
+  public void setColumnGap(float columnGap) {
+    if (isVirtual()) {
+      return;
+    }
+    super.setColumnGap(columnGap);
+  }
+
+  @ReactProp(name = ViewProps.GAP, defaultFloat = 0f)
+  public void setGap(float gap) {
+    if (isVirtual()) {
+      return;
+    }
+    super.setGap(gap);
+  }
+
   @ReactProp(name = ViewProps.FLEX_SHRINK, defaultFloat = 0f)
   public void setFlexShrink(float flexShrink) {
     if (isVirtual()) {

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java
@@ -307,6 +307,12 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
   void setFlex(float flex);
 
   void setFlexGrow(float flexGrow);
+
+  void setRowGap(float rowGap);
+
+  void setColumnGap(float columnGap);
+
+  void setGap(float gap);
 
   void setFlexShrink(float flexShrink);
 

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java
@@ -794,6 +794,21 @@ public void setFlexGrow(float flexGrow) {
     mYogaNode.setFlexGrow(flexGrow);
   }
 
+  @Override
+  public void setRowGap(float rowGap) {
+    mYogaNode.setRowGap(rowGap);
+  }
+
+  @Override
+  public void setColumnGap(float columnGap) {
+    mYogaNode.setColumnGap(columnGap);
+  }
+
+  @Override
+  public void setGap(float gap) {
+    mYogaNode.setGap(gap);
+  }
+
   @Override
   public void setFlexShrink(float flexShrink) {
     mYogaNode.setFlexShrink(flexShrink);

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -32,6 +32,9 @@ public class ViewProps {
   public static final String FLEX_BASIS = "flexBasis";
   public static final String FLEX_DIRECTION = "flexDirection";
   public static final String FLEX_WRAP = "flexWrap";
+  public static final String ROW_GAP = "rowGap";
+  public static final String COLUMN_GAP = "columnGap";
+  public static final String GAP = "gap";
   public static final String HEIGHT = "height";
   public static final String JUSTIFY_CONTENT = "justifyContent";
   public static final String LEFT = "left";
@@ -203,6 +206,9 @@ public class ViewProps {
               FLEX_BASIS,
               FLEX_DIRECTION,
               FLEX_GROW,
+              ROW_GAP,
+              COLUMN_GAP,
+              GAP,
               FLEX_SHRINK,
               FLEX_WRAP,
               JUSTIFY_CONTENT,

diff --git a/ReactAndroid/src/main/java/com/facebook/yoga/YogaNative.java b/ReactAndroid/src/main/java/com/facebook/yoga/YogaNative.java
@@ -68,6 +68,12 @@ public class YogaNative {
   static native void jni_YGNodeStyleSetFlexJNI(long nativePointer, float flex);
   static native float jni_YGNodeStyleGetFlexGrowJNI(long nativePointer);
   static native void jni_YGNodeStyleSetFlexGrowJNI(long nativePointer, float flexGrow);
+  static native float jni_YGNodeStyleGetRowGapJNI(long nativePointer);
+  static native void jni_YGNodeStyleSetRowGapJNI(long nativePointer, float rowGap);
+  static native float jni_YGNodeStyleGetColumnGapJNI(long nativePointer);
+  static native void jni_YGNodeStyleSetColumnGapJNI(long nativePointer, float columnGap);
+  static native float jni_YGNodeStyleGetGapJNI(long nativePointer);
+  static native void jni_YGNodeStyleSetGapJNI(long nativePointer, float gap);
   static native float jni_YGNodeStyleGetFlexShrinkJNI(long nativePointer);
   static native void jni_YGNodeStyleSetFlexShrinkJNI(long nativePointer, float flexShrink);
   static native long jni_YGNodeStyleGetFlexBasisJNI(long nativePointer);

diff --git a/ReactAndroid/src/main/java/com/facebook/yoga/YogaNode.java b/ReactAndroid/src/main/java/com/facebook/yoga/YogaNode.java
@@ -107,6 +107,19 @@ public interface Inputs {
   public abstract float getFlexGrow();
 
   public abstract void setFlexGrow(float flexGrow);
+
+  public abstract float getGap();
+
+  public abstract void setGap(float gap);
+
+  public abstract float getRowGap();
+
+  public abstract void setRowGap(float rowGap);
+
+  public abstract float getColumnGap();
+
+  public abstract void setColumnGap(float columnGap);
+
 
   public abstract float getFlexShrink();
 

diff --git a/ReactAndroid/src/main/java/com/facebook/yoga/YogaNodeJNIBase.java b/ReactAndroid/src/main/java/com/facebook/yoga/YogaNodeJNIBase.java
@@ -344,6 +344,30 @@ public void setFlexGrow(float flexGrow) {
     YogaNative.jni_YGNodeStyleSetFlexGrowJNI(mNativePointer, flexGrow);
   }
 
+  public float getRowGap() {
+    return YogaNative.jni_YGNodeStyleGetRowGapJNI(mNativePointer);
+  }
+
+  public void setRowGap(float rowGap) {
+    YogaNative.jni_YGNodeStyleSetRowGapJNI(mNativePointer, rowGap);
+  }
+
+  public float getColumnGap() {
+    return YogaNative.jni_YGNodeStyleGetColumnGapJNI(mNativePointer);
+  }
+
+  public void setColumnGap(float columnGap) {
+    YogaNative.jni_YGNodeStyleSetColumnGapJNI(mNativePointer, columnGap);
+  }
+
+  public float getGap() {
+    return YogaNative.jni_YGNodeStyleGetGapJNI(mNativePointer);
+  }
+
+  public void setGap(float gap) {
+    YogaNative.jni_YGNodeStyleSetGapJNI(mNativePointer, gap);
+  }
+
   public float getFlexShrink() {
     return YogaNative.jni_YGNodeStyleGetFlexShrinkJNI(mNativePointer);
   }

diff --git a/ReactAndroid/src/main/java/com/facebook/yoga/YogaProps.java b/ReactAndroid/src/main/java/com/facebook/yoga/YogaProps.java
@@ -84,6 +84,12 @@ public interface YogaProps {
   void setFlexDirection(YogaFlexDirection direction);
 
   void setFlexGrow(float flexGrow);
+
+  void setRowGap(float rowGap);
+
+  void setColumnGap(float columnGap);
+
+  void setGap(float gap);
 
   void setFlexShrink(float flexShrink);
 
@@ -135,6 +141,12 @@ public interface YogaProps {
 
   float getFlexGrow();
 
+  float getRowGap();
+
+  float getGap();
+
+  float getColumnGap();
+
   float getFlexShrink();
 
   YogaValue getFlexBasis();

diff --git a/ReactAndroid/src/main/jni/first-party/yogajni/jni/YGJNIVanilla.cpp b/ReactAndroid/src/main/jni/first-party/yogajni/jni/YGJNIVanilla.cpp
@@ -493,6 +493,19 @@ static void jni_YGNodeCopyStyleJNI(
         static_cast<float>(value));                                   \
   }
 
+
+#define YG_NODE_JNI_STYLE_GAP_PROP(name, gapType)                         \
+  static jfloat jni_YGNodeStyleGet##name##JNI(                             \
+      JNIEnv* env, jobject obj, jlong nativePointer) {                       \
+    return (jfloat) YGNodeStyleGetGap(_jlong2YGNodeRef(nativePointer), gapType); \
+  }                                                                          \
+                                                                             \
+  static void jni_YGNodeStyleSet##name##JNI(                                 \
+      JNIEnv* env, jobject obj, jlong nativePointer, jfloat value) {       \
+    YGNodeStyleSetGap(                                                    \
+        _jlong2YGNodeRef(nativePointer), gapType, static_cast<float>(value));          \
+  }
+
 YG_NODE_JNI_STYLE_PROP(jint, YGDirection, Direction);
 YG_NODE_JNI_STYLE_PROP(jint, YGFlexDirection, FlexDirection);
 YG_NODE_JNI_STYLE_PROP(jint, YGJustify, JustifyContent);
@@ -507,6 +520,10 @@ YG_NODE_JNI_STYLE_PROP(jfloat, float, Flex);
 YG_NODE_JNI_STYLE_PROP(jfloat, float, FlexGrow);
 YG_NODE_JNI_STYLE_PROP(jfloat, float, FlexShrink);
 
+YG_NODE_JNI_STYLE_GAP_PROP(Gap, YGGapAll);
+YG_NODE_JNI_STYLE_GAP_PROP(RowGap, YGGapRow);
+YG_NODE_JNI_STYLE_GAP_PROP(ColumnGap, YGGapColumn);
+
 YG_NODE_JNI_STYLE_UNIT_PROP_AUTO(FlexBasis);
 YG_NODE_JNI_STYLE_UNIT_PROP_AUTO(Width);
 YG_NODE_JNI_STYLE_UNIT_PROP(MinWidth);
@@ -852,6 +869,24 @@ static JNINativeMethod methods[] = {
     {"jni_YGNodeStyleSetFlexGrowJNI",
      "(JF)V",
      (void*) jni_YGNodeStyleSetFlexGrowJNI},
+          {"jni_YGNodeStyleGetGapJNI",
+     "(J)F",
+     (void*) jni_YGNodeStyleGetGapJNI},
+    {"jni_YGNodeStyleSetGapJNI",
+     "(JF)V",
+     (void*) jni_YGNodeStyleSetGapJNI},
+     {"jni_YGNodeStyleGetRowGapJNI",
+     "(J)F",
+     (void*) jni_YGNodeStyleGetRowGapJNI},
+    {"jni_YGNodeStyleSetRowGapJNI",
+     "(JF)V",
+     (void*) jni_YGNodeStyleSetRowGapJNI},
+     {"jni_YGNodeStyleGetColumnGapJNI",
+     "(J)F",
+     (void*) jni_YGNodeStyleGetColumnGapJNI},
+    {"jni_YGNodeStyleSetColumnGapJNI",
+     "(JF)V",
+     (void*) jni_YGNodeStyleSetColumnGapJNI},
     {"jni_YGNodeStyleGetFlexShrinkJNI",
      "(J)F",
      (void*) jni_YGNodeStyleGetFlexShrinkJNI},

diff --git a/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
@@ -162,6 +162,12 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
           "flex", yogaStyle.flex(), defaultYogaStyle.flex()),
       debugStringConvertibleItem(
           "flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
+      debugStringConvertibleItem(
+          "rowGap", yogaStyle.gap()[YGGapRow], defaultYogaStyle.gap()[YGGapRow]),
+      debugStringConvertibleItem(
+          "columnGap", yogaStyle.gap()[YGGapColumn], defaultYogaStyle.gap()[YGGapColumn]),
+      debugStringConvertibleItem(
+          "gap", yogaStyle.gap()[YGGapAll], defaultYogaStyle.gap()[YGGapAll]),
       debugStringConvertibleItem(
           "flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
       debugStringConvertibleItem(

diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h
@@ -266,6 +266,13 @@ static inline YGStyle convertRawProp(
       "",
       sourceValue.padding(),
       yogaStyle.padding());
+
+  yogaStyle.gap()[YGGapRow] = convertRawProp(context, rawProps, "rowGap", sourceValue.gap()[YGGapRow], yogaStyle.gap()[YGGapRow]);
+
+  yogaStyle.gap()[YGGapColumn] = convertRawProp(context, rawProps, "columnGap", sourceValue.gap()[YGGapColumn], yogaStyle.gap()[YGGapColumn]);
+
+  yogaStyle.gap()[YGGapAll] = convertRawProp(context, rawProps, "gap", sourceValue.gap()[YGGapAll], yogaStyle.gap()[YGGapAll]);
+
   yogaStyle.border() = convertRawProp(
       context,
       rawProps,

diff --git a/ReactCommon/react/test_utils/shadowTreeGeneration.h b/ReactCommon/react/test_utils/shadowTreeGeneration.h
@@ -231,6 +231,7 @@ static inline ShadowNode::Unshared messWithYogaStyles(
       "marginRight",  "marginBottom",  "paddingLeft", "paddingTop",
       "paddingRight", "paddingBottom", "width",       "height",
       "maxWidth",     "maxHeight",     "minWidth",    "minHeight",
+      "rowGap",       "columnGap",     "gap",
   };
 
   for (auto const &property : properties) {

diff --git a/ReactCommon/yoga/yoga/YGEnums.cpp b/ReactCommon/yoga/yoga/YGEnums.cpp
@@ -107,6 +107,18 @@ const char* YGFlexDirectionToString(const YGFlexDirection value) {
   return "unknown";
 }
 
+const char* YGFlexDirectionToString(const YGGap value) {
+  switch (value) {
+    case YGGapRow:
+      return "row";
+    case YGGapColumn:
+      return "column";
+    case YGGapAll:
+      return "all";
+  }
+  return "unknown";
+}
+
 const char* YGJustifyToString(const YGJustify value) {
   switch (value) {
     case YGJustifyFlexStart:

diff --git a/ReactCommon/yoga/yoga/YGEnums.h b/ReactCommon/yoga/yoga/YGEnums.h
@@ -96,6 +96,13 @@ YG_ENUM_SEQ_DECL(
     YGFlexDirectionRow,
     YGFlexDirectionRowReverse)
 
+YG_ENUM_SEQ_DECL(
+    YGGap,
+    YGGapRow,
+    YGGapColumn,
+    YGGapAll)
+
+
 YG_ENUM_SEQ_DECL(
     YGJustify,
     YGJustifyFlexStart,