From 690660a620267cafcace601ef36114b2d51f27d5 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 18 Jan 2024 21:22:05 -0800 Subject: [PATCH] Add 'static' as position option in style sheets (#42316) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/42316 We need to change the typing to allow for 'static'. An issue here is that Paper will not have `static` due to missing z-index logic. Unfortunately, we cannot create a fabric-only version of the typing as we cannot have conditional elements of the same name in ts. To remedy this we took out the parsing of the string 'static' in Paper. Instead we will just emit a warning and default to `relative`. Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D51431524 fbshipit-source-id: 0444b2f8432f172b2e8a084b307b0e624dba8085 --- .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 2 +- .../Libraries/StyleSheet/StyleSheetTypes.js | 11 ++++++----- .../__tests__/__snapshots__/public-api-test.js.snap | 2 +- packages/react-native/React/Base/RCTConvert.m | 6 +----- .../facebook/react/uimanager/LayoutShadowNode.java | 5 ----- 5 files changed, 9 insertions(+), 17 deletions(-) diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index f7a0de83adc..2a3719fe6c9 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -102,7 +102,7 @@ export interface FlexStyle { paddingStart?: DimensionValue | undefined; paddingTop?: DimensionValue | undefined; paddingVertical?: DimensionValue | undefined; - position?: 'absolute' | 'relative' | undefined; + position?: 'absolute' | 'relative' | 'static' | undefined; right?: DimensionValue | undefined; start?: DimensionValue | undefined; top?: DimensionValue | undefined; diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index d2a00b18429..d4b5ab92113 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -469,22 +469,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{ borderTopWidth?: number, /** `position` in React Native is similar to regular CSS, but - * everything is set to `relative` by default, so `absolute` - * positioning is always just relative to the parent. + * everything is set to `relative` by default. * * If you want to position a child using specific numbers of logical * pixels relative to its parent, set the child to have `absolute` * position. * * If you want to position a child relative to something - * that is not its parent, just don't use styles for that. Use the - * component tree. + * that is not its parent, set the child to have `absolute` position and the + * nodes between to have `static` position. + * + * Note that `static` is only available on the new renderer. * * See https://github.com/facebook/yoga * for more details on how `position` differs between React Native * and CSS. */ - position?: 'absolute' | 'relative', + position?: 'absolute' | 'relative' | 'static', /** `flexDirection` controls which directions children of a container go. * `row` goes left to right, `column` goes top to bottom, and you may diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 5a52f701e3b..1298282e9a1 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -8722,7 +8722,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{ borderRightWidth?: number, borderStartWidth?: number, borderTopWidth?: number, - position?: \\"absolute\\" | \\"relative\\", + position?: \\"absolute\\" | \\"relative\\" | \\"static\\", flexDirection?: \\"row\\" | \\"row-reverse\\" | \\"column\\" | \\"column-reverse\\", flexWrap?: \\"wrap\\" | \\"nowrap\\" | \\"wrap-reverse\\", justifyContent?: diff --git a/packages/react-native/React/Base/RCTConvert.m b/packages/react-native/React/Base/RCTConvert.m index 55f42ebf49e..ae10d7713ee 100644 --- a/packages/react-native/React/Base/RCTConvert.m +++ b/packages/react-native/React/Base/RCTConvert.m @@ -1190,11 +1190,7 @@ RCT_ENUM_CONVERTER( RCT_ENUM_CONVERTER( YGPositionType, - (@{ - @"static" : @(YGPositionTypeStatic), - @"absolute" : @(YGPositionTypeAbsolute), - @"relative" : @(YGPositionTypeRelative) - }), + (@{@"absolute" : @(YGPositionTypeAbsolute), @"relative" : @(YGPositionTypeRelative)}), YGPositionTypeRelative, intValue) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java index 6513dd6268c..b966d4590b5 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java @@ -823,11 +823,6 @@ public class LayoutShadowNode extends ReactShadowNodeImpl { } switch (position) { - case "static": - { - setPositionType(YogaPositionType.STATIC); - break; - } case "relative": { setPositionType(YogaPositionType.RELATIVE);