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

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;

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

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?:

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)
 

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