🤖 Merge PR DefinitelyTyped#65485 [react-native] Add experimental types by @lunaleaps

* [react-native] Add experimental types

* Remove exports

---------

Co-authored-by: Luna Wei <[email protected]>

Author: 2 people

types/react-native/test/experimental.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import {
+    View,
+    StyleSheet,
+  } from 'react-native';
+
+import {} from 'react-native/types/experimental';
+
+function TestExperimentalStyleSheetProps() {
+  return (
+    <>
+    <View style={styles.experimental} />
+    <View style={{marginInline: 2, marginInlineEnd: 3, marginBlock: 3}} />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+    experimental: {
+        paddingBlock: 3,
+        paddingInline: 2,
+    }
+})

types/react-native/tsconfig.json

@@ -18,6 +18,7 @@
     "files": [
         "index.d.ts",
         "test/animated.tsx",
+        "test/experimental.tsx",
         "test/fabric-component-sample.ts",
         "test/globals.tsx",
         "test/index.tsx",

types/react-native/types/experimental.d.ts

@@ -0,0 +1,92 @@
+/**
+ * These are types for things that are present for New Architecture enabled apps
+ * which is currently considered experimental.
+ *
+ * To load the types declared here in an actual project, there are three ways.
+ *
+ * 1. If your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
+ * is to add `"react-native/types/experimental"` to the `"types"` array.
+ *
+ * 2. Alternatively, a specific import syntax can to be used from a typescript file.
+ * This module does not exist in reality, which is why the {} is important:
+ *
+ * ```ts
+ * import {} from 'react-native/types/experimental'
+ * ```
+ *
+ * 3. It is also possible to include it through a triple-slash reference:
+ *
+ * ```ts
+ * /// <reference types="react-native/types/experimental" />
+ * ```
+ *
+ * Either the import or the reference only needs to appear once, anywhere in the project.
+ */
+
+import {DimensionValue} from '../Libraries/StyleSheet/StyleSheetTypes';
+
+export {};
+
+declare module '.' {
+  export interface FlexStyle {
+    /**
+     * Equivalent to `marginVertical`
+     */
+    marginBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginBottom`
+     */
+    marginBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginTop`
+     */
+    marginBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginHorizontal`
+     */
+    marginInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginEnd`
+     */
+    marginInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginStart`
+     */
+    marginInlineStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingVertical`
+     */
+    paddingBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingBottom`
+     */
+    paddingBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingTop`
+     */
+    paddingBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingHorizontal`
+     */
+    paddingInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingEnd`
+     */
+    paddingInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingStart`
+     */
+    paddingInlineStart?: DimensionValue | undefined;
+  }
+}