Last active
January 21, 2022 04:38
-
-
Save intergalacticspacehighway/95e5dc6cc08f35d56a507146826e0c5f to your computer and use it in GitHub Desktop.
React native flex gap patch - only works on iOS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js | |
index 4d6f0dd..e120116 100644 | |
--- a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js | |
+++ b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js | |
@@ -13,104 +13,104 @@ import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid | |
import {Platform} from 'react-native'; | |
const ReactNativeViewConfig = { | |
- uiViewClassName: 'RCTView', | |
+ uiViewClassName: "RCTView", | |
baseModuleName: null, | |
- Manager: 'ViewManager', | |
- Commands: ({}: {...}), | |
- Constants: ({}: {...}), | |
+ Manager: "ViewManager", | |
+ Commands: ({}: { ... }), | |
+ Constants: ({}: { ... }), | |
bubblingEventTypes: { | |
...ReactNativeViewViewConfigAndroid.bubblingEventTypes, | |
topBlur: { | |
phasedRegistrationNames: { | |
- bubbled: 'onBlur', | |
- captured: 'onBlurCapture', | |
+ bubbled: "onBlur", | |
+ captured: "onBlurCapture", | |
}, | |
}, | |
topChange: { | |
phasedRegistrationNames: { | |
- bubbled: 'onChange', | |
- captured: 'onChangeCapture', | |
+ bubbled: "onChange", | |
+ captured: "onChangeCapture", | |
}, | |
}, | |
topEndEditing: { | |
phasedRegistrationNames: { | |
- bubbled: 'onEndEditing', | |
- captured: 'onEndEditingCapture', | |
+ bubbled: "onEndEditing", | |
+ captured: "onEndEditingCapture", | |
}, | |
}, | |
topFocus: { | |
phasedRegistrationNames: { | |
- bubbled: 'onFocus', | |
- captured: 'onFocusCapture', | |
+ bubbled: "onFocus", | |
+ captured: "onFocusCapture", | |
}, | |
}, | |
topKeyPress: { | |
phasedRegistrationNames: { | |
- bubbled: 'onKeyPress', | |
- captured: 'onKeyPressCapture', | |
+ bubbled: "onKeyPress", | |
+ captured: "onKeyPressCapture", | |
}, | |
}, | |
topPress: { | |
phasedRegistrationNames: { | |
- bubbled: 'onPress', | |
- captured: 'onPressCapture', | |
+ bubbled: "onPress", | |
+ captured: "onPressCapture", | |
}, | |
}, | |
topSubmitEditing: { | |
phasedRegistrationNames: { | |
- bubbled: 'onSubmitEditing', | |
- captured: 'onSubmitEditingCapture', | |
+ bubbled: "onSubmitEditing", | |
+ captured: "onSubmitEditingCapture", | |
}, | |
}, | |
topTouchCancel: { | |
phasedRegistrationNames: { | |
- bubbled: 'onTouchCancel', | |
- captured: 'onTouchCancelCapture', | |
+ bubbled: "onTouchCancel", | |
+ captured: "onTouchCancelCapture", | |
}, | |
}, | |
topTouchEnd: { | |
phasedRegistrationNames: { | |
- bubbled: 'onTouchEnd', | |
- captured: 'onTouchEndCapture', | |
+ bubbled: "onTouchEnd", | |
+ captured: "onTouchEndCapture", | |
}, | |
}, | |
topTouchMove: { | |
phasedRegistrationNames: { | |
- bubbled: 'onTouchMove', | |
- captured: 'onTouchMoveCapture', | |
+ bubbled: "onTouchMove", | |
+ captured: "onTouchMoveCapture", | |
}, | |
}, | |
topTouchStart: { | |
phasedRegistrationNames: { | |
- bubbled: 'onTouchStart', | |
- captured: 'onTouchStartCapture', | |
+ bubbled: "onTouchStart", | |
+ captured: "onTouchStartCapture", | |
}, | |
}, | |
}, | |
directEventTypes: { | |
...ReactNativeViewViewConfigAndroid.directEventTypes, | |
topAccessibilityAction: { | |
- registrationName: 'onAccessibilityAction', | |
+ registrationName: "onAccessibilityAction", | |
}, | |
topAccessibilityEscape: { | |
- registrationName: 'onAccessibilityEscape', | |
+ registrationName: "onAccessibilityEscape", | |
}, | |
topAccessibilityTap: { | |
- registrationName: 'onAccessibilityTap', | |
+ registrationName: "onAccessibilityTap", | |
}, | |
topLayout: { | |
- registrationName: 'onLayout', | |
+ registrationName: "onLayout", | |
}, | |
topMagicTap: { | |
- registrationName: 'onMagicTap', | |
+ registrationName: "onMagicTap", | |
}, | |
// Events for react-native-gesture-handler (T45765076) | |
// Remove once this library can handle JS View Configs | |
onGestureHandlerEvent: { | |
- registrationName: 'onGestureHandlerEvent', | |
+ registrationName: "onGestureHandlerEvent", | |
}, | |
onGestureHandlerStateChange: { | |
- registrationName: 'onGestureHandlerStateChange', | |
+ registrationName: "onGestureHandlerStateChange", | |
}, | |
}, | |
validAttributes: { | |
@@ -132,25 +132,25 @@ const ReactNativeViewConfig = { | |
alignSelf: true, | |
aspectRatio: true, | |
backfaceVisibility: true, | |
- backgroundColor: {process: require('../../StyleSheet/processColor')}, | |
- borderBottomColor: {process: require('../../StyleSheet/processColor')}, | |
+ backgroundColor: { process: require("../../StyleSheet/processColor") }, | |
+ borderBottomColor: { process: require("../../StyleSheet/processColor") }, | |
borderBottomEndRadius: true, | |
borderBottomLeftRadius: true, | |
borderBottomRightRadius: true, | |
borderBottomStartRadius: true, | |
borderBottomWidth: true, | |
- borderColor: {process: require('../../StyleSheet/processColor')}, | |
- borderEndColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderColor: { process: require("../../StyleSheet/processColor") }, | |
+ borderEndColor: { process: require("../../StyleSheet/processColor") }, | |
borderEndWidth: true, | |
- borderLeftColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderLeftColor: { process: require("../../StyleSheet/processColor") }, | |
borderLeftWidth: true, | |
borderRadius: true, | |
- borderRightColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderRightColor: { process: require("../../StyleSheet/processColor") }, | |
borderRightWidth: true, | |
- borderStartColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderStartColor: { process: require("../../StyleSheet/processColor") }, | |
borderStartWidth: true, | |
borderStyle: true, | |
- borderTopColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderTopColor: { process: require("../../StyleSheet/processColor") }, | |
borderTopEndRadius: true, | |
borderTopLeftRadius: true, | |
borderTopRightRadius: true, | |
@@ -170,8 +170,11 @@ const ReactNativeViewConfig = { | |
flexGrow: true, | |
flexShrink: true, | |
flexWrap: true, | |
+ rowGap: true, | |
+ columnGap: true, | |
+ gap: true, | |
height: true, | |
- hitSlop: {diff: (require('../../Utilities/differ/insetsDiffer'): any)}, | |
+ hitSlop: { diff: (require("../../Utilities/differ/insetsDiffer"): any) }, | |
importantForAccessibility: true, | |
justifyContent: true, | |
left: true, | |
@@ -214,8 +217,8 @@ const ReactNativeViewConfig = { | |
rotation: true, | |
scaleX: true, | |
scaleY: true, | |
- shadowColor: {process: require('../../StyleSheet/processColor')}, | |
- shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, | |
+ shadowColor: { process: require("../../StyleSheet/processColor") }, | |
+ shadowOffset: { diff: require("../../Utilities/differ/sizesDiffer") }, | |
shadowOpacity: true, | |
shadowRadius: true, | |
shouldRasterizeIOS: true, | |
@@ -226,25 +229,25 @@ const ReactNativeViewConfig = { | |
alignSelf: true, | |
aspectRatio: true, | |
backfaceVisibility: true, | |
- backgroundColor: {process: require('../../StyleSheet/processColor')}, | |
- borderBottomColor: {process: require('../../StyleSheet/processColor')}, | |
+ backgroundColor: { process: require("../../StyleSheet/processColor") }, | |
+ borderBottomColor: { process: require("../../StyleSheet/processColor") }, | |
borderBottomEndRadius: true, | |
borderBottomLeftRadius: true, | |
borderBottomRightRadius: true, | |
borderBottomStartRadius: true, | |
borderBottomWidth: true, | |
- borderColor: {process: require('../../StyleSheet/processColor')}, | |
- borderEndColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderColor: { process: require("../../StyleSheet/processColor") }, | |
+ borderEndColor: { process: require("../../StyleSheet/processColor") }, | |
borderEndWidth: true, | |
- borderLeftColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderLeftColor: { process: require("../../StyleSheet/processColor") }, | |
borderLeftWidth: true, | |
borderRadius: true, | |
- borderRightColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderRightColor: { process: require("../../StyleSheet/processColor") }, | |
borderRightWidth: true, | |
- borderStartColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderStartColor: { process: require("../../StyleSheet/processColor") }, | |
borderStartWidth: true, | |
borderStyle: true, | |
- borderTopColor: {process: require('../../StyleSheet/processColor')}, | |
+ borderTopColor: { process: require("../../StyleSheet/processColor") }, | |
borderTopEndRadius: true, | |
borderTopLeftRadius: true, | |
borderTopRightRadius: true, | |
@@ -252,7 +255,7 @@ const ReactNativeViewConfig = { | |
borderTopWidth: true, | |
borderWidth: true, | |
bottom: true, | |
- color: {process: require('../../StyleSheet/processColor')}, | |
+ color: { process: require("../../StyleSheet/processColor") }, | |
decomposedMatrix: true, | |
direction: true, | |
display: true, | |
@@ -264,6 +267,9 @@ const ReactNativeViewConfig = { | |
flexGrow: true, | |
flexShrink: true, | |
flexWrap: true, | |
+ rowGap: true, | |
+ columnGap: true, | |
+ gap: true, | |
fontFamily: true, | |
fontSize: true, | |
fontStyle: true, | |
@@ -290,7 +296,7 @@ const ReactNativeViewConfig = { | |
minWidth: true, | |
opacity: true, | |
overflow: true, | |
- overlayColor: {process: require('../../StyleSheet/processColor')}, | |
+ overlayColor: { process: require("../../StyleSheet/processColor") }, | |
padding: true, | |
paddingBottom: true, | |
paddingEnd: true, | |
@@ -306,25 +312,27 @@ const ReactNativeViewConfig = { | |
rotation: true, | |
scaleX: true, | |
scaleY: true, | |
- shadowColor: {process: require('../../StyleSheet/processColor')}, | |
- shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, | |
+ shadowColor: { process: require("../../StyleSheet/processColor") }, | |
+ shadowOffset: { diff: require("../../Utilities/differ/sizesDiffer") }, | |
shadowOpacity: true, | |
shadowRadius: true, | |
start: true, | |
textAlign: true, | |
textAlignVertical: true, | |
- textDecorationColor: {process: require('../../StyleSheet/processColor')}, | |
+ textDecorationColor: { | |
+ process: require("../../StyleSheet/processColor"), | |
+ }, | |
textDecorationLine: true, | |
textDecorationStyle: true, | |
- textShadowColor: {process: require('../../StyleSheet/processColor')}, | |
+ textShadowColor: { process: require("../../StyleSheet/processColor") }, | |
textShadowOffset: true, | |
textShadowRadius: true, | |
textTransform: true, | |
- tintColor: {process: require('../../StyleSheet/processColor')}, | |
+ tintColor: { process: require("../../StyleSheet/processColor") }, | |
top: true, | |
- transform: ((Platform.OS === 'ios' | |
- ? {diff: require('../../Utilities/differ/matricesDiffer')} | |
- : {process: require('../../StyleSheet/processTransform')}): any), | |
+ transform: ((Platform.OS === "ios" | |
+ ? { diff: require("../../Utilities/differ/matricesDiffer") } | |
+ : { process: require("../../StyleSheet/processTransform") }): any), | |
transformMatrix: true, | |
translateX: true, | |
translateY: true, | |
@@ -334,9 +342,9 @@ const ReactNativeViewConfig = { | |
}, | |
testID: true, | |
top: true, | |
- transform: ((Platform.OS === 'ios' | |
- ? {diff: require('../../Utilities/differ/matricesDiffer')} | |
- : {process: require('../../StyleSheet/processTransform')}): any), | |
+ transform: ((Platform.OS === "ios" | |
+ ? { diff: require("../../Utilities/differ/matricesDiffer") } | |
+ : { process: require("../../StyleSheet/processTransform") }): any), | |
translateX: true, | |
translateY: true, | |
width: true, | |
diff --git a/node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedLayoutPropTypes.js b/node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedLayoutPropTypes.js | |
index 4d4488a..630fbf5 100644 | |
--- a/node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedLayoutPropTypes.js | |
+++ b/node_modules/react-native/Libraries/DeprecatedPropTypes/DeprecatedLayoutPropTypes.js | |
@@ -13,8 +13,8 @@ | |
const ReactPropTypes = require('prop-types'); | |
const LayoutPropTypes = { | |
- display: (ReactPropTypes.oneOf(['none', 'flex']): React$PropType$Primitive< | |
- 'none' | 'flex', | |
+ display: (ReactPropTypes.oneOf(["none", "flex"]): React$PropType$Primitive< | |
+ "none" | "flex" | |
>), | |
width: (ReactPropTypes.oneOfType([ | |
ReactPropTypes.number, | |
@@ -144,76 +144,76 @@ const LayoutPropTypes = { | |
borderBottomWidth: ReactPropTypes.number, | |
borderLeftWidth: ReactPropTypes.number, | |
position: (ReactPropTypes.oneOf([ | |
- 'absolute', | |
- 'relative', | |
- ]): React$PropType$Primitive<'absolute' | 'relative'>), | |
+ "absolute", | |
+ "relative", | |
+ ]): React$PropType$Primitive<"absolute" | "relative">), | |
flexDirection: (ReactPropTypes.oneOf([ | |
- 'row', | |
- 'row-reverse', | |
- 'column', | |
- 'column-reverse', | |
+ "row", | |
+ "row-reverse", | |
+ "column", | |
+ "column-reverse", | |
]): React$PropType$Primitive< | |
- 'row' | 'row-reverse' | 'column' | 'column-reverse', | |
+ "row" | "row-reverse" | "column" | "column-reverse" | |
>), | |
flexWrap: (ReactPropTypes.oneOf([ | |
- 'wrap', | |
- 'nowrap', | |
- 'wrap-reverse', | |
- ]): React$PropType$Primitive<'wrap' | 'nowrap' | 'wrap-reverse'>), | |
+ "wrap", | |
+ "nowrap", | |
+ "wrap-reverse", | |
+ ]): React$PropType$Primitive<"wrap" | "nowrap" | "wrap-reverse">), | |
justifyContent: (ReactPropTypes.oneOf([ | |
- 'flex-start', | |
- 'flex-end', | |
- 'center', | |
- 'space-between', | |
- 'space-around', | |
- 'space-evenly', | |
+ "flex-start", | |
+ "flex-end", | |
+ "center", | |
+ "space-between", | |
+ "space-around", | |
+ "space-evenly", | |
]): React$PropType$Primitive< | |
- | 'flex-start' | |
- | 'flex-end' | |
- | 'center' | |
- | 'space-between' | |
- | 'space-around' | |
- | 'space-evenly', | |
+ | "flex-start" | |
+ | "flex-end" | |
+ | "center" | |
+ | "space-between" | |
+ | "space-around" | |
+ | "space-evenly" | |
>), | |
alignItems: (ReactPropTypes.oneOf([ | |
- 'flex-start', | |
- 'flex-end', | |
- 'center', | |
- 'stretch', | |
- 'baseline', | |
+ "flex-start", | |
+ "flex-end", | |
+ "center", | |
+ "stretch", | |
+ "baseline", | |
]): React$PropType$Primitive< | |
- 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline', | |
+ "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | |
>), | |
alignSelf: (ReactPropTypes.oneOf([ | |
- 'auto', | |
- 'flex-start', | |
- 'flex-end', | |
- 'center', | |
- 'stretch', | |
- 'baseline', | |
+ "auto", | |
+ "flex-start", | |
+ "flex-end", | |
+ "center", | |
+ "stretch", | |
+ "baseline", | |
]): React$PropType$Primitive< | |
- 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline', | |
+ "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | |
>), | |
alignContent: (ReactPropTypes.oneOf([ | |
- 'flex-start', | |
- 'flex-end', | |
- 'center', | |
- 'stretch', | |
- 'space-between', | |
- 'space-around', | |
+ "flex-start", | |
+ "flex-end", | |
+ "center", | |
+ "stretch", | |
+ "space-between", | |
+ "space-around", | |
]): React$PropType$Primitive< | |
- | 'flex-start' | |
- | 'flex-end' | |
- | 'center' | |
- | 'stretch' | |
- | 'space-between' | |
- | 'space-around', | |
+ | "flex-start" | |
+ | "flex-end" | |
+ | "center" | |
+ | "stretch" | |
+ | "space-between" | |
+ | "space-around" | |
>), | |
overflow: (ReactPropTypes.oneOf([ | |
- 'visible', | |
- 'hidden', | |
- 'scroll', | |
- ]): React$PropType$Primitive<'visible' | 'hidden' | 'scroll'>), | |
+ "visible", | |
+ "hidden", | |
+ "scroll", | |
+ ]): React$PropType$Primitive<"visible" | "hidden" | "scroll">), | |
flex: ReactPropTypes.number, | |
flexGrow: ReactPropTypes.number, | |
flexShrink: ReactPropTypes.number, | |
@@ -221,13 +221,16 @@ const LayoutPropTypes = { | |
ReactPropTypes.number, | |
ReactPropTypes.string, | |
]): React$PropType$Primitive<number | string>), | |
+ rowGap: ReactPropTypes.number, | |
+ columnGap: ReactPropTypes.number, | |
+ gap: ReactPropTypes.number, | |
aspectRatio: ReactPropTypes.number, | |
zIndex: ReactPropTypes.number, | |
direction: (ReactPropTypes.oneOf([ | |
- 'inherit', | |
- 'ltr', | |
- 'rtl', | |
- ]): React$PropType$Primitive<'inherit' | 'ltr' | 'rtl'>), | |
+ "inherit", | |
+ "ltr", | |
+ "rtl", | |
+ ]): React$PropType$Primitive<"inherit" | "ltr" | "rtl">), | |
}; | |
module.exports = LayoutPropTypes; | |
diff --git a/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js | |
index 95ed2b8..4a34026 100644 | |
--- a/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js | |
+++ b/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js | |
@@ -48,7 +48,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* It works similarly to `display` in CSS, but only support 'flex' and 'none'. | |
* 'flex' is the default. | |
*/ | |
- display?: 'none' | 'flex', | |
+ display?: "none" | "flex", | |
/** `width` sets the width of this component. | |
* | |
@@ -330,7 +330,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* for more details on how `position` differs between React Native | |
* and CSS. | |
*/ | |
- position?: 'absolute' | 'relative', | |
+ position?: "absolute" | "relative", | |
/** `flexDirection` controls which directions children of a container go. | |
* `row` goes left to right, `column` goes top to bottom, and you may | |
@@ -339,7 +339,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction | |
* for more details. | |
*/ | |
- flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse', | |
+ flexDirection?: "row" | "row-reverse" | "column" | "column-reverse", | |
/** `flexWrap` controls whether children can wrap around after they | |
* hit the end of a flex container. | |
@@ -347,7 +347,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap | |
* for more details. | |
*/ | |
- flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse', | |
+ flexWrap?: "wrap" | "nowrap" | "wrap-reverse", | |
/** `justifyContent` aligns children in the main direction. | |
* For example, if children are flowing vertically, `justifyContent` | |
@@ -357,12 +357,12 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* for more details. | |
*/ | |
justifyContent?: | |
- | 'flex-start' | |
- | 'flex-end' | |
- | 'center' | |
- | 'space-between' | |
- | 'space-around' | |
- | 'space-evenly', | |
+ | "flex-start" | |
+ | "flex-end" | |
+ | "center" | |
+ | "space-between" | |
+ | "space-around" | |
+ | "space-evenly", | |
/** `alignItems` aligns children in the cross direction. | |
* For example, if children are flowing vertically, `alignItems` | |
@@ -371,7 +371,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items | |
* for more details. | |
*/ | |
- alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline', | |
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline", | |
/** `alignSelf` controls how a child aligns in the cross direction, | |
* overriding the `alignItems` of the parent. It works like `align-self` | |
@@ -380,12 +380,12 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* for more details. | |
*/ | |
alignSelf?: | |
- | 'auto' | |
- | 'flex-start' | |
- | 'flex-end' | |
- | 'center' | |
- | 'stretch' | |
- | 'baseline', | |
+ | "auto" | |
+ | "flex-start" | |
+ | "flex-end" | |
+ | "center" | |
+ | "stretch" | |
+ | "baseline", | |
/** `alignContent` controls how rows align in the cross direction, | |
* overriding the `alignContent` of the parent. | |
@@ -393,12 +393,12 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* for more details. | |
*/ | |
alignContent?: | |
- | 'flex-start' | |
- | 'flex-end' | |
- | 'center' | |
- | 'stretch' | |
- | 'space-between' | |
- | 'space-around', | |
+ | "flex-start" | |
+ | "flex-end" | |
+ | "center" | |
+ | "stretch" | |
+ | "space-between" | |
+ | "space-around", | |
/** `overflow` controls how children are measured and displayed. | |
* `overflow: hidden` causes views to be clipped while `overflow: scroll` | |
@@ -409,7 +409,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* `overflow: visible` only works on iOS. On Android, all views will clip | |
* their children. | |
*/ | |
- overflow?: 'visible' | 'hidden' | 'scroll', | |
+ overflow?: "visible" | "hidden" | "scroll", | |
/** In React Native `flex` does not work the same way that it does in CSS. | |
* `flex` is a number rather than a string, and it works | |
@@ -434,6 +434,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
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 | |
@@ -471,7 +474,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| | |
* for more details. | |
* @platform ios | |
*/ | |
- direction?: 'inherit' | 'ltr' | 'rtl', | |
+ direction?: "inherit" | "ltr" | "rtl", | |
|}>; | |
type ____TransformStyle_Internal = $ReadOnly<{| | |
diff --git a/node_modules/react-native/Libraries/StyleSheet/splitLayoutProps.js b/node_modules/react-native/Libraries/StyleSheet/splitLayoutProps.js | |
index 2c6fd33..110a3ff 100644 | |
--- a/node_modules/react-native/Libraries/StyleSheet/splitLayoutProps.js | |
+++ b/node_modules/react-native/Libraries/StyleSheet/splitLayoutProps.js | |
@@ -24,6 +24,9 @@ const OUTER_PROPS = Object.assign(Object.create(null), { | |
flexGrow: true, | |
flexShrink: true, | |
flexBasis: true, | |
+ rowGap: true, | |
+ columnGap: true, | |
+ gap: true, | |
alignSelf: true, | |
height: true, | |
minHeight: true, | |
diff --git a/node_modules/react-native/React/Views/RCTShadowView.h b/node_modules/react-native/React/Views/RCTShadowView.h | |
index 4696b14..bae0a51 100644 | |
--- a/node_modules/react-native/React/Views/RCTShadowView.h | |
+++ b/node_modules/react-native/React/Views/RCTShadowView.h | |
@@ -152,6 +152,9 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry | |
@property (nonatomic, assign) float flexGrow; | |
@property (nonatomic, assign) float flexShrink; | |
@property (nonatomic, assign) YGValue flexBasis; | |
+@property (nonatomic, assign) float rowGap; | |
+@property (nonatomic, assign) float columnGap; | |
+@property (nonatomic, assign) float gap; | |
@property (nonatomic, assign) float aspectRatio; | |
diff --git a/node_modules/react-native/React/Views/RCTShadowView.m b/node_modules/react-native/React/Views/RCTShadowView.m | |
index 61894cd..9495bca 100644 | |
--- a/node_modules/react-native/React/Views/RCTShadowView.m | |
+++ b/node_modules/react-native/React/Views/RCTShadowView.m | |
@@ -641,6 +641,22 @@ - (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/node_modules/react-native/React/Views/RCTViewManager.m b/node_modules/react-native/React/Views/RCTViewManager.m | |
index 48dcd0a..c278287 100644 | |
--- a/node_modules/react-native/React/Views/RCTViewManager.m | |
+++ b/node_modules/react-native/React/Views/RCTViewManager.m | |
@@ -391,6 +391,9 @@ - (RCTShadowView *)shadowView | |
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(overflow, YGOverflow) | |
RCT_EXPORT_SHADOW_PROPERTY(display, YGDisplay) | |
diff --git a/node_modules/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/node_modules/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp | |
index 8fe909a..4da756a 100644 | |
--- a/node_modules/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp | |
+++ b/node_modules/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp | |
@@ -67,6 +67,12 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const { | |
"flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()), | |
debugStringConvertibleItem( | |
"flexBasis", yogaStyle.flexBasis(), defaultYogaStyle.flexBasis()), | |
+ 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( | |
"margin", yogaStyle.margin(), defaultYogaStyle.margin()), | |
debugStringConvertibleItem( | |
diff --git a/node_modules/react-native/ReactCommon/react/renderer/components/view/propsConversions.h b/node_modules/react-native/ReactCommon/react/renderer/components/view/propsConversions.h | |
index 89acb27..35a615f 100644 | |
--- a/node_modules/react-native/ReactCommon/react/renderer/components/view/propsConversions.h | |
+++ b/node_modules/react-native/ReactCommon/react/renderer/components/view/propsConversions.h | |
@@ -179,6 +179,13 @@ static inline YGStyle convertRawProp( | |
convertRawProp(rawProps, sourceValue.position(), yogaStyle.position()); | |
yogaStyle.padding() = convertRawProp( | |
rawProps, "padding", "", 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( | |
rawProps, "border", "Width", sourceValue.border(), yogaStyle.border()); | |
yogaStyle.dimensions() = convertRawProp( | |
diff --git a/node_modules/react-native/ReactCommon/react/renderer/mounting/tests/shadowTreeGeneration.h b/node_modules/react-native/ReactCommon/react/renderer/mounting/tests/shadowTreeGeneration.h | |
index 8a2c326..6eb9091 100644 | |
--- a/node_modules/react-native/ReactCommon/react/renderer/mounting/tests/shadowTreeGeneration.h | |
+++ b/node_modules/react-native/ReactCommon/react/renderer/mounting/tests/shadowTreeGeneration.h | |
@@ -181,6 +181,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/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.cpp | |
index c01d3d9..607dad7 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.cpp | |
+++ b/node_modules/react-native/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/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.h b/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.h | |
index 3dc458d..1c3b29e 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.h | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGEnums.h | |
@@ -96,6 +96,12 @@ YG_ENUM_SEQ_DECL( | |
YGFlexDirectionRow, | |
YGFlexDirectionRowReverse) | |
+YG_ENUM_SEQ_DECL( | |
+ YGGap, | |
+ YGGapRow, | |
+ YGGapColumn, | |
+ YGGapAll) | |
+ | |
YG_ENUM_SEQ_DECL( | |
YGJustify, | |
YGJustifyFlexStart, | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.cpp | |
index 1ee1bde..7e23dca 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.cpp | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.cpp | |
@@ -50,89 +50,135 @@ void YGNode::print(void* printContext) { | |
} | |
} | |
-YGFloatOptional YGNode::getLeadingPosition( | |
- const YGFlexDirection axis, | |
- const float axisSize) const { | |
- if (YGFlexDirectionIsRow(axis)) { | |
- auto leadingPosition = YGComputedEdgeValue( | |
- style_.position(), YGEdgeStart, CompactValue::ofUndefined()); | |
- if (!leadingPosition.isUndefined()) { | |
- return YGResolveValue(leadingPosition, axisSize); | |
- } | |
+CompactValue YGNode::computeEdgeValueForRow( | |
+ const YGStyle::Edges& edges, | |
+ YGEdge rowEdge, | |
+ YGEdge edge, | |
+ CompactValue defaultValue) { | |
+ if (!edges[rowEdge].isUndefined()) { | |
+ return edges[rowEdge]; | |
+ } else if (!edges[edge].isUndefined()) { | |
+ return edges[edge]; | |
+ } else if (!edges[YGEdgeHorizontal].isUndefined()) { | |
+ return edges[YGEdgeHorizontal]; | |
+ } else if (!edges[YGEdgeAll].isUndefined()) { | |
+ return edges[YGEdgeAll]; | |
+ } else { | |
+ return defaultValue; | |
} | |
+} | |
- auto leadingPosition = YGComputedEdgeValue( | |
- style_.position(), leading[axis], CompactValue::ofUndefined()); | |
+CompactValue YGNode::computeEdgeValueForColumn( | |
+ const YGStyle::Edges& edges, | |
+ YGEdge edge, | |
+ CompactValue defaultValue) { | |
+ if (!edges[edge].isUndefined()) { | |
+ return edges[edge]; | |
+ } else if (!edges[YGEdgeVertical].isUndefined()) { | |
+ return edges[YGEdgeVertical]; | |
+ } else if (!edges[YGEdgeAll].isUndefined()) { | |
+ return edges[YGEdgeAll]; | |
+ } else { | |
+ return defaultValue; | |
+ } | |
+} | |
- return leadingPosition.isUndefined() | |
- ? YGFloatOptional{0} | |
- : YGResolveValue(leadingPosition, axisSize); | |
+CompactValue YGNode::computeRowGap( | |
+ const YGStyle::Gaps& gaps, | |
+ CompactValue defaultValue) { | |
+ if (!gaps[YGGapRow].isUndefined()) { | |
+ return gaps[YGGapRow]; | |
+ } else if (!gaps[YGGapAll].isUndefined()) { | |
+ return gaps[YGGapAll]; | |
+ } else { | |
+ return defaultValue; | |
+ } | |
} | |
-YGFloatOptional YGNode::getTrailingPosition( | |
- const YGFlexDirection axis, | |
- const float axisSize) const { | |
- if (YGFlexDirectionIsRow(axis)) { | |
- auto trailingPosition = YGComputedEdgeValue( | |
- style_.position(), YGEdgeEnd, CompactValue::ofUndefined()); | |
- if (!trailingPosition.isUndefined()) { | |
- return YGResolveValue(trailingPosition, axisSize); | |
- } | |
+CompactValue YGNode::computeColumnGap( | |
+ const YGStyle::Gaps& gaps, | |
+ CompactValue defaultValue) { | |
+ if (!gaps[YGGapColumn].isUndefined()) { | |
+ return gaps[YGGapColumn]; | |
+ } else if (!gaps[YGGapAll].isUndefined()) { | |
+ return gaps[YGGapAll]; | |
+ } else { | |
+ return defaultValue; | |
} | |
+} | |
- auto trailingPosition = YGComputedEdgeValue( | |
- style_.position(), trailing[axis], CompactValue::ofUndefined()); | |
+YGFloatOptional YGNode::getLeadingPosition( | |
+ const YGFlexDirection axis, | |
+ const float axisSize) const { | |
+ auto leadingPosition = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.position(), | |
+ YGEdgeStart, | |
+ leading[axis], | |
+ CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.position(), leading[axis], CompactValue::ofZero()); | |
+ return YGResolveValue(leadingPosition, axisSize); | |
+} | |
- return trailingPosition.isUndefined() | |
- ? YGFloatOptional{0} | |
- : YGResolveValue(trailingPosition, axisSize); | |
+YGFloatOptional YGNode::getTrailingPosition( | |
+ const YGFlexDirection axis, | |
+ const float axisSize) const { | |
+ auto trailingPosition = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.position(), | |
+ YGEdgeEnd, | |
+ trailing[axis], | |
+ CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.position(), trailing[axis], CompactValue::ofZero()); | |
+ return YGResolveValue(trailingPosition, axisSize); | |
} | |
bool YGNode::isLeadingPositionDefined(const YGFlexDirection axis) const { | |
- return (YGFlexDirectionIsRow(axis) && | |
- !YGComputedEdgeValue( | |
- style_.position(), YGEdgeStart, CompactValue::ofUndefined()) | |
- .isUndefined()) || | |
- !YGComputedEdgeValue( | |
- style_.position(), leading[axis], CompactValue::ofUndefined()) | |
- .isUndefined(); | |
+ auto leadingPosition = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.position(), | |
+ YGEdgeStart, | |
+ leading[axis], | |
+ CompactValue::ofUndefined()) | |
+ : computeEdgeValueForColumn( | |
+ style_.position(), leading[axis], CompactValue::ofUndefined()); | |
+ return !leadingPosition.isUndefined(); | |
} | |
bool YGNode::isTrailingPosDefined(const YGFlexDirection axis) const { | |
- return (YGFlexDirectionIsRow(axis) && | |
- !YGComputedEdgeValue( | |
- style_.position(), YGEdgeEnd, CompactValue::ofUndefined()) | |
- .isUndefined()) || | |
- !YGComputedEdgeValue( | |
- style_.position(), trailing[axis], CompactValue::ofUndefined()) | |
- .isUndefined(); | |
+ auto trailingPosition = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.position(), | |
+ YGEdgeEnd, | |
+ trailing[axis], | |
+ CompactValue::ofUndefined()) | |
+ : computeEdgeValueForColumn( | |
+ style_.position(), trailing[axis], CompactValue::ofUndefined()); | |
+ return !trailingPosition.isUndefined(); | |
} | |
YGFloatOptional YGNode::getLeadingMargin( | |
const YGFlexDirection axis, | |
const float widthSize) const { | |
- if (YGFlexDirectionIsRow(axis) && | |
- !style_.margin()[YGEdgeStart].isUndefined()) { | |
- return YGResolveValueMargin(style_.margin()[YGEdgeStart], widthSize); | |
- } | |
- | |
- return YGResolveValueMargin( | |
- YGComputedEdgeValue( | |
- style_.margin(), leading[axis], CompactValue::ofZero()), | |
- widthSize); | |
+ auto leadingMargin = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.margin(), YGEdgeStart, leading[axis], CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.margin(), leading[axis], CompactValue::ofZero()); | |
+ return YGResolveValueMargin(leadingMargin, widthSize); | |
} | |
YGFloatOptional YGNode::getTrailingMargin( | |
const YGFlexDirection axis, | |
const float widthSize) const { | |
- if (YGFlexDirectionIsRow(axis) && !style_.margin()[YGEdgeEnd].isUndefined()) { | |
- return YGResolveValueMargin(style_.margin()[YGEdgeEnd], widthSize); | |
- } | |
- | |
- return YGResolveValueMargin( | |
- YGComputedEdgeValue( | |
- style_.margin(), trailing[axis], CompactValue::ofZero()), | |
- widthSize); | |
+ auto trailingMargin = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.margin(), YGEdgeEnd, trailing[axis], CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.margin(), trailing[axis], CompactValue::ofZero()); | |
+ return YGResolveValueMargin(trailingMargin, widthSize); | |
} | |
YGFloatOptional YGNode::getMarginForAxis( | |
@@ -141,13 +187,21 @@ YGFloatOptional YGNode::getMarginForAxis( | |
return getLeadingMargin(axis, widthSize) + getTrailingMargin(axis, widthSize); | |
} | |
+YGFloatOptional YGNode::getGapForAxis( | |
+ const YGFlexDirection axis, | |
+ const float widthSize) const { | |
+ auto gap = YGFlexDirectionIsRow(axis) | |
+ ? computeColumnGap(style_.gap(), CompactValue::ofZero()) | |
+ : computeRowGap(style_.gap(), CompactValue::ofZero()); | |
+ return YGResolveValue(gap, widthSize); | |
+} | |
+ | |
YGSize YGNode::measure( | |
float width, | |
YGMeasureMode widthMode, | |
float height, | |
YGMeasureMode heightMode, | |
void* layoutContext) { | |
- | |
return facebook::yoga::detail::getBooleanData(flags, measureUsesContext_) | |
? measure_.withContext( | |
this, width, widthMode, height, heightMode, layoutContext) | |
@@ -448,68 +502,48 @@ bool YGNode::isNodeFlexible() { | |
} | |
float YGNode::getLeadingBorder(const YGFlexDirection axis) const { | |
- YGValue leadingBorder; | |
- if (YGFlexDirectionIsRow(axis) && | |
- !style_.border()[YGEdgeStart].isUndefined()) { | |
- leadingBorder = style_.border()[YGEdgeStart]; | |
- if (leadingBorder.value >= 0) { | |
- return leadingBorder.value; | |
- } | |
- } | |
- | |
- leadingBorder = YGComputedEdgeValue( | |
- style_.border(), leading[axis], CompactValue::ofZero()); | |
- return YGFloatMax(leadingBorder.value, 0.0f); | |
+ YGValue leadingBorder = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.border(), YGEdgeStart, leading[axis], CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.border(), leading[axis], CompactValue::ofZero()); | |
+ return fmaxf(leadingBorder.value, 0.0f); | |
} | |
-float YGNode::getTrailingBorder(const YGFlexDirection flexDirection) const { | |
- YGValue trailingBorder; | |
- if (YGFlexDirectionIsRow(flexDirection) && | |
- !style_.border()[YGEdgeEnd].isUndefined()) { | |
- trailingBorder = style_.border()[YGEdgeEnd]; | |
- if (trailingBorder.value >= 0.0f) { | |
- return trailingBorder.value; | |
- } | |
- } | |
- | |
- trailingBorder = YGComputedEdgeValue( | |
- style_.border(), trailing[flexDirection], CompactValue::ofZero()); | |
- return YGFloatMax(trailingBorder.value, 0.0f); | |
+float YGNode::getTrailingBorder(const YGFlexDirection axis) const { | |
+ YGValue trailingBorder = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.border(), YGEdgeEnd, trailing[axis], CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.border(), trailing[axis], CompactValue::ofZero()); | |
+ return fmaxf(trailingBorder.value, 0.0f); | |
} | |
YGFloatOptional YGNode::getLeadingPadding( | |
const YGFlexDirection axis, | |
const float widthSize) const { | |
- const YGFloatOptional paddingEdgeStart = | |
- YGResolveValue(style_.padding()[YGEdgeStart], widthSize); | |
- if (YGFlexDirectionIsRow(axis) && | |
- !style_.padding()[YGEdgeStart].isUndefined() && | |
- !paddingEdgeStart.isUndefined() && paddingEdgeStart.unwrap() >= 0.0f) { | |
- return paddingEdgeStart; | |
- } | |
- | |
- YGFloatOptional resolvedValue = YGResolveValue( | |
- YGComputedEdgeValue( | |
- style_.padding(), leading[axis], CompactValue::ofZero()), | |
- widthSize); | |
- return YGFloatOptionalMax(resolvedValue, YGFloatOptional(0.0f)); | |
+ auto leadingPadding = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.padding(), | |
+ YGEdgeStart, | |
+ leading[axis], | |
+ CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.padding(), leading[axis], CompactValue::ofZero()); | |
+ return YGFloatOptionalMax( | |
+ YGResolveValue(leadingPadding, widthSize), YGFloatOptional(0.0f)); | |
} | |
YGFloatOptional YGNode::getTrailingPadding( | |
const YGFlexDirection axis, | |
const float widthSize) const { | |
- const YGFloatOptional paddingEdgeEnd = | |
- YGResolveValue(style_.padding()[YGEdgeEnd], widthSize); | |
- if (YGFlexDirectionIsRow(axis) && paddingEdgeEnd >= YGFloatOptional{0.0f}) { | |
- return paddingEdgeEnd; | |
- } | |
- | |
- YGFloatOptional resolvedValue = YGResolveValue( | |
- YGComputedEdgeValue( | |
- style_.padding(), trailing[axis], CompactValue::ofZero()), | |
- widthSize); | |
- | |
- return YGFloatOptionalMax(resolvedValue, YGFloatOptional(0.0f)); | |
+ auto trailingPadding = YGFlexDirectionIsRow(axis) | |
+ ? computeEdgeValueForRow( | |
+ style_.padding(), YGEdgeEnd, trailing[axis], CompactValue::ofZero()) | |
+ : computeEdgeValueForColumn( | |
+ style_.padding(), trailing[axis], CompactValue::ofZero()); | |
+ return YGFloatOptionalMax( | |
+ YGResolveValue(trailingPadding, widthSize), YGFloatOptional(0.0f)); | |
} | |
YGFloatOptional YGNode::getLeadingPaddingAndBorder( | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.h b/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.h | |
index 63d98fe..b8dbac6 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.h | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGNode.h | |
@@ -193,6 +193,25 @@ public: | |
return resolvedDimensions_[index]; | |
} | |
+ static CompactValue computeEdgeValueForColumn( | |
+ const YGStyle::Edges& edges, | |
+ YGEdge edge, | |
+ CompactValue defaultValue); | |
+ | |
+ static CompactValue computeEdgeValueForRow( | |
+ const YGStyle::Edges& edges, | |
+ YGEdge rowEdge, | |
+ YGEdge edge, | |
+ CompactValue defaultValue); | |
+ | |
+ static CompactValue computeRowGap( | |
+ const YGStyle::Gaps& gaps, | |
+ CompactValue defaultValue); | |
+ | |
+ static CompactValue computeColumnGap( | |
+ const YGStyle::Gaps& gaps, | |
+ CompactValue defaultValue); | |
+ | |
// Methods related to positions, margin, padding and border | |
YGFloatOptional getLeadingPosition( | |
const YGFlexDirection axis, | |
@@ -225,6 +244,9 @@ public: | |
YGFloatOptional getMarginForAxis( | |
const YGFlexDirection axis, | |
const float widthSize) const; | |
+ YGFloatOptional getGapForAxis( | |
+ const YGFlexDirection axis, | |
+ const float widthSize) const; | |
// Setters | |
void setContext(void* context) { context_ = context; } | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp | |
index 26efa48..7864373 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp | |
@@ -104,10 +104,13 @@ static void appendEdgeIfNotUndefined( | |
const string& str, | |
const YGStyle::Edges& edges, | |
const YGEdge edge) { | |
- appendNumberIfNotUndefined( | |
- base, | |
- str, | |
- YGComputedEdgeValue(edges, edge, detail::CompactValue::ofUndefined())); | |
+ // TODO: this doesn't take RTL / YGEdgeStart / YGEdgeEnd into account | |
+ auto value = (edge == YGEdgeLeft || edge == YGEdgeRight) | |
+ ? YGNode::computeEdgeValueForRow( | |
+ edges, edge, edge, detail::CompactValue::ofUndefined()) | |
+ : YGNode::computeEdgeValueForColumn( | |
+ edges, edge, detail::CompactValue::ofUndefined()); | |
+ appendNumberIfNotUndefined(base, str, value); | |
} | |
void YGNodeToString( | |
@@ -181,6 +184,15 @@ void YGNodeToString( | |
appendEdges(str, "padding", style.padding()); | |
appendEdges(str, "border", style.border()); | |
+ if (YGNode::computeColumnGap(style.gap(), detail::CompactValue::ofUndefined()) != | |
+ YGNode::computeColumnGap(YGNode().getStyle().gap(), detail::CompactValue::ofUndefined())) { | |
+ appendNumberIfNotUndefined(str, "column-gap", style.gap()[YGGapRow]); | |
+ } | |
+ if (YGNode::computeRowGap(style.gap(), detail::CompactValue::ofUndefined()) != | |
+ YGNode::computeRowGap(YGNode().getStyle().gap(), detail::CompactValue::ofUndefined())) { | |
+ appendNumberIfNotUndefined(str, "row-gap", style.gap()[YGGapRow]); | |
+ } | |
+ | |
appendNumberIfNotAuto(str, "width", style.dimensions()[YGDimensionWidth]); | |
appendNumberIfNotAuto(str, "height", style.dimensions()[YGDimensionHeight]); | |
appendNumberIfNotAuto( | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.cpp | |
index e8033bd..4c53a7d 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.cpp | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.cpp | |
@@ -20,8 +20,11 @@ bool operator==(const YGStyle& lhs, const YGStyle& rhs) { | |
lhs.flexWrap() == rhs.flexWrap() && lhs.overflow() == rhs.overflow() && | |
lhs.display() == rhs.display() && | |
YGValueEqual(lhs.flexBasis(), rhs.flexBasis()) && | |
- lhs.margin() == rhs.margin() && lhs.position() == rhs.position() && | |
- lhs.padding() == rhs.padding() && lhs.border() == rhs.border() && | |
+ lhs.margin() == rhs.margin() && | |
+ lhs.position() == rhs.position() && | |
+ lhs.padding() == rhs.padding() && | |
+ lhs.border() == rhs.border() && | |
+ lhs.gap() == rhs.gap() && | |
lhs.dimensions() == rhs.dimensions() && | |
lhs.minDimensions() == rhs.minDimensions() && | |
lhs.maxDimensions() == rhs.maxDimensions(); | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.h b/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.h | |
index aab7599..d89488e 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.h | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/YGStyle.h | |
@@ -29,6 +29,7 @@ class YOGA_EXPORT YGStyle { | |
public: | |
using Dimensions = Values<YGDimension>; | |
using Edges = Values<YGEdge>; | |
+ using Gaps = Values<YGGap>; | |
template <typename T> | |
struct BitfieldRef { | |
@@ -113,6 +114,7 @@ private: | |
Edges position_ = {}; | |
Edges padding_ = {}; | |
Edges border_ = {}; | |
+ Gaps gap_ = {}; | |
Dimensions dimensions_{CompactValue::ofAuto()}; | |
Dimensions minDimensions_ = {}; | |
Dimensions maxDimensions_ = {}; | |
@@ -210,6 +212,9 @@ public: | |
const Edges& border() const { return border_; } | |
IdxRef<YGEdge, &YGStyle::border_> border() { return {*this}; } | |
+ const Gaps& gap() const { return gap_; } | |
+ IdxRef<YGGap, &YGStyle::gap_> gap() { return {*this}; } | |
+ | |
const Dimensions& dimensions() const { return dimensions_; } | |
IdxRef<YGDimension, &YGStyle::dimensions_> dimensions() { return {*this}; } | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp | |
index 97e6407..6f62c8e 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp | |
@@ -106,38 +106,12 @@ static int YGDefaultLog( | |
#undef YG_UNUSED | |
#endif | |
-YOGA_EXPORT bool YGFloatIsUndefined(const float value) { | |
+static inline bool YGDoubleIsUndefined(const double value) { | |
return facebook::yoga::isUndefined(value); | |
} | |
-detail::CompactValue YGComputedEdgeValue( | |
- const YGStyle::Edges& edges, | |
- YGEdge edge, | |
- detail::CompactValue defaultValue) { | |
- if (!edges[edge].isUndefined()) { | |
- return edges[edge]; | |
- } | |
- | |
- if ((edge == YGEdgeTop || edge == YGEdgeBottom) && | |
- !edges[YGEdgeVertical].isUndefined()) { | |
- return edges[YGEdgeVertical]; | |
- } | |
- | |
- if ((edge == YGEdgeLeft || edge == YGEdgeRight || edge == YGEdgeStart || | |
- edge == YGEdgeEnd) && | |
- !edges[YGEdgeHorizontal].isUndefined()) { | |
- return edges[YGEdgeHorizontal]; | |
- } | |
- | |
- if (!edges[YGEdgeAll].isUndefined()) { | |
- return edges[YGEdgeAll]; | |
- } | |
- | |
- if (edge == YGEdgeStart || edge == YGEdgeEnd) { | |
- return detail::CompactValue::ofUndefined(); | |
- } | |
- | |
- return defaultValue; | |
+YOGA_EXPORT bool YGFloatIsUndefined(const float value) { | |
+ return facebook::yoga::isUndefined(value); | |
} | |
YOGA_EXPORT void* YGNodeGetContext(YGNodeRef node) { | |
@@ -823,6 +797,28 @@ YOGA_EXPORT float YGNodeStyleGetBorder( | |
return static_cast<YGValue>(border).value; | |
} | |
+YOGA_EXPORT void YGNodeStyleSetGap( | |
+ const YGNodeRef node, | |
+ const YGGap gap, | |
+ const float gapValue) { | |
+ auto value = detail::CompactValue::ofMaybe<YGUnitPoint>(gapValue); | |
+ updateIndexedStyleProp<MSVC_HINT(gap)>( | |
+ node, &YGStyle::gap, gap, value); | |
+} | |
+ | |
+YOGA_EXPORT float YGNodeStyleGetGap( | |
+ const YGNodeConstRef node, | |
+ const YGGap gap) { | |
+ auto gapValue = node->getStyle().gap()[gap]; | |
+ if (gapValue.isUndefined() || gapValue.isAuto()) { | |
+ // TODO(T26792433): Rather than returning YGUndefined, change the api to | |
+ // return YGFloatOptional. | |
+ return YGUndefined; | |
+ } | |
+ | |
+ return static_cast<YGValue>(gapValue).value; | |
+} | |
+ | |
// Yoga specific properties, not compatible with flexbox specification | |
// TODO(T26792433): Change the API to accept YGFloatOptional. | |
@@ -1681,40 +1677,33 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions( | |
availableHeight = YGUndefined; | |
} | |
- const float paddingAndBorderAxisRow = | |
- YGNodePaddingAndBorderForAxis(node, YGFlexDirectionRow, ownerWidth); | |
- const float paddingAndBorderAxisColumn = | |
- YGNodePaddingAndBorderForAxis(node, YGFlexDirectionColumn, ownerWidth); | |
- const float marginAxisRow = | |
- node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap(); | |
- const float marginAxisColumn = | |
- node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap(); | |
+ const auto& padding = node->getLayout().padding; | |
+ const auto& border = node->getLayout().border; | |
+ const float paddingAndBorderAxisRow = padding[YGEdgeLeft] + | |
+ padding[YGEdgeRight] + border[YGEdgeLeft] + border[YGEdgeRight]; | |
+ const float paddingAndBorderAxisColumn = padding[YGEdgeTop] + | |
+ padding[YGEdgeBottom] + border[YGEdgeTop] + border[YGEdgeBottom]; | |
// We want to make sure we don't call measure with negative size | |
const float innerWidth = YGFloatIsUndefined(availableWidth) | |
? availableWidth | |
- : YGFloatMax(0, availableWidth - marginAxisRow - paddingAndBorderAxisRow); | |
+ : YGFloatMax(0, availableWidth - paddingAndBorderAxisRow); | |
const float innerHeight = YGFloatIsUndefined(availableHeight) | |
? availableHeight | |
- : YGFloatMax( | |
- 0, availableHeight - marginAxisColumn - paddingAndBorderAxisColumn); | |
+ : YGFloatMax(0, availableHeight - paddingAndBorderAxisColumn); | |
if (widthMeasureMode == YGMeasureModeExactly && | |
heightMeasureMode == YGMeasureModeExactly) { | |
// Don't bother sizing the text if both dimensions are already defined. | |
node->setLayoutMeasuredDimension( | |
YGNodeBoundAxis( | |
- node, | |
- YGFlexDirectionRow, | |
- availableWidth - marginAxisRow, | |
- ownerWidth, | |
- ownerWidth), | |
+ node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth), | |
YGDimensionWidth); | |
node->setLayoutMeasuredDimension( | |
YGNodeBoundAxis( | |
node, | |
YGFlexDirectionColumn, | |
- availableHeight - marginAxisColumn, | |
+ availableHeight, | |
ownerHeight, | |
ownerWidth), | |
YGDimensionHeight); | |
@@ -1751,7 +1740,7 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions( | |
(widthMeasureMode == YGMeasureModeUndefined || | |
widthMeasureMode == YGMeasureModeAtMost) | |
? measuredSize.width + paddingAndBorderAxisRow | |
- : availableWidth - marginAxisRow, | |
+ : availableWidth, | |
ownerWidth, | |
ownerWidth), | |
YGDimensionWidth); | |
@@ -1763,7 +1752,7 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions( | |
(heightMeasureMode == YGMeasureModeUndefined || | |
heightMeasureMode == YGMeasureModeAtMost) | |
? measuredSize.height + paddingAndBorderAxisColumn | |
- : availableHeight - marginAxisColumn, | |
+ : availableHeight, | |
ownerHeight, | |
ownerWidth), | |
YGDimensionHeight); | |
@@ -1780,37 +1769,28 @@ static void YGNodeEmptyContainerSetMeasuredDimensions( | |
const YGMeasureMode heightMeasureMode, | |
const float ownerWidth, | |
const float ownerHeight) { | |
- const float paddingAndBorderAxisRow = | |
- YGNodePaddingAndBorderForAxis(node, YGFlexDirectionRow, ownerWidth); | |
- const float paddingAndBorderAxisColumn = | |
- YGNodePaddingAndBorderForAxis(node, YGFlexDirectionColumn, ownerWidth); | |
- const float marginAxisRow = | |
- node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap(); | |
- const float marginAxisColumn = | |
- node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap(); | |
- | |
+ const auto& padding = node->getLayout().padding; | |
+ const auto& border = node->getLayout().border; | |
+ | |
+ float width = availableWidth; | |
+ if (widthMeasureMode == YGMeasureModeUndefined || | |
+ widthMeasureMode == YGMeasureModeAtMost) { | |
+ width = padding[YGEdgeLeft] + padding[YGEdgeRight] + border[YGEdgeLeft] + | |
+ border[YGEdgeRight]; | |
+ } | |
node->setLayoutMeasuredDimension( | |
- YGNodeBoundAxis( | |
- node, | |
- YGFlexDirectionRow, | |
- (widthMeasureMode == YGMeasureModeUndefined || | |
- widthMeasureMode == YGMeasureModeAtMost) | |
- ? paddingAndBorderAxisRow | |
- : availableWidth - marginAxisRow, | |
- ownerWidth, | |
- ownerWidth), | |
+ YGNodeBoundAxis(node, YGFlexDirectionRow, width, ownerWidth, ownerWidth), | |
YGDimensionWidth); | |
+ float height = availableHeight; | |
+ if (heightMeasureMode == YGMeasureModeUndefined || | |
+ heightMeasureMode == YGMeasureModeAtMost) { | |
+ height = padding[YGEdgeTop] + padding[YGEdgeBottom] + border[YGEdgeTop] + | |
+ border[YGEdgeBottom]; | |
+ } | |
node->setLayoutMeasuredDimension( | |
YGNodeBoundAxis( | |
- node, | |
- YGFlexDirectionColumn, | |
- (heightMeasureMode == YGMeasureModeUndefined || | |
- heightMeasureMode == YGMeasureModeAtMost) | |
- ? paddingAndBorderAxisColumn | |
- : availableHeight - marginAxisColumn, | |
- ownerHeight, | |
- ownerWidth), | |
+ node, YGFlexDirectionColumn, height, ownerHeight, ownerWidth), | |
YGDimensionHeight); | |
} | |
@@ -1828,11 +1808,6 @@ static bool YGNodeFixedSizeSetMeasuredDimensions( | |
heightMeasureMode == YGMeasureModeAtMost && availableHeight <= 0.0f) || | |
(widthMeasureMode == YGMeasureModeExactly && | |
heightMeasureMode == YGMeasureModeExactly)) { | |
- auto marginAxisColumn = | |
- node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap(); | |
- auto marginAxisRow = | |
- node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap(); | |
- | |
node->setLayoutMeasuredDimension( | |
YGNodeBoundAxis( | |
node, | |
@@ -1841,7 +1816,7 @@ static bool YGNodeFixedSizeSetMeasuredDimensions( | |
(widthMeasureMode == YGMeasureModeAtMost && | |
availableWidth < 0.0f) | |
? 0.0f | |
- : availableWidth - marginAxisRow, | |
+ : availableWidth, | |
ownerWidth, | |
ownerWidth), | |
YGDimensionWidth); | |
@@ -1854,7 +1829,7 @@ static bool YGNodeFixedSizeSetMeasuredDimensions( | |
(heightMeasureMode == YGMeasureModeAtMost && | |
availableHeight < 0.0f) | |
? 0.0f | |
- : availableHeight - marginAxisColumn, | |
+ : availableHeight, | |
ownerHeight, | |
ownerWidth), | |
YGDimensionHeight); | |
@@ -1878,21 +1853,11 @@ static void YGZeroOutLayoutRecursivly( | |
static float YGNodeCalculateAvailableInnerDim( | |
const YGNodeConstRef node, | |
- YGFlexDirection axis, | |
- float availableDim, | |
- float ownerDim, | |
- float ownerDimForMarginPadding) { | |
- YGFlexDirection direction = | |
- YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn; | |
- YGDimension dimension = | |
- YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight; | |
- | |
- const float margin = | |
- node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap(); | |
- const float paddingAndBorder = | |
- YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding); | |
- | |
- float availableInnerDim = availableDim - margin - paddingAndBorder; | |
+ const YGDimension dimension, | |
+ const float availableDim, | |
+ const float paddingAndBorder, | |
+ const float ownerDim) { | |
+ float availableInnerDim = availableDim - paddingAndBorder; | |
// Max dimension overrides predefined dimension value; Min dimension in turn | |
// overrides both of the above | |
if (!YGFloatIsUndefined(availableInnerDim)) { | |
@@ -2029,6 +1994,7 @@ static YGCollectFlexItemsRowValues YGCalculateCollectFlexItemsRowValues( | |
const YGFlexDirection mainAxis = YGResolveFlexDirection( | |
node->getStyle().flexDirection(), node->resolveDirection(ownerDirection)); | |
const bool isNodeFlexWrap = node->getStyle().flexWrap() != YGWrapNoWrap; | |
+ const float gap = node->getGapForAxis(mainAxis, availableInnerWidth).unwrap(); | |
// Add items to the current line until it's full or we run out of items. | |
uint32_t endOfLineIndex = startOfLineIndex; | |
@@ -2038,9 +2004,13 @@ static YGCollectFlexItemsRowValues YGCalculateCollectFlexItemsRowValues( | |
child->getStyle().positionType() == YGPositionTypeAbsolute) { | |
continue; | |
} | |
+ | |
+ const int32_t elementInLineIndex = endOfLineIndex - startOfLineIndex; | |
+ | |
child->setLineIndex(lineCount); | |
const float childMarginMainAxis = | |
child->getMarginForAxis(mainAxis, availableInnerWidth).unwrap(); | |
+ const float childLeadingGapMainAxis = elementInLineIndex != 0 ? gap : 0.0f; | |
const float flexBasisWithMinAndMaxConstraints = | |
YGNodeBoundAxisWithinMinAndMax( | |
child, | |
@@ -2053,16 +2023,16 @@ static YGCollectFlexItemsRowValues YGCalculateCollectFlexItemsRowValues( | |
// size, we've hit the end of the current line. Break out of the loop and | |
// lay out the current line. | |
if (sizeConsumedOnCurrentLineIncludingMinConstraint + | |
- flexBasisWithMinAndMaxConstraints + childMarginMainAxis > | |
+ flexBasisWithMinAndMaxConstraints + childMarginMainAxis + childLeadingGapMainAxis > | |
availableInnerMainDim && | |
isNodeFlexWrap && flexAlgoRowMeasurement.itemsOnLine > 0) { | |
break; | |
} | |
sizeConsumedOnCurrentLineIncludingMinConstraint += | |
- flexBasisWithMinAndMaxConstraints + childMarginMainAxis; | |
+ flexBasisWithMinAndMaxConstraints + childMarginMainAxis + childLeadingGapMainAxis; | |
flexAlgoRowMeasurement.sizeConsumedOnCurrentLine += | |
- flexBasisWithMinAndMaxConstraints + childMarginMainAxis; | |
+ flexBasisWithMinAndMaxConstraints + childMarginMainAxis + childLeadingGapMainAxis; | |
flexAlgoRowMeasurement.itemsOnLine++; | |
if (child->isNodeFlexible()) { | |
@@ -2472,6 +2442,7 @@ static void YGJustifyMainAxis( | |
node->getLeadingPaddingAndBorder(mainAxis, ownerWidth).unwrap(); | |
const float trailingPaddingAndBorderMain = | |
node->getTrailingPaddingAndBorder(mainAxis, ownerWidth).unwrap(); | |
+ const float gap = node->getGapForAxis(mainAxis, ownerWidth).unwrap(); | |
// If we are using "at most" rules in the main axis, make sure that | |
// remainingFreeSpace is 0 when min main dimension is not given | |
if (measureModeMainDim == YGMeasureModeAtMost && | |
@@ -2519,7 +2490,7 @@ static void YGJustifyMainAxis( | |
// The space between the beginning and the first element and the space between | |
// each two elements. | |
float leadingMainDim = 0; | |
- float betweenMainDim = 0; | |
+ float betweenMainDim = gap; | |
const YGJustify justifyContent = node->getStyle().justifyContent(); | |
if (numberOfAutoMarginsOnCurrentLine == 0) { | |
@@ -2532,24 +2503,23 @@ static void YGJustifyMainAxis( | |
break; | |
case YGJustifySpaceBetween: | |
if (collectedFlexItemsValues.itemsOnLine > 1) { | |
- betweenMainDim = | |
+ betweenMainDim += | |
YGFloatMax(collectedFlexItemsValues.remainingFreeSpace, 0) / | |
(collectedFlexItemsValues.itemsOnLine - 1); | |
- } else { | |
- betweenMainDim = 0; | |
} | |
break; | |
case YGJustifySpaceEvenly: | |
// Space is distributed evenly across all elements | |
- betweenMainDim = collectedFlexItemsValues.remainingFreeSpace / | |
+ leadingMainDim = collectedFlexItemsValues.remainingFreeSpace / | |
(collectedFlexItemsValues.itemsOnLine + 1); | |
- leadingMainDim = betweenMainDim; | |
+ betweenMainDim += leadingMainDim; | |
break; | |
case YGJustifySpaceAround: | |
// Space on the edges is half of the space between elements | |
- betweenMainDim = collectedFlexItemsValues.remainingFreeSpace / | |
+ leadingMainDim = 0.5 * | |
+ collectedFlexItemsValues.remainingFreeSpace / | |
collectedFlexItemsValues.itemsOnLine; | |
- leadingMainDim = betweenMainDim / 2; | |
+ betweenMainDim += leadingMainDim * 2; | |
break; | |
case YGJustifyFlexStart: | |
break; | |
@@ -2779,16 +2749,22 @@ static void YGNodelayoutImpl( | |
const YGEdge startEdge = | |
direction == YGDirectionLTR ? YGEdgeLeft : YGEdgeRight; | |
const YGEdge endEdge = direction == YGDirectionLTR ? YGEdgeRight : YGEdgeLeft; | |
- node->setLayoutMargin( | |
- node->getLeadingMargin(flexRowDirection, ownerWidth).unwrap(), startEdge); | |
- node->setLayoutMargin( | |
- node->getTrailingMargin(flexRowDirection, ownerWidth).unwrap(), endEdge); | |
- node->setLayoutMargin( | |
- node->getLeadingMargin(flexColumnDirection, ownerWidth).unwrap(), | |
- YGEdgeTop); | |
- node->setLayoutMargin( | |
- node->getTrailingMargin(flexColumnDirection, ownerWidth).unwrap(), | |
- YGEdgeBottom); | |
+ | |
+ const float marginRowLeading = | |
+ node->getLeadingMargin(flexRowDirection, ownerWidth).unwrap(); | |
+ node->setLayoutMargin(marginRowLeading, startEdge); | |
+ const float marginRowTrailing = | |
+ node->getTrailingMargin(flexRowDirection, ownerWidth).unwrap(); | |
+ node->setLayoutMargin(marginRowTrailing, endEdge); | |
+ const float marginColumnLeading = | |
+ node->getLeadingMargin(flexColumnDirection, ownerWidth).unwrap(); | |
+ node->setLayoutMargin(marginColumnLeading, YGEdgeTop); | |
+ const float marginColumnTrailing = | |
+ node->getTrailingMargin(flexColumnDirection, ownerWidth).unwrap(); | |
+ node->setLayoutMargin(marginColumnTrailing, YGEdgeBottom); | |
+ | |
+ const float marginAxisRow = marginRowLeading + marginRowTrailing; | |
+ const float marginAxisColumn = marginColumnLeading + marginColumnTrailing; | |
node->setLayoutBorder(node->getLeadingBorder(flexRowDirection), startEdge); | |
node->setLayoutBorder(node->getTrailingBorder(flexRowDirection), endEdge); | |
@@ -2811,8 +2787,8 @@ static void YGNodelayoutImpl( | |
if (node->hasMeasureFunc()) { | |
YGNodeWithMeasureFuncSetMeasuredDimensions( | |
node, | |
- availableWidth, | |
- availableHeight, | |
+ availableWidth - marginAxisRow, | |
+ availableHeight - marginAxisColumn, | |
widthMeasureMode, | |
heightMeasureMode, | |
ownerWidth, | |
@@ -2827,8 +2803,8 @@ static void YGNodelayoutImpl( | |
if (childCount == 0) { | |
YGNodeEmptyContainerSetMeasuredDimensions( | |
node, | |
- availableWidth, | |
- availableHeight, | |
+ availableWidth - marginAxisRow, | |
+ availableHeight - marginAxisColumn, | |
widthMeasureMode, | |
heightMeasureMode, | |
ownerWidth, | |
@@ -2841,8 +2817,8 @@ static void YGNodelayoutImpl( | |
if (!performLayout && | |
YGNodeFixedSizeSetMeasuredDimensions( | |
node, | |
- availableWidth, | |
- availableHeight, | |
+ availableWidth - marginAxisRow, | |
+ availableHeight - marginAxisColumn, | |
widthMeasureMode, | |
heightMeasureMode, | |
ownerWidth, | |
@@ -2866,12 +2842,14 @@ static void YGNodelayoutImpl( | |
const float mainAxisownerSize = isMainAxisRow ? ownerWidth : ownerHeight; | |
const float crossAxisownerSize = isMainAxisRow ? ownerHeight : ownerWidth; | |
- const float leadingPaddingAndBorderCross = | |
- node->getLeadingPaddingAndBorder(crossAxis, ownerWidth).unwrap(); | |
const float paddingAndBorderAxisMain = | |
YGNodePaddingAndBorderForAxis(node, mainAxis, ownerWidth); | |
+ const float leadingPaddingAndBorderCross = | |
+ node->getLeadingPaddingAndBorder(crossAxis, ownerWidth).unwrap(); | |
+ const float trailingPaddingAndBorderCross = | |
+ node->getTrailingPaddingAndBorder(crossAxis, ownerWidth).unwrap(); | |
const float paddingAndBorderAxisCross = | |
- YGNodePaddingAndBorderForAxis(node, crossAxis, ownerWidth); | |
+ leadingPaddingAndBorderCross + trailingPaddingAndBorderCross; | |
YGMeasureMode measureModeMainDim = | |
isMainAxisRow ? widthMeasureMode : heightMeasureMode; | |
@@ -2883,35 +2861,20 @@ static void YGNodelayoutImpl( | |
const float paddingAndBorderAxisColumn = | |
isMainAxisRow ? paddingAndBorderAxisCross : paddingAndBorderAxisMain; | |
- const float marginAxisRow = | |
- node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap(); | |
- const float marginAxisColumn = | |
- node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap(); | |
- | |
- const auto& minDimensions = node->getStyle().minDimensions(); | |
- const auto& maxDimensions = node->getStyle().maxDimensions(); | |
- const float minInnerWidth = | |
- YGResolveValue(minDimensions[YGDimensionWidth], ownerWidth).unwrap() - | |
- paddingAndBorderAxisRow; | |
- const float maxInnerWidth = | |
- YGResolveValue(maxDimensions[YGDimensionWidth], ownerWidth).unwrap() - | |
- paddingAndBorderAxisRow; | |
- const float minInnerHeight = | |
- YGResolveValue(minDimensions[YGDimensionHeight], ownerHeight).unwrap() - | |
- paddingAndBorderAxisColumn; | |
- const float maxInnerHeight = | |
- YGResolveValue(maxDimensions[YGDimensionHeight], ownerHeight).unwrap() - | |
- paddingAndBorderAxisColumn; | |
- | |
- const float minInnerMainDim = isMainAxisRow ? minInnerWidth : minInnerHeight; | |
- const float maxInnerMainDim = isMainAxisRow ? maxInnerWidth : maxInnerHeight; | |
- | |
// STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS | |
float availableInnerWidth = YGNodeCalculateAvailableInnerDim( | |
- node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth); | |
+ node, | |
+ YGDimensionWidth, | |
+ availableWidth - marginAxisRow, | |
+ paddingAndBorderAxisRow, | |
+ ownerWidth); | |
float availableInnerHeight = YGNodeCalculateAvailableInnerDim( | |
- node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth); | |
+ node, | |
+ YGDimensionHeight, | |
+ availableHeight - marginAxisColumn, | |
+ paddingAndBorderAxisColumn, | |
+ ownerHeight); | |
float availableInnerMainDim = | |
isMainAxisRow ? availableInnerWidth : availableInnerHeight; | |
@@ -2954,6 +2917,8 @@ static void YGNodelayoutImpl( | |
// Accumulated cross dimensions of all lines so far. | |
float totalLineCrossDim = 0; | |
+ const float crossAxisGap = node->getGapForAxis(crossAxis, availableInnerCrossDim).unwrap(); | |
+ | |
// Max main dimension of all the lines. | |
float maxLineMainDim = 0; | |
YGCollectFlexItemsRowValues collectedFlexItemsValues; | |
@@ -2983,6 +2948,28 @@ static void YGNodelayoutImpl( | |
// If we don't measure with exact main dimension we want to ensure we don't | |
// violate min and max | |
if (measureModeMainDim != YGMeasureModeExactly) { | |
+ const auto& minDimensions = node->getStyle().minDimensions(); | |
+ const auto& maxDimensions = node->getStyle().maxDimensions(); | |
+ const float minInnerWidth = | |
+ YGResolveValue(minDimensions[YGDimensionWidth], ownerWidth).unwrap() - | |
+ paddingAndBorderAxisRow; | |
+ const float maxInnerWidth = | |
+ YGResolveValue(maxDimensions[YGDimensionWidth], ownerWidth).unwrap() - | |
+ paddingAndBorderAxisRow; | |
+ const float minInnerHeight = | |
+ YGResolveValue(minDimensions[YGDimensionHeight], ownerHeight) | |
+ .unwrap() - | |
+ paddingAndBorderAxisColumn; | |
+ const float maxInnerHeight = | |
+ YGResolveValue(maxDimensions[YGDimensionHeight], ownerHeight) | |
+ .unwrap() - | |
+ paddingAndBorderAxisColumn; | |
+ | |
+ const float minInnerMainDim = | |
+ isMainAxisRow ? minInnerWidth : minInnerHeight; | |
+ const float maxInnerMainDim = | |
+ isMainAxisRow ? maxInnerWidth : maxInnerHeight; | |
+ | |
if (!YGFloatIsUndefined(minInnerMainDim) && | |
collectedFlexItemsValues.sizeConsumedOnCurrentLine < | |
minInnerMainDim) { | |
@@ -3251,7 +3238,8 @@ static void YGNodelayoutImpl( | |
} | |
} | |
- totalLineCrossDim += collectedFlexItemsValues.crossDim; | |
+ const float appliedCrossGap = lineCount != 0 ? crossAxisGap : 0.0f; | |
+ totalLineCrossDim += collectedFlexItemsValues.crossDim + appliedCrossGap; | |
maxLineMainDim = | |
YGFloatMax(maxLineMainDim, collectedFlexItemsValues.mainDim); | |
} | |
@@ -3346,6 +3334,7 @@ static void YGNodelayoutImpl( | |
} | |
endIndex = ii; | |
lineHeight += crossDimLead; | |
+ currentLead += i != 0 ? crossAxisGap : 0; | |
if (performLayout) { | |
for (ii = startIndex; ii < endIndex; ii++) { | |
@@ -3531,8 +3520,8 @@ static void YGNodelayoutImpl( | |
YGNodeBoundAxisWithinMinAndMax( | |
node, | |
crossAxis, | |
- YGFloatOptional{totalLineCrossDim + | |
- paddingAndBorderAxisCross}, | |
+ YGFloatOptional{ | |
+ totalLineCrossDim + paddingAndBorderAxisCross}, | |
crossAxisownerSize) | |
.unwrap()), | |
paddingAndBorderAxisCross), | |
@@ -3557,7 +3546,8 @@ static void YGNodelayoutImpl( | |
if (performLayout) { | |
// STEP 10: SIZING AND POSITIONING ABSOLUTE CHILDREN | |
for (auto child : node->getChildren()) { | |
- if (child->getStyle().positionType() != YGPositionTypeAbsolute) { | |
+ if (child->getStyle().display() == YGDisplayNone || | |
+ child->getStyle().positionType() != YGPositionTypeAbsolute) { | |
continue; | |
} | |
YGNodeAbsoluteLayoutChild( | |
@@ -3665,10 +3655,10 @@ YOGA_EXPORT float YGRoundValueToPixelGrid( | |
const double pointScaleFactor, | |
const bool forceCeil, | |
const bool forceFloor) { | |
- double scaledValue = ((double) value) * pointScaleFactor; | |
+ double scaledValue = value * pointScaleFactor; | |
// We want to calculate `fractial` such that `floor(scaledValue) = scaledValue | |
// - fractial`. | |
- double fractial = fmod(scaledValue, 1.0f); | |
+ double fractial = fmod(scaledValue, 1.0); | |
if (fractial < 0) { | |
// This branch is for handling negative numbers for `value`. | |
// | |
@@ -3690,25 +3680,25 @@ YOGA_EXPORT float YGRoundValueToPixelGrid( | |
if (YGDoubleEqual(fractial, 0)) { | |
// First we check if the value is already rounded | |
scaledValue = scaledValue - fractial; | |
- } else if (YGDoubleEqual(fractial, 1.0f)) { | |
- scaledValue = scaledValue - fractial + 1.0f; | |
+ } else if (YGDoubleEqual(fractial, 1.0)) { | |
+ scaledValue = scaledValue - fractial + 1.0; | |
} else if (forceCeil) { | |
// Next we check if we need to use forced rounding | |
- scaledValue = scaledValue - fractial + 1.0f; | |
+ scaledValue = scaledValue - fractial + 1.0; | |
} else if (forceFloor) { | |
scaledValue = scaledValue - fractial; | |
} else { | |
// Finally we just round the value | |
scaledValue = scaledValue - fractial + | |
- (!YGFloatIsUndefined(fractial) && | |
- (fractial > 0.5f || YGDoubleEqual(fractial, 0.5f)) | |
- ? 1.0f | |
- : 0.0f); | |
+ (!YGDoubleIsUndefined(fractial) && | |
+ (fractial > 0.5 || YGDoubleEqual(fractial, 0.5)) | |
+ ? 1.0 | |
+ : 0.0); | |
} | |
- return (YGFloatIsUndefined(scaledValue) || | |
- YGFloatIsUndefined(pointScaleFactor)) | |
+ return (YGDoubleIsUndefined(scaledValue) || | |
+ YGDoubleIsUndefined(pointScaleFactor)) | |
? YGUndefined | |
- : scaledValue / pointScaleFactor; | |
+ : (float) (scaledValue / pointScaleFactor); | |
} | |
YOGA_EXPORT bool YGNodeCanUseCachedMeasurement( | |
@@ -4235,9 +4225,7 @@ YOGA_EXPORT void YGNodeCalculateLayoutWithContext( | |
if (node->getConfig()->printTree) { | |
YGNodePrint( | |
node, | |
- (YGPrintOptions)( | |
- YGPrintOptionsLayout | YGPrintOptionsChildren | | |
- YGPrintOptionsStyle)); | |
+ (YGPrintOptions) (YGPrintOptionsLayout | YGPrintOptionsChildren | YGPrintOptionsStyle)); | |
} | |
#endif | |
} | |
@@ -4297,9 +4285,7 @@ YOGA_EXPORT void YGNodeCalculateLayoutWithContext( | |
if (nodeWithoutLegacyFlag->getConfig()->printTree) { | |
YGNodePrint( | |
nodeWithoutLegacyFlag, | |
- (YGPrintOptions)( | |
- YGPrintOptionsLayout | YGPrintOptionsChildren | | |
- YGPrintOptionsStyle)); | |
+ (YGPrintOptions) (YGPrintOptionsLayout | YGPrintOptionsChildren | YGPrintOptionsStyle)); | |
} | |
#endif | |
} | |
diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.h b/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.h | |
index 87901a2..40b0edf 100644 | |
--- a/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.h | |
+++ b/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.h | |
@@ -107,7 +107,7 @@ WIN_EXPORT void YGNodeMarkDirty(YGNodeRef node); | |
// Marks the current node and all its descendants as dirty. | |
// | |
-// Intended to be used for Uoga benchmarks. Don't use in production, as calling | |
+// Intended to be used for Yoga benchmarks. Don't use in production, as calling | |
// `YGCalculateLayout` will cause the recalculation of each and every node. | |
WIN_EXPORT void YGNodeMarkDirtyAndPropogateToDescendants(YGNodeRef node); | |
@@ -232,6 +232,9 @@ WIN_EXPORT YGValue YGNodeStyleGetPadding(YGNodeConstRef node, YGEdge edge); | |
WIN_EXPORT void YGNodeStyleSetBorder(YGNodeRef node, YGEdge edge, float border); | |
WIN_EXPORT float YGNodeStyleGetBorder(YGNodeConstRef node, YGEdge edge); | |
+WIN_EXPORT void YGNodeStyleSetGap(YGNodeRef node, YGGap gap, float gapValue); | |
+WIN_EXPORT float YGNodeStyleGetGap(YGNodeConstRef node, YGGap gap); | |
+ | |
WIN_EXPORT void YGNodeStyleSetWidth(YGNodeRef node, float width); | |
WIN_EXPORT void YGNodeStyleSetWidthPercent(YGNodeRef node, float width); | |
WIN_EXPORT void YGNodeStyleSetWidthAuto(YGNodeRef node); | |
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env | |
new file mode 100644 | |
index 0000000..361f5fb | |
--- /dev/null | |
+++ b/node_modules/react-native/scripts/.packager.env | |
@@ -0,0 +1 @@ | |
+export RCT_METRO_PORT=8081 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment