From 28ab57ca017418cf13a479b106ed5337c5a88e0e Mon Sep 17 00:00:00 2001 From: Nishan Date: Fri, 4 Nov 2022 18:12:53 +0530 Subject: [PATCH 01/10] wip: flex gap docs --- docs/flexbox.md | 243 +++++++++++++++++++++++++++++++++++++++++++ docs/layout-props.md | 30 ++++++ 2 files changed, 273 insertions(+) diff --git a/docs/flexbox.md b/docs/flexbox.md index f4b44da084c..f65a7ea3b25 100644 --- a/docs/flexbox.md +++ b/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 ( + + + + + ); +}; + +const PreviewLayout = ({ + label, + children, + values, + selectedValue, + setSelectedValue, + handleRowGapChange, + rowGap +}) => ( + + {label} + + Edit Row Gap + handleRowGapChange(Number(v)) } /> + + + {children} + + +); + +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 ( + + + + + ); +}; + +const PreviewLayout = ({ + label, + children, + values, + selectedValue, + setSelectedValue, + handleColumnGapChange, + columnGap +}) => ( + + {label} + + Edit Column Gap + handleColumnGapChange(Number(v)) } /> + + + {children} + + +); + +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 ( + + + + + + + + + ); +}; + +const PreviewLayout = ({ + label, + children, + values, + selectedValue, + setSelectedValue, + handleGapChange, + gap +}) => ( + + {label} + + Edit Gap + handleGapChange(Number(v)) } /> + + + {children} + + +); + +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. diff --git a/docs/layout-props.md b/docs/layout-props.md index c39be8674cb..98886807ca9 100644 --- a/docs/layout-props.md +++ b/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 rows. 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`. From 52adec17f9087139d5c2732095bb40ccb2afc3fd Mon Sep 17 00:00:00 2001 From: Nishan Date: Fri, 4 Nov 2022 22:34:47 +0530 Subject: [PATCH 02/10] fix --- docs/layout-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/layout-props.md b/docs/layout-props.md index 98886807ca9..c7fd5b33abf 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -303,7 +303,7 @@ 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 rows. It works like `column-gap` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`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 | | ------ | -------- | From ca4502b8c1b1e967bf05c1ba96737e5259d5f6ba Mon Sep 17 00:00:00 2001 From: Nishan Date: Sat, 5 Nov 2022 09:18:34 +0530 Subject: [PATCH 03/10] improve example and description --- docs/flexbox.md | 94 +++++++++++++++++++++++++------------------- docs/layout-props.md | 12 ++++-- 2 files changed, 62 insertions(+), 44 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index f65a7ea3b25..2be44e85798 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -1197,59 +1197,78 @@ const styles = StyleSheet.create({ export default App; ``` -## Gap, Row Gap and Column Gap +## Row Gap, Column Gap and Gap -- [`rowGap`](layout-props#rowGap) property sets the size of the gap (gutter) between an element's rows. +- [`rowGap`](layout-props#rowgap) property sets the size of the gap (gutter) between an element's rows. -```SnackPlayer name=Row%20Gap +- [`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, TouchableOpacity, Text, StyleSheet, TextInput } from "react-native"; +import { View, Text, StyleSheet, TextInput } from "react-native"; -const RowGap = () => { +const RowGapAndColumnGap = () => { const [rowGap, setRowGap] = useState(10); + const [columnGap, setColumnGap] = useState(10); return ( - - + > + + + + + ); }; const PreviewLayout = ({ - label, children, - values, - selectedValue, - setSelectedValue, + handleColumnGapChange, handleRowGapChange, - rowGap + rowGap, + columnGap, }) => ( - - {label} - - Edit Row Gap - handleRowGapChange(Number(v)) } /> - - - {children} + + + + Row Gap + handleRowGapChange(Number(v))} + /> + + + Column Gap + handleColumnGapChange(Number(v))} + /> + + {children} ); 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, @@ -1261,23 +1280,18 @@ const styles = StyleSheet.create({ marginTop: 8, backgroundColor: "aliceblue", maxHeight: 400, + flexWrap: "wrap", + alignContent: "flex-start", }, box: { width: 50, height: 80, }, - label: { - textAlign: "center", - marginBottom: 10, - fontSize: 24, - }, }); -export default RowGap; +export default RowGapAndColumnGap; ``` -- [`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"; @@ -1353,8 +1367,6 @@ const styles = StyleSheet.create({ 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"; diff --git a/docs/layout-props.md b/docs/layout-props.md index c7fd5b33abf..f09b51dab7b 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -303,7 +303,9 @@ 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. +`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 | | ------ | -------- | @@ -419,7 +421,9 @@ 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. +`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 | | ------ | -------- | @@ -741,7 +745,9 @@ 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. +`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 | | ------ | -------- | From f43af8d7943688a2868ba53e47e6b210471d13e5 Mon Sep 17 00:00:00 2001 From: Nishan Date: Sat, 5 Nov 2022 09:25:39 +0530 Subject: [PATCH 04/10] cleanup --- docs/flexbox.md | 160 ------------------------------------------------ 1 file changed, 160 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index 2be44e85798..f3c44f5adab 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -1292,166 +1292,6 @@ const styles = StyleSheet.create({ export default RowGapAndColumnGap; ``` -```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 ( - - - - - ); -}; - -const PreviewLayout = ({ - label, - children, - values, - selectedValue, - setSelectedValue, - handleColumnGapChange, - columnGap -}) => ( - - {label} - - Edit Column Gap - handleColumnGapChange(Number(v)) } /> - - - {children} - - -); - -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; -``` - -```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 ( - - - - - - - - - ); -}; - -const PreviewLayout = ({ - label, - children, - values, - selectedValue, - setSelectedValue, - handleGapChange, - gap -}) => ( - - {label} - - Edit Gap - handleGapChange(Number(v)) } /> - - - {children} - - -); - -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. From d14aec73679ee7eff60e09e3450f805d76777bc6 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Sat, 5 Nov 2022 03:24:22 -0700 Subject: [PATCH 05/10] Apply suggestions from code review --- docs/flexbox.md | 82 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 74 insertions(+), 8 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index f3c44f5adab..aca0859a5e5 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -1199,11 +1199,11 @@ 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. +- [`rowGap`](layout-props#rowgap) 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. +- [`columnGap`](layout-props#columngap) 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`. +- [`gap`](layout-props#gap) 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. @@ -1222,11 +1222,11 @@ const RowGapAndColumnGap = () => { rowGap={rowGap} handleRowGapChange={setRowGap} > - - - - - + + + + + ); }; @@ -1257,6 +1257,72 @@ const PreviewLayout = ({ /> + + {children} + + +); + +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, + }, + box1: { + backgroundColor: "orangered", + }, + box2: { + backgroundColor: "orange", + }, + box3: { + backgroundColor: "mediumseagreen", + }, + box4: { + backgroundColor: "deepskyblue", + }, + box5: { + backgroundColor: "mediumturquoise", + }, +}); + +export default RowGapAndColumnGap; + + handleRowGapChange(Number(v))} + /> + + + Column Gap + handleColumnGapChange(Number(v))} + /> + + {children} ); From 5ed848d35d98b833a4e69f4977b735a6136a85e3 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Sat, 5 Nov 2022 03:26:20 -0700 Subject: [PATCH 06/10] Fixup code block --- docs/flexbox.md | 137 +++++++++++++++++++++++------------------------- 1 file changed, 65 insertions(+), 72 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index aca0859a5e5..4481fed207c 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -61,112 +61,105 @@ You can learn more [here](https://yogalayout.com/docs/flex-direction). ```SnackPlayer name=Flex%20Direction import React, { useState } from "react"; -import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; +import { View, Text, StyleSheet, TextInput } from "react-native"; -const FlexDirectionBasics = () => { - const [flexDirection, setflexDirection] = useState("column"); +const RowGapAndColumnGap = () => { + const [rowGap, setRowGap] = useState(10); + const [columnGap, setColumnGap] = useState(10); return ( - - - + + + + + ); }; const PreviewLayout = ({ - label, children, - values, - selectedValue, - setSelectedValue, + handleColumnGapChange, + handleRowGapChange, + rowGap, + columnGap, }) => ( - - {label} - - {values.map((value) => ( - setSelectedValue(value)} - style={[ - styles.button, - selectedValue === value && styles.selected, - ]} - > - - {value} - - - ))} + + + + Row Gap + handleRowGapChange(Number(v))} + /> + + + Column Gap + handleColumnGapChange(Number(v))} + /> + - + {children} ); 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: 50, - }, - row: { - flexDirection: "row", - flexWrap: "wrap", + height: 80, }, - button: { - paddingHorizontal: 8, - paddingVertical: 6, - borderRadius: 4, - backgroundColor: "oldlace", - alignSelf: "flex-start", - marginHorizontal: "1%", - marginBottom: 6, - minWidth: "48%", - textAlign: "center", + box1: { + backgroundColor: "orangered", }, - selected: { - backgroundColor: "coral", - borderWidth: 0, + box2: { + backgroundColor: "orange", }, - buttonLabel: { - fontSize: 12, - fontWeight: "500", - color: "coral", + box3: { + backgroundColor: "mediumseagreen", }, - selectedLabel: { - color: "white", + box4: { + backgroundColor: "deepskyblue", }, - label: { - textAlign: "center", - marginBottom: 10, - fontSize: 24, + box5: { + backgroundColor: "mediumturquoise", }, }); -export default FlexDirectionBasics; +export default RowGapAndColumnGap; + ``` ## Layout Direction From 9eb0be6163f8a4a41efe3fc37ffaabc95de566a4 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Sat, 5 Nov 2022 03:29:59 -0700 Subject: [PATCH 07/10] Fix bad merge --- docs/flexbox.md | 186 +++++++++++++++++++----------------------------- 1 file changed, 72 insertions(+), 114 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index 4481fed207c..2e713e576c5 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -61,105 +61,112 @@ You can learn more [here](https://yogalayout.com/docs/flex-direction). ```SnackPlayer name=Flex%20Direction import React, { useState } from "react"; -import { View, Text, StyleSheet, TextInput } from "react-native"; +import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; -const RowGapAndColumnGap = () => { - const [rowGap, setRowGap] = useState(10); - const [columnGap, setColumnGap] = useState(10); +const FlexDirectionBasics = () => { + const [flexDirection, setflexDirection] = useState("column"); return ( - - - - - + + + ); }; const PreviewLayout = ({ + label, children, - handleColumnGapChange, - handleRowGapChange, - rowGap, - columnGap, + values, + selectedValue, + setSelectedValue, }) => ( - - - - Row Gap - handleRowGapChange(Number(v))} - /> - - - Column Gap - handleColumnGapChange(Number(v))} - /> - + + {label} + + {values.map((value) => ( + setSelectedValue(value)} + style={[ + styles.button, + selectedValue === value && styles.selected, + ]} + > + + {value} + + + ))} - + {children} ); 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, + height: 50, }, - box1: { - backgroundColor: "orangered", + row: { + flexDirection: "row", + flexWrap: "wrap", }, - box2: { - backgroundColor: "orange", + button: { + paddingHorizontal: 8, + paddingVertical: 6, + borderRadius: 4, + backgroundColor: "oldlace", + alignSelf: "flex-start", + marginHorizontal: "1%", + marginBottom: 6, + minWidth: "48%", + textAlign: "center", }, - box3: { - backgroundColor: "mediumseagreen", + selected: { + backgroundColor: "coral", + borderWidth: 0, }, - box4: { - backgroundColor: "deepskyblue", + buttonLabel: { + fontSize: 12, + fontWeight: "500", + color: "coral", }, - box5: { - backgroundColor: "mediumturquoise", + selectedLabel: { + color: "white", + }, + label: { + textAlign: "center", + marginBottom: 10, + fontSize: 24, }, }); -export default RowGapAndColumnGap; - +export default FlexDirectionBasics; ``` ## Layout Direction @@ -1299,55 +1306,6 @@ const styles = StyleSheet.create({ }, }); -export default RowGapAndColumnGap; - - handleRowGapChange(Number(v))} - /> - - - Column Gap - handleColumnGapChange(Number(v))} - /> - - - {children} - -); - -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; ``` From bf8fb4893bbd5ee46f64237d6b249ed6e1fc46a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= Date: Sat, 5 Nov 2022 17:33:34 +0530 Subject: [PATCH 08/10] Update docs/layout-props.md Co-authored-by: Nick Gerleman --- docs/layout-props.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/layout-props.md b/docs/layout-props.md index f09b51dab7b..2aaa02227a0 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -303,9 +303,7 @@ 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. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. | Type | Required | | ------ | -------- | From 4dfb35bdecbe5fec9adb8eeaaaba3275fb41d7cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= Date: Sat, 5 Nov 2022 17:33:48 +0530 Subject: [PATCH 09/10] Update docs/layout-props.md Co-authored-by: Nick Gerleman --- docs/layout-props.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/layout-props.md b/docs/layout-props.md index 2aaa02227a0..b3ab761813c 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -419,9 +419,7 @@ 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. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. | Type | Required | | ------ | -------- | From 2e5289b7ef7cf9233ba8aa335a3220975ad2fa89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= Date: Sat, 5 Nov 2022 17:33:59 +0530 Subject: [PATCH 10/10] Update docs/layout-props.md Co-authored-by: Nick Gerleman --- docs/layout-props.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/layout-props.md b/docs/layout-props.md index b3ab761813c..3e142eb9a12 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -741,9 +741,7 @@ 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. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. | Type | Required | | ------ | -------- |