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);