feat: flex gap docs (0.71.0 release)

docs/flexbox.md

@@ -1197,6 +1197,249 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
+## Gap, Row Gap and Column Gap
+
+- [`rowGap`](layout-props#rowGap) property sets the size of the gap (gutter) between an element's rows.
+
+```SnackPlayer name=Row%20Gap
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet, TextInput } from "react-native";
+
+const RowGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      label="rowGap"
+      handleRowGapChange={setRowGap}
+      rowGap={rowGap}>
+      <View
+        style={[styles.box, { backgroundColor: "orangered" }]}
+      />
+      <View
+        style={[styles.box, { backgroundColor: "orange" }]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+  handleRowGapChange,
+  rowGap
+}) => (
+  <View style={{ padding: 10, flex: 1 }}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={{rowGap: 4}}>
+      <Text>Edit Row Gap</Text>
+      <TextInput style={styles.input} value={rowGap} onChangeText={(v) => handleRowGapChange(Number(v)) } />
+    </View>
+    <View
+      style={[
+        styles.container,
+        {rowGap},
+      ]}
+    >
+      {children}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: "center",
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: "aliceblue",
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  label: {
+    textAlign: "center",
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default RowGap;
+```
+
+- [`columnGap`](layout-props#columnGap) property sets the size of the gap (gutter) between an element's columns.
+
+```SnackPlayer name=Column%20Gap
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet, TextInput } from "react-native";
+
+const ColumnGap = () => {
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      label="columnGap"
+      handleColumnGapChange={setColumnGap}
+      columnGap={columnGap}>
+      <View
+        style={[styles.box, { backgroundColor: "orangered" }]}
+      />
+      <View
+        style={[styles.box, { backgroundColor: "orange" }]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+  handleColumnGapChange,
+  columnGap
+}) => (
+  <View style={{ padding: 10, flex: 1 }}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={{rowGap: 4}}>
+      <Text>Edit Column Gap</Text>
+      <TextInput style={styles.input} value={columnGap} onChangeText={(v) => handleColumnGapChange(Number(v)) } />
+    </View>
+    <View
+      style={[
+        styles.container,
+        {flexDirection:"row", columnGap },
+      ]}
+    >
+      {children}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: "center",
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: "aliceblue",
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  label: {
+    textAlign: "center",
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default ColumnGap;
+```
+
+- [`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 space between items.
+
+```SnackPlayer name=Gap
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet, TextInput } from "react-native";
+
+const Gap = () => {
+  const [gap, setGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      label="gap"
+      handleGapChange={setGap}
+      gap={gap}>
+      <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 = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+  handleGapChange,
+  gap
+}) => (
+  <View style={{ padding: 10, flex: 1 }}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={{rowGap: 4}}>
+      <Text>Edit Gap</Text>
+      <TextInput style={styles.input} value={gap} onChangeText={(v) => handleGapChange(Number(v)) } />
+    </View>
+    <View
+      style={[
+        styles.container,
+        {flexWrap:"wrap", alignContent:"flex-start", gap },
+      ]}
+    >
+      {children}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: "center",
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: "aliceblue",
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  label: {
+    textAlign: "center",
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default Gap;
+```
+
 ## 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,16 @@ 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 like `column-gap` in CSS. 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 +417,16 @@ 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 like `gap` in CSS. 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 +739,16 @@ 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 like `row-gap` in CSS. 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`.