feat: flex gap docs (0.71.0 release)

docs/flexbox.md

@@ -1197,6 +1197,101 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) property sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) property sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) property sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` alongwith `gap` to add consistent spacing between items.
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap
+import React, { useState } from "react";
+import { View, Text, StyleSheet, TextInput } from "react-native";
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}
+    >
+      <View style={[styles.box, { backgroundColor: "orangered" }]} />
+      <View style={[styles.box, { backgroundColor: "orange" }]} />
+      <View style={[styles.box, { backgroundColor: "mediumseagreen" }]} />
+      <View style={[styles.box, { backgroundColor: "deepskyblue" }]} />
+      <View style={[styles.box, { backgroundColor: "mediumturquoise" }]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={(v) => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={(v) => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, { rowGap, columnGap }]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: { alignItems: "center" },
+  inputContainer: {
+    gap: 4,
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  previewContainer: { padding: 10, flex: 1 },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: "center",
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: "aliceblue",
+    maxHeight: 400,
+    flexWrap: "wrap",
+    alignContent: "flex-start",
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
 ## Width and Height
 
 The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.

docs/layout-props.md

@@ -301,6 +301,18 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of
 
 ---
 
+### `columnGap`
+
+`columnGap` property sets the size of the gap (gutter) between an element's columns. It works similar to `column-gap` in CSS, but in React Native you must use points. Percentage unit is not supported.
+
+See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
 ### `direction`
 
 `direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://yogalayout.com/docs/layout-direction for more details.
@@ -407,6 +419,18 @@ When `flex` is -1, the component is normally sized according to `width` and `hei
 
 ---
 
+### `gap`
+
+`gap` property sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. It works similar to `gap` in CSS, but in React Native you must use points. Percentage unit is not supported.
+
+See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
 ### `height`
 
 `height` sets the height of this component.
@@ -719,6 +743,18 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h
 
 ---
 
+### `rowGap`
+
+`rowGap` property sets the size of the gap (gutter) between an element's rows. It works similar to `row-gap` in CSS, but in React Native you must use points. Percentage unit is not supported.
+
+See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
 ### `start`
 
 When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.